Un bouton full CSS qui réagit au clic, sans Javascript

Bonjour,
je suis heureux de vous présenter un framework full CSS que j'ai créé, et qui à mon avis pourra servir dans de nombreux projets et vous faciliter la tâche :

Pour créer des boutons interactifs qui réagissent au clic de la souris, on utilise habituellement Javascript, mais grâce à ce simple framework vous pourrez faire la même chose en full CSS, ce qui peut être un avantage majeur dans la rapidité de chargement d'une page ainsi que pour d'autres raisons.
Cette technique fonctionne à la perfection sous Firefox, par contre les navigateurs basés sur Chromium ont un bug qui nécessite un simple rechargement de la page pour être résolu, enfin IE ne prenant actuellement pas la pseudo-classe :active cela ne marche pas.

Découvrez une application de cette méthode sur le site officiel du projet et apprenez à vous en servir en suivant ce lien : http://css-click-button.com/
ou bien
Rejoignez le projet opensource sur Github : https://github.com/isimaginn/The-Pure-CSS3-Click-Button

En espérant que ceci vous sera utile et agréable, et qu'internet devienne un média de plus en plus interactif et vivant pour une meilleure expérience utilisateur.
Et merci d'avance pour vos retours.

Isigaël LB

Bonjour,

Si j'ai bien vu, ça repose sur le règle @keyframes. Or, elle n'est pas supportée pleinement par tous les navigateurs.
Source : https://developer.mozilla.org/fr/doc...CSS/@keyframes

Pièce jointe 514810


Exemple de rendu sur Opera (qui supporte une partie de @keyframes) :
Pièce jointe 514806


Sur Firefox, pas trop de problèmes ; je n'ai pas testé sur Chrome, mais on est loin de généraliser ce système de css @keyframes.

Bonjour,

Citation:

---

Envoyé par Isigaël LB

...par contre les navigateurs basés sur Chromium ont un bug qui nécessite un simple rechargement de la page pour être résolu,
...enfin IE ne prenant actuellement pas la pseudo-classe :active cela ne marche pas....

---

Alors on commencera à s'y intéresser quand ces 2 "problèmes" seront résolus. :aie:


N.B. Tu prendras soin de corriger les fautes d'orthographe :

• "developpment" -> "development" (un seul p en anglais)
• "and the aspect of the page have been changed using only CSS3" -> "...has been changed..."

@Cincinnatus
Il faut bien lire le tableau de Compatibilité des navigateurs" :

• @keyframes est bien supporté par tous les navigateurs *.
• C'est le fait d'"ignorer !important" qui ne l'est pas sur Edge et I.E.

* Selon les versions, peut nécessiter un préfixe : -webkit-, -moz-, -o-,...

@Cincinnatus cela ne repose pas sur keyframes, mais sur :active et :hover, comprends-tu le mécanisme en jeu?

@jreaux62 merci beaucoup pour l'orthographe, mais pourquoi un tel désintérêt?
Des solutions JS peuvent être apportées pour combler les lacunes des navigateurs, car ce framework respecte les standards CSS et Firefox le prouve bien, nous pouvons donc compter sur le fait que les autres résolvent les points faibles mis en jeu.

CSS signifie Cascading Style Sheets : Feuilles de style en cascade.

Citation:

---

Cascading Style Sheets (CSS) est un langage de feuille de style utilisé pour décrire la présentation d'un document écrit en HTML ou en XML (on inclut ici les langages basés sur XML comme SVG ou XHTML).
CSS décrit la façon dont les éléments doivent être affichés à l'écran, sur du papier, en vocalisation, ou sur d'autres supports.

---

• Le HTML définit la structure HTML
• CSS a été créé pour séparer la présentation du document de la structure HTML.
• Le JS, quant à lui, s'occupe des interactions clients.

Alors pourquoi vouloir tout mélanger à nouveau ??

Donc : non, sans intérêt pour moi. (ce n'est que MON avis...)

Citation:

---

Envoyé par Isigaël LB

@Cincinnatus cela ne repose pas sur keyframes, mais sur :active et :hover, comprends-tu le mécanisme en jeu?

---

D'après le site developer.mozilla.org, qui est censé être une référence dans ce domaine :

Citation:

---

Envoyé par https://developer.mozilla.org/fr/docs/Web/CSS/@keyframes

La règle @keyframes permet aux auteurs de définir les étapes qui composent la séquence d'une animation CSS. Cela permet de contrôler une animation plus finement que ce qu'on pourrait obtenir avec les transitions.

---

Keyframes sert donc à définir des animations en CSS. Après avoir regardé un peu plus longtemps le fichier "click.css" sur ton github, il m'apparaît que cette partie est peut-être secondaire. Mais tu utilises beaucoup les animations, non ? Je n'ai pas compté les "transition".
Quant aux pseudo-classes :active et surtout :hover, ça fait un bail que ça existe, donc je crois connaître, après plus de 10 ans d'utilisation occasionnelle (c'est un plus, pas le coeur des applications).

Mais vas-y, détailles tes explications, je suis toujours prêt à apprendre.

