Pour découvrir comment créer vos propres boutons clickables interactifs en pur CSS, découvrez le code source sur Github : https://github.com/isimaginn/The-Pure-CSS3-Click-Button

Vous pouvez aussi découvrir une application de cette technique full CSS ici : http://css-click-button.com/

J'espère avoir vos retours car ce travail peut sans doute être amélioré même s'il il est déjà fonctionnel, et vous souhaite un joyeux développement.

Isigaël LB

Bonjour,

Testé sur MacBook Pro, euh... C'est pas très responsive tout ça

Sinon bonne idée pour ceux qui n'aiment pas javascript.

Testé sur un Chrome à jour sur Windows... Première visite, le CSS n'était même pas chargé. Seconde visite, c'était quasi inutilisable, il y a des éléments qui se chevauchent absolument partout. Ce n'est pas "moche", il y a ou du CSS manquant, ou alors il y a un problème de design assez massif.

Pire encore, le bouton ne se comporte pas correctement. Typiquement, je fais un clic droit pour ouvrir le menu contextuel et inspecter, il considère que j'ai cliqué sur le bouton...

En bref (désolé si ça pique, j'essaie surtout de faire un retour):

• le bouton ne se comporte pas comme un bouton. Je me demande ce que ça donne niveau accessibilité quand on navigue la page avec un lecteur d'écran...
• le CSS sur le site n'est pas acceptable même si on était dans les années 2000. Aucune structure de page. Si on veut faire du full CSS, autant le faire correctement déjà pour ce pour quoi le CSS est fait. Sinon ça détourne immédiatement le potentiel utilisateur.
• La solution est manuelle et extrêmement limitée. La grande majorité des usages liés aux boutons ne sont pas possibles avec ça.
• Les "avantages" présentés n'en sont pas, vu qu'ils sont valables pour tous les standards du Web : le JS est lui aussi largement assez rapide pour exécuter du code au clic sur un bouton, il est présent par défaut sur tous les navigateurs du monde, son avenir est assuré, etc. Et surtout : il est fait pour ça. Ça veut dire qu'on propose ici une solution largement moins intuitive et bien plus complexe à apprendre que 3 lignes de JS moderne, parce qu'on ne veut pas apprendre les bases nécessaires pour faire proprement ce qu'on veut faire. Si quelqu'un suit ce raisonnement, pour moi c'est de la paresse, à ce stade.

Enfin, avis personnel : je ne comprends pas cette volonté de vouloir utiliser des bricolages et des détournements de fonctionnalité, pour absolument éviter d'utiliser la solution technique standard conçue spécifiquement pour l'interaction dans les pages web. Et produire un résultat aussi bancal. 

-
Edité par Genroa 7 novembre 2019 à 11:22:04

Genroa je tiens à te remercier, au moins c'est une réponse très étayée que tu me donnes là.

En fait j'ai eu l'intuition que CSS pouvait faire ce clic et tout le monde me disait que c'était impossible, du coup je l'ai fait.

Pour ce qui serait une question de flemme de s'intéresser au reste, je dois dire que JS tout entier m'aura demandé moins d'efforts de réflexion pour apprendre que mettre au point cette technique, après je sais qu'en soi elle est plutôt superflue et que le responsive laisse à désirer( j'y reviendrais quand je trouve le temps) mais en tous cas ça marche quand même, et peut-être que ça servira pour des choses qu'on imagine pas, c'est ça la recherche.

Bref, c'était une découverte et il fallait la partager.

C'est une expérience intéressante et enrichissante, je n'en doute pas ! (comme les gens qui développent des moteurs de jeu 3D uniquement à base de transformations CSS 3D) Dans cette approche, c'est super sympa. (j'espère juste ne jamais avoir à travailler sur un code de ce genre pour un quelconque client de toute ma vie, ça ne devrait pas finir en prod en l'état actuel )

Disons que comme CSS n'est pas fait pour, il est vite limité, c'était ma principale critique. Y'a plein d'usages où ce hack ne suffit pas, ce qui est dommage (surtout si un changement de besoin nécessite de le retirer pour le remplacer par une solution qui aurait tenu pour le même coût de mise en place)

Moi ce qui m'a motivé c'est de voir la quantité incroyable d'articles qui proposent de faire des choses en mentionnant bien " sans Javascript", je sais pas mais on dirait qu'il y en a à qui ça plaît.

J'ai l'impression d'être retourné en 1998, je suis désolé, mais tu ne peux pas consciemment croire que ton projet peut rivaliser avec JS.Ton site se charge une fois sur deux, la présentation est vraiment ... affreuse ! Tu as rédigé ton site en anglais, mais il y a beaucoup de coquilles, d'erreur de traduction, des tournures incorrectes, bref ça saute aux yeux.

Fais également attention à ton profil LinkedIn, si il doit faire sérieux, c'est le même problème que mon paragraphe précédent et en plus tu as oublié des lettres.

Le JS existe pour une raison, inutile de vouloir réinventer la roue 

Mcflan_7,

je crois plutôt que ce sont les gens qui utilisent JS à tort et à travers qui essayent de réinventer la roue, et qui sans le savoir créent des sites qui rament et qui polluent,

à ce propos je t'invite à lire cet article qui explique tout cela très bien,

ensuite on reparlera de l'intérêt d'avoir une" CSS-Trick" en réserve là où elle pourrait éviter un surplus de JS inutile : https://www.artwai.com/no-fucking-js-spirit/?utm_source=linkedin_sharelink .

A part ça, si tu critiquais plus le fond que la forme ce serait intéressant, et puisque tu as l'air d'un pro tu peux aussi venir sur ce forum en assumant ton identité, ça donnerait du poids à ton expertise, non?

-
Edité par Isigaël LB 12 février 2020 à 20:19:07

Isigaël LB a écrit:

Mcflan_7,

je crois plutôt que ce sont les gens qui utilisent JS à tort et à travers qui essayent de réinventer la roue, et qui sans le savoir créent des sites qui rament et qui polluent,

à ce propos je t'invite à lire cet article qui explique tout cela très bien,

ensuite on reparlera de l'intérêt d'avoir une" CSS-Trick" en réserve là où elle pourrait éviter un surplus de JS inutile : https://www.artwai.com/no-fucking-js-spirit/?utm_source=linkedin_sharelink .

A part ça, si tu critiquais plus le fond que la forme ce serait intéressant, et puisque tu as l'air d'un pro tu peux aussi venir sur ce forum en assumant ton identité, ça donnerait du poids à ton expertise, non?

-
Edité par Isigaël LB il y a environ 1 heure

Tu postes ton projet, c'est que souhaites que l'on critique.

Tu as l'air de vouloir attendre que des compliments, mais je suis désolé, mes critiques sont fondées sur ce que je vois.

C'est assez paradoxale de parler de site qui rament et polluent quand le tiens ne se charge pas, non ?

Capture d'écran de ton site ...

Ca ne ferait pas ça en JS ..

Mais vu que je souhaite aider... je recharge la page et enfin le contenu s'affiche !

Et ce n'est clairement pas aux standards d'aujourd'hui, quand on clique sur "start to see" on ne comprend plus trop ou regarder, toute la page se modifie.

Les avantages du CSS que tu ajoutes sont plutôt... discutable, je voulais te faire un copier-coller, mais un bug dans ton code m'empêche de sélectionner le texte.

Donc je veux bien que tu crois en ta technologie, mais n'essai pas de comparer un JS avec ce que tu proposes, c'est intéressant et innovant, mais c'est tout.

Conseil : Prend la critique comme elle vient, n'essai pas d'attaquer l'intervenant.