Utilisation de commentaires conditionnels en HTML

Question

Je suis relativement nouveau dans le développement Web et j'apprends tout le temps. J'ai récemment rencontré des «commentaires conditionnels» lors de la visualisation du code source de différents sites Web. Je pense que je comprends maintenant ce qu’ils font, mais je ne sais pas quand les utiliser.

Je les ai principalement utilisées pour implémenter différentes feuilles de style en matière d’IE et je voudrais savoir si c’est une bonne pratique?

Dans ce cas, si la réponse est "Oui". Ensuite, lors du développement d’un site, il est «commun d’utiliser» deux feuilles de style distinctes pour corriger les bugs, par exemple, créer une feuille de style pour IE et une pour Firefox, Opera, etc.?

Merci d'avance.

Answer 1

Pour autant que je sache, les commentaires conditionnels ne sont pris en charge que par IE, et ils rétrogradent gracieusement dans les navigateurs qui ne les prennent pas en charge (car ils ressemblent à un commentaire normal). L’opinion générale est qu’il est acceptable d’utiliser une fonctionnalité de navigateur non standard si vous l’utilisez pour lutter contre une autre fonctionnalité de navigateur non standard. (c’est-à-dire le support de merde pour CSS dans IE). Vous constaterez donc que c'est une solution très courante pour peaufiner CSS.

Answer 2

Nature d'Internet Explorer (version 6 en particulier ) fait en sorte que certaines feuilles de style fonctionnent bien avec IE, et d'autres non. Pour les besoins de ceux qui ne le font pas, vous pouvez utiliser des commentaires conditionnels pour que le code CSS ne s'affiche que pour IE. Je dois l’utiliser à cause de la manière dont Internet Explorer (mis) gère les menus déroulants CSS.

Pour que le site Web sur lequel je travaille soit correctement rendu la fonction survol du menu déroulant, je dois implémenter le fichier crosshover.htc. Voici le code que je dois utiliser:

     <!--[if IE]>
<style type="text/css" media="screen">
#menu ul li {float: left; width: 100%;}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {
behavior: url(http://www.stannscatholicschool.com/csshover.htc);
font-size: 100%;
}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}

#menu a, #menu h2 {
font: 100% verdana, tahoma, helvetica, arial, sans-serif;
}

</style>
<![endif]-->

Si je ne le fais pas, le menu déroulant se sépare et vous ne pouvez pas naviguer dans Internet Explorer 6.

Answer 3

J'ai utilisé des commentaires conditionnels pour détecter si les visiteurs de mon site utilisent IE6 ou une version antérieure. Si tel est le cas, je charge le script IE7.js , qui résout certains des bugs dans ces anciens navigateurs. Il existe également un script pour émuler le support IE8.

Answer 4

Certaines personnes utilisent également les commentaires pour décrire certaines zones de la page, par exemple un pied de page, un en-tête ou le contenu principal (souvent dans des modèles).

Toutefois, si vous utilisez des divs et des CSS (ce qui semble être votre cas), vous devriez pouvoir savoir quel est le contenu ou quelle zone du code HTML dans lequel vous vous trouvez à l'aide des identifiants DIV et des styles CSS. N'oubliez pas d'utiliser des noms clairs et essayez de ne pas les abréger simplement pour faciliter la frappe.

Si cela vous pose un problème, alors Intellisense est une chose merveilleuse qui peut nous aider à éviter ce genre de choses. Sinon, CTRL + C et CTRL + V sont probablement la meilleure solution:)

Answer 5

C’est une bonne pratique! La page de documentation officielle sur les commentaires conditionnels contient de nombreux exemples et combinaisons de commentaires conditionnels, ça vaut la peine de le lire. La page indique également que:

Les commentaires conditionnels permettent aux développeurs de tirer facilement parti des fonctionnalités améliorées offertes par Microsoft Internet Explorer 5 et versions ultérieures, tout en écrivant des pages qui se dégradent normalement dans des navigateurs peu performants ou s'affichent correctement dans des navigateurs autres que Windows Internet Explorer. Les commentaires conditionnels constituent le moyen privilégié de différenciation des règles CSS (Cascading Style Sheets) destinées à des versions spécifiques d’Internet Explorer.

De nos jours, Internet Explorer est le navigateur le moins performant . Par conséquent, vous utiliserez probablement des commentaires conditionnels pour faire exactement l'inverse, c'est-à-dire tirer parti des fonctionnalités améliorées offertes par tous les autres. les navigateurs, tout en écrivant des pages qui rétrogradent gracieusement dans Microsoft Internet Explorer.

Vous pouvez utiliser des commentaires conditionnels pour corriger les styles CSS non pris en charge ou pour masquer le code dans Internet Explorer, comme suit:

<!--[if !IE]>-->
<script src="IE_will_never_see_this.js" type="text/javascript" charset="utf-8" ></script>
<!--<![endif]-->