Bonjour
J'ai une question simple a vous posez, je suis entrein d'apprendre le Javascripte, et je vois beaucoup de "similitude" avec le css, bon ma question quelle outil pour avoir plus de fiabilité.
exemple:
dans le js on a onmouseover et dans le css on'as :hover
un autre exemple:
faire un menu deroulant avec du css au lieu du js

18 réponses


Laznet
Réponse acceptée

Bonjour,

Je vais commencer par répondre a ta question (ce sera plus simple pour argumenter par la suite), Je dirais que pour faire un menu déroulant il est presque plus intéressant d'utiliser du javascript en manipulant un peu ton CSS (par exemple en appliquant un effet de translation quand tu détecte le clique), mais surtout ne pas utiliser le CSS seul.

Et en faite (selon moi) il faut voir le "hover css" comme un effet "instantané", par exemple pour donner un retour visuel à l'utilisateur en assombrissant l'arrière plan d'une div, en soulignant un lien etc.. etc.. Pour lui dire que ce sur quoi sa souris il a passé sa souris est bien plus qu'un simple mot ou une simple div. Donc selon moi quand tu compte faire quelques d'un peu plus complexe qu'un simple retour visuel à l'utilisateur, utilise du javascript. Parce qu'il est largement fait pour ce genre de job (donner un peu de dynamique a ta page) alors que le css c'est plus pour rendre ta page plus belle, tu n'auras pas la possibilité de faire autant que choses que tu peux faire avec du javascript (les conditions etc..).

Si tu vois d'autre similitudes qui te pose problème ou que tu as une question à ce sujet n'hésite pas :D

Salut,
Je suis désolé pour Laznet mais il faut éviter au maximum la manipulation du style par du JS pour des raisons de performance, mais aussi pour des raisons accessibilité. Sauf si tu passes par des frameworks js et que tu ne peux pas faire autrement (Coût du projet/temps de travail) De façon optimisée tu peux faire l'ajout d'une classe à la détection d'un évènement particulier pour créer des comportements. Le JS peut être bloquer (soit par l'utilisateur, un plugin, etc.) ce qui rend le js pas parfaitement fiable, ce qui n'est pas le cas du css.

Par manipulation du style j'entendais (même si j'avoue que ce n'est pas clair au premier abord), manipuler les différents class d'une page CSS, passer par exemple d'une class "visible" a une class "hidden" etc..
" pour des raisons de performance " — Aurais-tu une source qui expliquerait cet argument ? Parce que j'ai encore un peu de mal avec ce point, selon moi faire de grosses opérations de de manipulation en utilisant du CSS coûtera énormément plus en performence que si on l'aurait fait en javascript.
(Peut être qu'effectivement je me trompe, mais dans ce cas j'aimerais voir la source, histoire de bien comprendre).

Par contre c'est sûr que si le javascript est désactivé l'utilisation de ma méthode peut poser problème. C'est quelque chose à prendre en compte c'est sûr ^^.

Simplement parceque les animations sont native en CSS3, qu'on peut prifiter de l'acceleration materiel pour les animations 3d ( utilisation du GPU pour les calculs) Apres tu a des libs comme velocity ou encore GSAP qui te permetent d'avoir un benchmark plus performant mais au final pour une annimation si tu doit charger 2mo de lib et jquery l'interet est vite fait quand tu n'a besoin de rien pour animer le css

Après Defy tu parles dans le cas où on souhaite mettre en place de grosses animations mais tu ne vas pas utiliser le javascript uniquement pour faire ce genre de truc.
Et un menu déroulant ce n'est pas forcément la même chose que le menu en vague présent sur ce site. Ça peut très bien être une simple div qui translate au clique sur un bouton.
Ça dépend évidemment du cas de figure, en l'occurence il parlait d'un menu déroulant sans donner de détails. Si il aurait souhaité mettre en place un menu bien plus complexe (avec différents effets qui se suivent) il est évidemment que dans ce cas il faudrait utiliser un outil bien plus complexe et performents adapté, encore une fois, à la situation.

Quand dans mon poste je dis "utilise le js si tu veux faire des trucs un peu plus complexe" j'entend évidemment l'utilisation de condition, la détection de clique (car pour déployer ton menu il te faut bien un évènement, il ne précise pas non plus si il souhaite utiliser le clique ou le onmousseover).

Là encore les on click peut se passer de Javascript sans aucun problème, la preuve en est ici

je ne suis pas pro CSS ^^ loin de là, je déteste ce language, mais on peut faire tout ce que l'on fait avec du js en Css et cela sera toujours plus performant et plus léger.

Plus léger que js? Ca dépend du navigateur :-s
Ton exemple montre un hack qui utilise un label pour une checkbox cachée et le pseudo-sélector :checked...
Niveau HTML c'est franchement dégueulasse! Comme tous les hacks...
Le CSS indique les visuels! Or, le visuel d'une application dépend de l'état de son modèle (cf MVC, MVP, MVVM, MVmescouilles...)
Il est donc normal que CSS permette de changer le visuel en fonction de "la souris est-elle sur le composant?", "cette checkbox est-elle checked?", "cet attribut a-t-il cette valeur?"
CSS se sert de l'état du modèle pour administrer la vue...
JS est un puissant langage de gestion des évènements! C'est simplement une extension personnalisable des fonctionnalités du navigateur... C'est donc un contrôleur :-) Il modifie le modèle! Et CSS réagit en fonction en appliquant les visuels correspondant au nouvel état du modèle!

