Lorsqu'une tâche peut être accomplie par Javascript ou CSS, est-il préférable d'utiliser CSS? [fermé]


11

J'ai toujours opposé mon veto à JavaScript en utilisant le CSS autant que possible.

c'est-à-dire que je crée des onglets et des boutons de survol en utilisant CSS plutôt que JavaScript.

J'ai vu quelques solutions - en particulier le cadre Web Wt - qui préconisent JavaScript; mais rétrogradez gracieusement vers CSS si le navigateur n'est pas capable / js-désactivé.

Je sais que CSS et JavaScript ont des objectifs différents, mais il y a chevauchement; qui est le bourne de cette question.

Dois-je continuer à utiliser CSS autant que possible sur JavaScript?

Réponses:


10

Oui.

Le but CSS est la mise en page, l'aspect et la convivialité et les animations

Le but de JavaScript est l'interaction.

Si vous faites de la mise en page, utilisez CSS, si vous définissez l'apparence utilisez CSS, si votre animation fait CSS3

Si vous attachez des gestionnaires d'événements ou si vous réagissez à une entrée utilisateur, utilisez JavaScript.

Notez que les gens utilisent JavaScript au lieu de CSS pour la prise en charge du navigateur. Il existe d'autres solutions comme l'émulation de fonctionnalités CSS à l'aide de javascript.


1
J'aime beaucoup les fonctionnalités implémentées dans CSS3, mais la prise en charge du navigateur a été lente et j'ai encore besoin de faciliter les navigateurs hérités. Sinon, j'utiliserais également HTML5 pour la validation des entrées: P
AT

javascript n'est pas seulement utilisé pour l'interaction. Il peut également être utilisé pour renvoyer des données au serveur Web et bien d'autres choses.
eriawan

L'interaction @eriawan pourrait être un terme vague. mais javascript est principalement do x lorsqu'il interagit avec l'utilisateur, où x est arbitraire
Raynos

12

Eh bien, c'est en fait une question assez intéressante. J'essaie de penser à la façon dont vous pourriez même faire un benchmark sur quelque chose comme ça, d'autant plus que la plupart du temps, ni CSS ni JavaScript ne feront de choses très intensives en calcul sur une page Web.

Mon intuition dirait qu'il faut utiliser le CSS autant que possible, mais n'en faites pas une règle dure et rapide.

a:hover {
  background-color: green;
}

est mieux sémantique alors

$('a').onmouseover(function() {
  $(this).css('background-color','green');
})

MAIS

$('a').onmouseover(function() {
  if (somethingelsehappened) {
    $(this).css('background-color','green');
  }
})

serait difficile (mais pas impossible) en CSS. Vous pouvez le faire de cette façon.

$('a').onmouseover(function() {
  if (somethingelsehappened) {
    $(this).addClass('Green');
  }
})

a.green {
  background-color: green;
}

Ce serait vraiment une façon un peu plus maladroite de faire ce qui aurait pu être fait directement en JavaScript, mais j'y pense depuis quelques minutes, et même ici, la bonne solution peut très bien être un CSS, par exemple si vous définissiez beaucoup d'attributs lors du survol.

** Veuillez noter qu'aucun de ces codes ne devrait fonctionner, ceux-ci sont uniquement à des fins de démonstration. **


3
Bien dit, mais pour votre deuxième exemple, je n'hésiterais pas non plus à utiliser une classe CSS (mieux nommée). Il y a un chevauchement certain entre les deux en termes de présentation et de comportement, mais dans ces exemples, c'est assez simple - le comportement change l'apparence au survol de la souris, l'apparence est décrite en CSS.
sevenseacat

3

Considérez si vous voulez ce qui suit du réseau de développeurs Yahoo :

"Après avoir calculé les chiffres, nous avons constaté un taux constant de demandes désactivées par JavaScript, représentant environ 1% du trafic réel des visiteurs, le taux le plus élevé étant d'environ 2% aux États-Unis et le plus bas d'environ 0,25% au Brésil. les autres pays testés ont montré des chiffres très proches de 1,3%. "

Avec des pourcentages si bas (au maximum), cela ne semble pas valoir la peine (à moins que les utilisateurs de vos sites Web proviennent principalement de ces 2%) de s'inquiéter du cas où les utilisateurs ont désactivé leur javascript. L'utilisateur moyen ne sait pas comment désactiver javascript et ne s'en soucie probablement pas. Si vous développez un site Web technologique, vous voudrez peut-être envisager la possibilité qu'ils aient désactivé le javascript, mais s'ils l'ont, ils sont probablement habitués à des sites Web qui ne fonctionnent pas correctement, car de nombreux sites Web utilisent fortement le javascript.

Cela étant dit, j'ai trouvé de nombreux cas où le développement javascript rend ce que j'essaie d'accomplir beaucoup plus facile et d'autres cas où css fait de même.

En fin de compte, chaque "langue" a sa place appropriée dans le développement Web et utilisée à bon escient peut améliorer à la fois le développement et l'expérience utilisateur. Apprenez quelles sont ces utilisations (je recommande l'expérience d'apprentissage) et appliquez judicieusement. D'après mon expérience, les règles définies comme «Ne jamais utiliser JS lorsqu'une solution CSS existe» (paraphrasées) sont rarement les meilleures dans le monde pratique.


