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

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?

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.

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. **

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.

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.

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.