Bref, montre-moi comment tu envoies une requête au serveur en CSS, s'il te plait ;-) (Bon courage!)

Bien que très puissant, le javascript s'est fait dépasser par le CSS3. De manière générale, le javascript est plus lent à s'éxécuter que pourrait l'être le CSS3. De plus, l'utilisateur peut ne pas avoir activé le javascript sur son navigateur, ce qui est très embêtant si on as des éléments cachés qui ne s'activent que grâce à une fonction javascript.

Puis quel rapport un appel ajax avec une animation CSS? dans 80% des cas les animations sont faites avec jQuery, hors jQuery c'est de la grosse merde en terme de performance d'animation.

" le javascript s'est fait dépasser par le CSS3 " — Il ne s'est pas fait dépasser du tout, il n'y pas de concurrence entre ces deux langages, l'un s'occupe de gérer l'aspect visuel d'un site et l'autre gère la partie dynamique ils ne jouent pas du tout sur le même terrain. Et même si aujourd'hui on peut faire des animations en CSS3, le javascript reste quand même malgré tout le plus utilisé pour des raisons évidente de "je ne veux pas me casser la tête à bricoler des trucs en CSS...".

Et d'ailleurs on peut très bien utiliser le javascript "pur" pour faire des animations, jQuery offre juste une syntax largement plus simple et aura tendance à être apprécié pour ça.
Après comme je l'ai dis ça dépend évidemment du cas de figure. Si tous ces outils existe ce n'est pas pour rien, chacun y trouve son compte et ils ont chacun leur utilité.
Tu ne vas pas sortir la grosse librairie d'animation juste pour faire translate un menu de la gauche vers la droite par exemple.

" et cela sera toujours plus performant " — Aujourd'hui les grosses boites misent beaucoup sur ce langage, il est donc évident que le but premier est d'offrir un rendu assez rapidement.
Par exemple le très célèbre moteur de rendu V8 créé par Google.

" Là encore les on click peut se passer de Javascript sans aucun problème " — Dans ce cas de figure tu nous montre que l'on peut détecter quand une checkbox est coché, mais quand est-il pour un bouton ?
Parce que le problème à l'origine c'était de faire un menu déroulant, (et mise à part si tu veux faire un truc "tricky" à base de label et de checkbox.. et encore je ne suis pas sûr que ça fonctionne) je ne vois donc pas comment tu peux détecter en CSS3 et uniquement en CSS3 le clique sur un bouton, car dans un menu déroulant tu n'utilisera jamais de checkbox.
Parce que pour déclencher la jolie animation, il te faudra bien un évènement

" De plus, l'utilisateur peut ne pas avoir activé le javascript sur son navigateur, ce qui est très embêtant si on as des éléments cachés qui ne s'activent que grâce à une fonction javascript. " — Dans ce cas ça risque d'empêcher énormément de choses, mais déjà le javascript est activé par défaut sur les navigateurs, et donc je ne pense pas qu'il soit utile de penser aux trois petits malin qui l'auront désactivé. On ne peut malheureusement pas sauver tous le monde.
Et je ne connais pas de site qui aujourd'hui peuvent fonctionner sans une pointe de javascript.

Surtout que si je me base sur le problème à l'origine, personne n'a proposé de solution qui pourrait être une alternatif à l'utilisation du javascript. Parce que c'est bien de débàtre mais en attendant il faut la trouver la solution.

La solution c'est kotlin, toujours X-D
J'avoue personnellement avoir déjà fait du visuel avec du JS plutôt qu'avec les nouveautés de CSS3 ^^' "Je verrais ça plus tard, pas envie de me casser le cul maintenant", m'étais-je dit! Résultat, je sais que ça existe mais je ne sais toujours pas à quoi ça ressemble :-D
Les gens qui désactivent JS ne vont, de toute façon, pas sur les sites "dangereux" comme grafikart.fr et autres antennes gouvernementales :-)

Sinon, @Laznet, je trouve vraiment bien, surtout pour les noobs, d'expliquer :

  • html = modèle, l'état de l'application
  • css = vue, gestion de l'affichage en fonction de l'état du modèle
  • js = contrôleur, gestion des actions significatives de l'utilisateur et modification du modèle

De un, s'ils ne connaissent pas MVC ça leur fait un peu de culture générale et de deux, ça les encourage à se conformer à cela lorsqu'ils utilisent js et css plutôt que de se dire "full js!" ou "full css!"... Genre chercher à faire avec l'un ce qu'ils devraient plutôt s'employer à réaliser avec l'autre!..

Je ne pense pas qu'il soit nécessaire d'embrouiller un débutant avec des termes dont il n'aura de toute façon pas l'utilité pour résoudre son problème. Culture général, oui peut être mais bon.. Est ce que c'est utile dans l'instant ?