Merci pour cela, très d'informations. Pouvez-vous développer votre quatrième paragraphe?
AT

3
CSS est un outil de «style» et Javascript est un outil «d'interactivité». J'ai trouvé que c'est beaucoup plus facile de faire des menus déroulants par exemple stylisés avec css mais animés avec javascript. Pouvez-vous le faire avec css? Oui. Pouvez-vous marteler un clou avec un tournevis? Oui. Pour l'exemple inverse, si tout ce que vous avez à faire est de changer la couleur d'un lien lorsque la souris survole le lien, il est probablement un peu exagéré d'utiliser Javascript pour cela lorsqu'il existe un élément CSS spécialement conçu à cet effet. Pouvez-vous le faire avec Javascript? Oui ... Pouvez-vous tuer une araignée avec un marteau? Oui ...
Kenneth

2

JavaScript est un véritable langage informatique, ce qui signifie qu'il a l'état et le contrôle de l'exécution du programme. En tant que tel, il n'y a pas de limite supérieure à la complexité avec laquelle il peut devenir, et tout ce que vous y écrivez aura nécessairement un strict minimum de complexité. CSS est un code descriptif; sa complexité est limitée au niveau de complexité qu'une recette peut avoir. Par conséquent, si quelque chose peut être fait à la fois en CSS et en JavaScript, je préfère de loin utiliser CSS, car il est forcément moins complexe.


1
"si quelque chose peut être fait en utilisant CSS plutôt que JavaScript, je préférerais de loin utiliser CSS, car il est forcément moins complexe" ... Comment figurez-vous? Cela dépend vraiment de ce que vous essayez de faire pour savoir si ce serait plus complexe dans JS vs CSS ...
Kenneth

Comme je l'ai dit, un programme dynamique avec contrôle de l'exécution est inévitablement plus complexe que toute recette ne le sera jamais.
Mike Nakis

par exemple: je trouve qu'il est beaucoup plus complexe de faire des menus déroulants dans css car vous devez faire tant de réglages et ajouter de nombreux éléments html supplémentaires juste pour le faire fonctionner sur des navigateurs normaux et ensuite si vous voulez qu'il fonctionne dans des versions plus anciennes ou les navigateurs errants (IE, etc.) sont encore plus nécessaires. Avec javascript, il faut quelques lignes de code simples pour l'animer et quelques lignes de CSS pour le styliser.
Kenneth

Bien sûr, il va sans dire que "la discrétion du programmeur est requise". Si cela ne peut pas être fait en CSS, ou si cela n'est pas recommandé en raison d'incompatibilités de navigateur, alors, par tous les moyens, JavaScript doit être préféré. Ma réponse est davantage du côté académique que du côté pragmatique.
Mike Nakis

Question rapide (juste pour cette réponse): IE6 prend-il en charge la même version de JavaScript que les navigateurs modernes? - J'entends par là résumer les informations afin de ne pas avoir à me soucier des "normes" spécifiques au navigateur.
AT

1

Javascript est un langage de script, ce qui signifie qu'il a la capacité d'ajouter de la logique. CSS est utilisé pour décrire l'apparence et le style d'un document. Il a été conçu principalement pour séparer la structure du document de la mise en forme et de la mise en page (présentation).

Vous pouvez utiliser Javascript pour modifier l'apparence d'une page Web, mais comme CSS était destiné à le faire, j'opterais pour CSS pour le style du site et laisserais le reste à Javascript.


Wikipédia:

Utilisation de Javascript:

  • Ouvrir ou faire apparaître une nouvelle fenêtre avec un contrôle programmatique sur la taille, la position et les attributs de la nouvelle fenêtre (par exemple, si les menus, les barres d'outils, etc. sont visibles).
  • Valider les valeurs d'entrée d'un formulaire Web pour vous assurer qu'elles sont acceptables avant d'être soumises au serveur.
  • Changer les images lorsque le curseur de la souris les survole: cet effet est souvent utilisé pour attirer l'attention de l'utilisateur sur les liens importants affichés sous forme d'éléments graphiques.

METTRE À JOUR. Quant au troisième point, le W3C dit concernant CSS:

La :hoverpseudo-classe s'applique alors que l'utilisateur désigne un élément avec un périphérique de pointage, mais ne l'active pas nécessairement. Par exemple, un agent utilisateur visuel pourrait appliquer cette pseudo-classe lorsque le curseur (pointeur de la souris) survole une zone générée par l'élément.


Utilisation CSS:

Avant CSS, presque tous les attributs de présentation des documents HTML étaient contenus dans le balisage HTML; toutes les couleurs de police, les styles d'arrière-plan, les alignements d'éléments, les bordures et les tailles devaient être explicitement décrits, souvent à plusieurs reprises, dans le code HTML. CSS permet aux auteurs de déplacer une grande partie de ces informations vers une feuille de style distincte, ce qui simplifie considérablement le balisage HTML.


1
"Changer les images lorsque le curseur de la souris les survole: cet effet est souvent utilisé pour attirer l'attention de l'utilisateur sur les liens importants affichés sous forme d'éléments graphiques." - N'est-ce pas une fonctionnalité de CSS?
AT

@AT Oui, vous avez raison (+1), et merci d'avoir soulevé cette question. La hoverpseudo-classe a cet objectif. Je citais juste. Édité.
pferor
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.