@Cincinnatus en fait le mécanisme de base repose sur des transitions mais ça peut aussi être décliné avec une animation.

Dans le fond l'utilisation de :active et :hover est assez simple dans ce framework : il suffit de les combiner pour faire un bouton qui s'active avec :active et ensuite une div qui prend le relais lorsqu'elle est :hover afin de transformer les éléments placés en dessous d'elle dans le DOM, ensuite tout repose sur des questions de timing et de z-index.

Pour comprendre plus finement, tu peux aller sur les pages "the-button-explained" html et css sur le dépôt Github.

@jreaux62
Je me pose une question : si on suit ton raisonnement, à quoi servent donc les pseudo-classes :active et :hover?
Il s'agit bien d'éléments destinés à interagir, ce qui était réservé à JS.
On voit bien qu'avec le temps CSS prend du terrain sur JS, et avant d'être un langage de présentation c'est premièrement un langage web, qui plus est natif sur les navigateurs et donc un standard.
JS peut être désactivé par les utilisateurs, pas CSS.
Et plus le temps avance plus CSS arrive à concurrencer JS sur certains points.

En plus, cette méthode est très simple et carrée, du coup pour la maintenance d'un site le recrutement est facilité car CSS est le langage frontend le plus répandu puisque basique en développement web, et cela évite d'avoir des scripts JS plus ou moins compliqués selon le talent du codeur.
Enfin, je te remercie de rectifier en disant que cela est sans intérêt pour toi plutôt que le" on " de ton premier message, car je sais bien que le web n'attendait pas ce framework pour bien fonctionner mais de nombreux développeurs aiment le full CSS et y trouvent du sens donc c'est pour eux que j'ai fait ce partage.

Pour conclure, je dirais que tout ce qui peut être fait en CSS doit l'être, mais ce n'est que mon avis, et je respecte le tien.

PS: question : dans ton premier message tu semblais dire qu'un code CSS qui ne fonctionnerait pas sous Chrome ou IE était sans valeur, dois-je donc comprendre que tu défends l'idée qu'il faut s'aligner sur le pire des navigateurs pour faire du bon travail? C'est une question épineuse mais si on fait ça on tire le web vers le bas.
PPS: je pense qu'il est possible de contourner le faille Chromium en pur CSS, si tu veux je t'en reparlerais le moment voulu.

Bonjour,

1- Le "on" est justifié, puisqu'il y a encore des bugs à corriger.
Se contenter de dire "Chrome, il suffit de recharger ; pas grave. I.E., ça ne marche pas ; tant pis" n'est pas acceptable.

• Pour Chrome, il faut absolument corriger le bug (Google Chrome est devenu le navigateur le plus utilisé !)
• Quant à I.E.*, il faut que tu proposes une alternative (un hack en JS ?).

* Qu'on le veuille ou non, I.E. est encore présent dans de nombreuses entreprises ou pays, qui n'ont pas forcément les moyens (techniques ou financiers) de renouveler leur parc informatique.

2- Par contre, quand j'ai écrit "sans intérêt pour moi", ça ne remet pas en cause ton travail.
Mais tant qu'il y a des bugs...


3- Enfin, il faut que tu corriges aussi ta page de démonstration : elle bugue aussi ! (même après rechargement)
Certains textes/blocs se superposent...

@jreaux62
les développeurs de Chromium connaissent le problème mais tardent à le résoudre : https://bugs.chromium.org/p/chromium...tail?id=398878
Ici, le forum CSS-Tricks propose une solution JS face à ce problème : https://css-tricks.com/transitions-o...ter-page-load/

Pour ce qui est de IE, en effet il faut une version alternative mais je crois que nombreux codeurs ont l'habitude à force, de plus dès que :active sera implémenté le pur css click button fonctionnera car les transitions sont très bien gérées.

Enfin, merci pour tes précieux retours, il n'y a qu'en confrontant son travail à des professionnels éprouvés qu'on obtient une critique fondée et c'est aussi pour ça que je suis ici.
ps: Puis-je savoir quel navigateur tu utilises et quelle est ta résolution d'écran par rapport aux blocs qui se superposent s'il te plaît?

Même avec Firefox (1920x1080), le texte passe SUR le bouton (cf pièce jointe).
Pièce jointe 515025

Et sur écran plus petit, c'est pire !
Pièce jointe 515027

Je pense que tu uses et abuses des position: absolute;.
Et ça, ce n'est pas terrible...
Tant que faire se peut, on évite.


N.B. Parts de marché des navigateurs web : Google Chrome représente plus de 60% de parts de marché !


[EDIT] Tiens, voilà un exemple : Le Voyage de Nephi - Le Jeu *

• Toutes les animations sont réalisées en CSS !
• Les clics des boutons, eux, sont gérés en JS

* C'est aussi un contre-exemple pour les position: absolute; : ici, ils sont tous nécessaires !
(en réduisant la fenêtre, il passe du format paysage au format portrait : les éléments changent de place)

@jreaux62
je vais devoir revoir mes mediaquerries et mes positionnements on dirait, merci beaucoup pour tous tes retours.