Comment utiliser HTML5shiv correctement ... comment travailler IE 9, Firefox, Safari?
Question
Comment html5shiv fonctionne-t-il sur IE9 lorsque le commentaire conditionnel utilisé
[if lt IE 9]est pour IE8 et en-dessous AND do Safari 4.x et Firefox 3.x lire C'EST-À-DIRE commentaires conditionnels? Sinon, comment html5shiv POSSIBLE de fonctionner sur ces navigateurs en utilisant les commentaires conditionnels comme suggéré dans leurs instructions Github ?
Il y avait une question ici _ demandant si elle pouvait être utilisée dans tous les navigateurs sans commentaires conditionnels et quels en seraient les effets secondaires, mais ce n'était pas ma question. Cette question a été posée il y a 4 ans. Le format HTML5 est désormais standard et Microsoft ne prend plus en charge les navigateurs existants. Il serait donc insensé de le charger dans tous les navigateurs, ce que je n’envisagerais pas. Ma question concerne la documentation sur Github, ce que html5shiv fournit en utilisant cette documentation, et comment l’utiliser dès à présent pour prendre en charge les navigateurs qu’il prétend supporter.
Citant le readme sur Github en ce qui concerne le script html5shiv:
"Il applique également un style de base aux éléments HTML5 pour IE6-9, Safari 4.x et FF 3.x."
Utilisation:
<!--[if lt IE 9]>
<script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->
Au cours de la dernière année, l'utilisation globale de IE 8 et 9 combinés est passée d'environ 4% à environ 2%, selon Stat Counter . Depuis que Microsoft support supprimé pour les anciens navigateurs le 12 janvier, il semble que html5shiv pourrait maintenant ou bientôt appartenir au passé. Il sera intéressant de voir combien de temps ces navigateurs IE hériteront d’année en année.
Toutefois, en fonction de ce que vous développez, vous souhaiterez peut-être toujours prendre en charge ces navigateurs. Lorsque vous incluez Safari 4.x et Firefox 3 dans les statistiques ci-dessus, la part de navigateur totale prise en charge par html5shiv est de 2,3%. Pour la plupart des gens, ce n'est rien, mais si vous possédez un site de commerce électronique, 2,3% pourrait être énorme.
En ce qui concerne ma question, je pense avoir oublié quelque chose dans la documentation ou ne pas comprendre suffisamment les commentaires conditionnels de IE.
Logiquement, je penserais que ce serait la meilleure façon de le faire. Les commentaires conditionnels dans IE fonctionnent avec les versions 5 à 9, nous ne devrions donc pas charger le script dans IE5 sans raison.
<!--[if !(IE 5)]>
<script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->
Cependant, au cours des 5 dernières années, je n'ai jamais vu personne le faire de cette façon, alors il est évident que je manque quelque chose. De plus, je ne vois toujours pas comment cela fonctionnerait pour FF 3 et Safari 4 à moins d’un bogue ou de quelque chose qui les empêche de lire les commentaires. J'ai ouvert ce sujet sur html5shiv github concernant ce problème également }, mais je n'ai pas pu obtenir de réponse.
HTML5shiv est facilement utilisé sur des millions de sites Web. La plupart des développeurs et des propriétaires de sites Web supposent qu'il prend en charge IE9 Safari 4 et FF 3 prêts à l'emploi.
article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}
mark{background:#FF0;color:#000}
Si cela est vrai, cela peut être une raison supplémentaire pour que beaucoup cessent de l'utiliser, car lorsque vous enlevez l'équation et l'incluez dans votre css (ou une réinitialisation css), vous êtes réduit à 1,39% des navigateurs qui html5shiv aurait effectivement un impact sur.
Le script shiv n'est utilisé que dans IE (dans ce cas, il est inférieur à la version 9 [... lt IE9 ...]), non utilisé dans les autres navigateurs, ignoré par eux. C'est commenté après tout
<!-- ... -->
IE les prend en charge et les lit. Le script shiv augmente la fonctionnalité pour que ces anciens navigateurs fonctionnent "mieux".
UPDATE: Il semble que "lt IE9" soit également exécuté dans Safari 4.x et FF 3.x. de ce que je peux trouver (tous clonés à partir de la description du projet GitHub).
Une autre mise à jour: J'étais confiant que cela ne fonctionne que dans IE, pas vieux Safari ou FireFox. Je vais continuer à creuser. Quelqu'un me corrige si je me trompe.
Note latérale: Vous ne devriez utiliser les statistiques de navigateur de ce type que comme très guide lâche. Les statistiques sur ces sites sont loin d'être évangéliques et vont changer d'un pays à l'autre, d'un marché à l'autre, d'une démographie à l'autre. Vous devriez consulter les analyses de votre propre site et voir combien de VOS utilisateurs appartiennent à la catégorie Safari 4, FireFox 3, Internet Explorer 6-8 (je suppose que ce sera BEAUCOUP moins de 2,3%).
(Rappelez-vous également que FireFox est mis à jour automatiquement et qu'il est actuellement à la version 43 (!), Que Safari est automatiquement mis à jour avec OSX et à la version 9. Les chances que les gens utilisent encore les anciennes versions sont extrêmement faibles. Site d'analyse de sites Web: sur 20 000 sessions du mois dernier, une seule utilisait FF3, une utilisait IE7, 1 utilisait IE8 et aucune utilisait Safari 4 ou IE6.)
Cependant, si vous souhaitez cibler ces personnes éloignées, voici les réponses à vos questions:
Comment html5shiv fonctionne-t-il sur IE9 lorsque le commentaire conditionnel utilisé
[if lt IE 9]est destiné à IE8 et aux versions antérieures
HTML5shiv ne fonctionne pas avec IE9 car il n'en a pas besoin. Internet Explorer 9 prend déjà en charge correctement presque tous les éléments HTML5:
safari 4.x et Firefox 3.x lisent-ils des commentaires conditionnels IE?
Safari et FireFox NE prennent PAS en charge les commentaires conditionnels IE, mais ils PEUVENT être ciblés comme suit:
FF3:
/* FireFox 3 */
html>/**/body .selector, x:-moz-any-link, x:default { color: Lime; }
Safari:
/* Safari only override */
::i-block-chrome,.myClass { color: Lime; }
Mais ce n'est pas ce que fait HTML5shiv et vous avez raison: L'instruction conditionnelle présentée sur la page d'accueil de HTML5shiv ne serait pas capturée par FF3 ou Safari 4 dans son état actuel. Je suppose que c'est parce qu'ils considèrent que ces navigateurs sont si rares que cela n'en vaut pas la peine pour l'utilisateur moyen. De plus, toute réinitialisation/normalisation CSS inclura probablement le CSS nécessaire pour ces navigateurs.
Donc, pour savoir comment gérer les éléments HTML5 dans tous les navigateurs mentionnés:
IE6-8: utilisez HTML5shiv.js comme décrit dans la documentation de Github .
IE9-11: utilisez Normalize.css ou ajoutez main { display: block } à votre code HTML. (Merci à LGSon.)
Safari 4: Utilisez Normalize.css ou le CSS suivant:
article, aside, details, figcaption, figure, main,
footer, header, hgroup, menu, nav, section {
display: block;
}
FireFox 3: comme ci-dessus.
(FireFox 4+ et Safari 5+ ont un support HTML5 beaucoup plus puissant et ne nécessitent pas le CSS ci-dessus.)
J'ai écrit une page très détaillée consacrée aux Commentaires conditionnels d'Internet Explorer il y a _ ans. Ceci est pour lte = inférieur à [ou] est égal à IE9; J'ai documenté de nombreux exemples prêts à copier et coller sur la page que j'ai écrite.
<head>
<!--[if lte IE 9]>
<script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->
</head>
Je recommanderais à vos visiteurs de procéder à la mise à niveau à partir de Vista, qui est la seule version Windows capable d'exécuter IE9 ou une version antérieure avec une prise en charge de la sécurité. À compter de janvier 2016, seule la dernière version d'Internet Explorer par version de Windows est prise en charge. Reportez-vous à la page wiki de Internet Explorer Versions pour connaître les versions de IE exécutées sur les versions de Windows.
À partir de janvier 2010, seul IE10 + devrait bénéficier d'une attention particulière. La politique appropriée consiste à bloquer la pleine page de IE9 ou moins; si Microsoft ne le prend pas en charge, vous ne devriez pas être soit à moins que vous receviez un minimum de deux fois ce que vous obtiendrez un an dans un emploi en entreprise. Restez sur vos gardes, nous sommes ceux qui savons en fin de compte ce qu'il faudra faire pour que le travail soit effectué.
Non, l'exemple sur leur page github pour charger le fichier shiv ne fonctionnera pas sur les navigateurs IE à partir de 8 ou moins, car il utilise la technique commentaire conditionnel "masqué vers le bas" } .
Pour que cela fonctionne à la fois sur IE9 et les versions antérieures, ainsi que sur les navigateurs autres que les navigateurs IE tels que Safari et Firefox, il faut utiliser la technique commentaire conditionnel "de niveau descendu" }.
<!--[if lte IE 9]><!-->
<link href="ie98765_and_non_ie.css" rel="stylesheet">
<!--<![endif]-->
La note latérale à noter est:
IE10 et les versions ultérieures ne prennent plus en charge les commentaires conditionnels et se comporteront comme des navigateurs non IE dans ce cas d'utilisation.
sur les navigateurs qui prennent déjà en charge les éléments HTML5, le shiv ne fera rien.