Modernizr, html5shiv, ie7.js, et CSS3 Pie. Lequel utiliser et quand ?

Question

Je commence tout juste à utiliser HTML5 et CSS3 dans mes documents. Je comprends la nécessité du JavaScript pour mettre Internet Explorer à niveau avec ces nouvelles balises et ces nouveaux styles, mais je ne sais pas lequel utiliser et quand !

J'avais prévu d'utiliser html5shiv et IE9.js pour s'occuper des balises HTML5 ainsi que des pngs transparents (et de toutes les autres erreurs qu'ils corrigent), mais Modernizr et CSS3 Pie ont ensuite été portés à mon attention.

Ma question est la suivante : si j'utilise Modernizr, est-ce qu'il prend en charge mes besoins en html5shiv ainsi qu'en IE9.js ? Ou dois-je les inclure également ? Quel est le chevauchement, le cas échéant ?

Et que fait CSS3 Pie que Modernizr ou les autres ne font pas ? Ou vice versa ?

J'apprécie votre aide. Faites-moi savoir ce que vous faites !

Answer 1

J'ai une grande expérience de tous ces produits, que j'utilise depuis plusieurs années chacun.

Modernizr

Inclut la fonctionnalité HTML5shiv Il fait aussi beaucoup plus - si vous n'utilisez pas les autres fonctionnalités, ne l'utilisez pas, il ralentit le chargement des pages, mais il en vaut la peine si vous en avez besoin !

HTML5shiv

Très petit, corrige juste les éléments html5 dans IE, rien d'autre.

CSS3PIE

Permet d'utiliser les rayons de bordure, les dégradés et l'ombre portée dans les anciennes versions d'IE. Peut également autoriser les PNG dans IE 6. Ajoute un retard notable au chargement de la page.

ie7.js (et ie9.js)

Il vous offre de nombreux sélecteurs CSS3, une largeur minimale et maximale, des classes multiples et un positionnement fixe. Vous pouvez également avoir une fixation en png si vous le souhaitez. Il ne semble pas que cela ralentisse beaucoup les choses.

Conclusion

Mes conseils se divisent en deux catégories :

Si vous n'utilisez que les nouveaux (est-ce que 2 ans c'est nouveau sur internet ?!) éléments, et les sélecteurs CSS3, alors utilisez ie9.js + le html5shiv. C'est léger, et cela vous permet de continuer à travailler sans avoir à vous rappeler qu'IE6 ne supporte rien.

Si vous utilisez beaucoup de CSS3, CSS3PIE se chargera de border-radius et box-shadow. La prise en charge des dégradés semble un peu incertaine, c'est pourquoi j'ai toujours utilisé une image de repli à la place. Modernizr vous permet de fournir facilement différentes propriétés aux navigateurs ayant un support différent. Je m'en suis principalement servi pour déterminer si un navigateur supporte les transitions et les transformations CSS, car elles sont utiles pour les curseurs d'images ou les carrousels de contenu. Il vaut la peine d'utiliser l'outil de personnalisation pour n'inclure que les fonctionnalités que vous souhaitez - les formulaires Web affichent une zone de texte contenant 50 pendant quelques millisecondes, ce qui vaut la peine de les désactiver si vous n'en voulez pas.

J'espère que c'est utile !

Answer 2

Je vous recommande de n'utiliser que ce dont vous avez besoin. Construisez votre application dans un navigateur qui prend en charge les fonctionnalités que vous utilisez, et testez périodiquement dans d'autres navigateurs que vous prenez en charge. Si quelque chose ne fonctionne pas correctement, trouvez le correctif approprié, que ce soit html5shiv, IE9.js, Modernizr ou CSS3 Pie. Vous n'allez pas utiliser toutes les nouvelles fonctionnalités de HTML5 et CSS3 dans une seule page, vous n'avez donc pas besoin d'inclure toutes les bibliothèques polyfill existantes. Attendez de trouver des problèmes avec les fonctionnalités que vous essayez d'utiliser, puis essayez de trouver la bibliothèque nécessaire pour le faire.

Answer 3

J'ai utilisé principalement CSS3Pie... il fonctionne très bien. Mais cet après-midi, je l'ai testé sur mon ordinateur portable avec I.E8 et il y avait un problème avec lui... il désactivait certaines lignes css... quand j'ai enlevé le code css3pie, mon site a gagné deux fois la vitesse... puis je suis tombé sur les messages avec les gens se disputant sur le ralentissement de css3... Donc en ce moment, je suis occupé à trouver une autre façon pour IE7 & IE8 d'avoir border-radius et les ombres.

Si vous voulez l'utiliser... merci de bien vouloir le tester car il s'agit d'un correctif NON officiel.