Surtout que je ne comprend pas pourquoi faire cette analogie avec la structure MVC et une structure d'un site internet basique, (surtout que l'analogie n'est pas bonne, par exemple comparer le css à une vue)
Car si je cite Wikipedia, une vue contient des balises HTML. Même si la définition aurait tendance à nous rappeler le CSS, selon moi c'est plus le rôle de l'HTML de faire office de Vue.
Surtout que si je recherche "mvc html css javascript" dans Google, je ne trouve que des pages me parlant de la structure MVC dans une application (type Angular etc...) mais aucune analogie avec les trois langages principaux.

Parce que j'aurais pu utiliser la même annalogie que toi, mais ça aurait été nettement moins clair. J'estime que la réponse que je lui ai donné était assez clair pour qu'un débutant qui est en plein apprentissage n'ait pas besoin de faire une quelconque recherche sur Google.

Car le but (selon moi encore une fois) ce n'est pas de donner de manière random un maximum de connaissances au mec qui demande de l'aide mais plutôt de lui trouver une solution (pas forcément lui fournir le code mais au moins lui donner des pistes, expliquer théoriquement la solution etc..) pour qu'une fois qu'il aura quitté ce topic il ait une vision un peu moins flou de la solution.

Dans le cadre du sujet, oui, évidemment ^^ On a un peu dévié via Defy... J'étais plus du tout dans l'axe :-D
Je voulais dire "de façon générale", "dans l'absolu"... Et surtout en ce qui concerne js et css! Bien que parler de modèle en citant html permette également d'éviter de voir fleurir des attributs "style" :-s Mais il serait plus juste de dire que le html est le modèle de la vue, en réalité...
Après, les applis web sont protéiformes et on ne peut pas vraiment parler d'un DP en particulier puisqu'on peut en rencontrer une multitude, en fonction de la nature de ce que l'on a en face de soi! C'est plutôt à titre indicatif, pour poser les bases, expliciter le fait que chacun des aspects du développement web à son rôle attribué et, idéalement, ne devrait pas s'en éloigner... Bien qu'en pratique, que celui qui n'a jamais hacké lui throw la première exception :-s

" permette également d'éviter de voir fleurir des attributs "style" " — C'est sûr, je comprends ton intention, après en cherchant un peu sur le web tu découvres rapidement que ce que tu fais n'est pas forcément la bonne méthode (si tu cherche a évoluer évidemment).

Tu veux dire que ma méthode est contre productive? Peut-être... Quelle serait la bonne méthode, alors? répéter inlassablement et éviter d'extrapoler?

Quand je dis " que ce que tu fais n'est pas forcément la bonne méthode " — Je ne m'adresse pas directement à toi, je ne suis pas en train de dire que ce que tu fais est "une mauvaise méthode", je prend l'exemple d'un mec random, qui fait quelques mauvaise pratique, et je dis qu'il a juste a aller sur le web pour découvrir que la méthode qu'il utilise pour résoudre son problème n'est pas forcément la bonne, dans le cas où il cherche a évoluer.
Par contre, my bad, mon message peut porter à confusion mais loin de moi l'idée de dire qu'une méthode d'aprentissage / d'aide est meilleur qu'une autre ^^.

Bonjour a vous tout d'abord excuses mon retard ^^, et je viens de lire vos message, tout d'abord je vous remerci de votre contribution a me donne une reponse claire, mais je trouve que que @laznet a raison sur beacoup de point, parce que pour aller plus loin dans la dynamque d'un site web le css trouve assez vite ces limites et tu devras bidoullier a chaque foit pour trouver une solution au probléme (c'est pas pour dire que le css est limité), @Psylozoff je ne dit que je veux faire un site "full js" ou "full css" et dir wouahh je suis un genie du web, mais par ma question je trouve beacoup de similitude entre les deux language, j'ai fais des recherches et j'ai compris que ces deux language sont complémentaire et ce que je veux dire par la que aucun deux ne peut remplacer l'autre.
exemple: stylisé un élément en js tu fais : element.style.backgroundColor et si le client disactive le js mon site web et foutus alors la bonne solution reste le css, mais si je veux dynamisé mon site je doit utliser du js meme si l'utilisateur disactive le js "il y a une perte de qualité" a cause de la disactivation mais ma page resteras bien lisible et claire
encore merci pour votre contibution a ce sujet

Non, y'a pas de similitudes entre JS et CSS -_- Enfin, vas-y, si t'en trouves, raconte ;-)
Quand tu fais el.style.backgroundColor, tu utilises justement JS pour modifier CSS au travers de l'interface HTML... En CSS tu ne peux modifier que l'apparence des entités déduites du HTML! En gros, le navigateur interprète le HTML et construit le DOM qu'il va ensuite afficher en fonction des règles CSS... JS c'est tout autre chose! C'est un vrai langage de programmation, contrairement aux deux autres! Il s'exécute dans une sandbox interne au navigateur et permet de modifier structurellement tout ce qu'il te plaira de modifier!