Comment activer les fonctionnalités CSS3 dans Internet Explorer 6, 7 et 8?

18

Alors qu'IE9 semble très prometteur, IE6, IE7 et IE8 nous hanteront probablement pendant de nombreuses années à venir, ralentissant la propagation de CSS3 sur le Web.

Un certain nombre de projets basés sur HTC et JS ajoutent un support CSS3 à IE:

  • CSS3PIE
  • IE7.js
  • eCSStender
  • DD_roundies
  • border-radius.htc (coin incurvé)
  • ie-css3.htc
  • ie-css3.js

Je n'ai qu'une expérience avec CSS3PIE (faire les trucs arrondis sur http://docs.composite.net/ ) et à l'exception des effets de souris, cela fonctionne bien et est pur CSS3.

Quelles fonctionnalités CSS3 les différents projets apportent-ils à IE et dans quelle mesure? L'un d'entre eux est-il clairement gagnant?

css3 internet-explorer-6 mawtex
la source
1
Pourquoi ne pas les essayer tous et nous faire savoir ce que vous trouvez? Si vous avez un blog, ce serait un excellent article qui susciterait beaucoup d'intérêt, j'en suis sûr.
John Conde
J'ai trouvé cela sur le site CSS3PIE css3pie.com/documentation/product-comparison mais je m'attendrais à ce qu'il soit biaisé, d'où la question. Il faut un peu d'expérience du monde réel pour se sentir bien.
mawtex

Réponses:

8

Puisque personne n'a encore pris la parole, je vais essayer de donner une réponse à cela. Il provient principalement de la lecture de http://css3pie.com/documentation/product-comparison/ et de la recherche sur Google. Je n'ai qu'une expérience pratique avec CSS3PIE. Si vous connaissez l'un des autres projets, n'hésitez pas à le modifier

CSS3PIE par Jason Johnston Ajoute une bonne prise en charge pour Css3 border-radius, dégradés, box-shadow. D'après mon expérience, cela fonctionne assez bien et a un grand support pour border-radius. Problématique pour les effets de survol (je m'attendrais à ce que tous les éléments de cette liste en souffrent) mais semblent impeccables lorsqu'ils sont utilisés sur du HTML statique. Plus d'informations sur http://css3pie.com/

ie-css3.js par Keith Clark Ajoute la prise en charge de nombreux sélecteurs de pseudo-classe CSS3. Est extrêmement petit car il se régale des autres bibliothèques js que vous incluez, comme jQuery. Cela pourrait bien fonctionner avec d'autres projets de cette liste comme CSS3PIE. Plus d'informations sur http://www.keithclark.co.uk/labs/ie-css3/
MISE À JOUR Le projet ie-css.js est né de nouveau ici: http://selectivizr.com/

IE9.js par Dean Edwards Works pour IE6, 7 et 8. Rendre le support IE transparent PNG, les nouveaux sélecteurs CSS comme parent> enfant et: premier du type, positionnement fixe, support largeur / hauteur max / min. J'ai l'impression que beaucoup de travail y a été consacré au fil des ans. Certaines critiques sont vraiment positives, d'autres dédaigneuses. Plus d'informations sur http://code.google.com/p/ie7-js/

ecsstender par Aaron Gustafson Fonctionne avec IE6, 7 et 8. D'une manière modulaire ajoute la prise en charge des sélecteurs CSS3, font-face, border-radius, box-shadow, couleurs et transformations. Très bien documenté. Plus d'informations sur http://ecsstender.org/extensions

DD_roundies par Drew Diller Ajoute un support pour border-radius et png. Plus d'informations sur http://www.dillerdesign.com/experiment/DD_roundies/

border-radius.htc par Remiz Rahnas Prise en charge très simple de border-radius. Plus d'informations sur http://code.google.com/p/curved-corner/

ie-css3.htc par Nick Fetchak Certains support pour border-radius et text-shadow. CSS3PIE prétend faire mieux le border-radius. Plus d'informations sur http://www.fetchak.com/ie-css3/

mawtex
la source
3

Voici un bel article concernant CSS3 et IE6, de Smashing Magazine: http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/

Alex
la source
3
Cet article est une excellente introduction à "border-radius.htc", mais pour la plupart, il s'agit d'une liste de filtres CSS uniquement IE qui peuvent imiter les fonctionnalités CSS3. En tant que développeur Web, je voudrais ne pas écrire beaucoup de vieux code CSS spécifique à IE, mais me concentrer sur les CSS standard et faire réagir IE à cela, comme "border-radius.htc" et "CSS3PIE".
mawtex
0

Essayez Google Chrome Frame . Les utilisateurs d'IE qui l'installent pourront parcourir votre site dans le moteur de rendu de Google Chrome sans changer de navigateur.

EDIT: Vous pouvez même utiliser une bibliothèque JS fournie par Google pour afficher un message aux utilisateurs les invitant à installer Google Chrome Frame. Il s'agit d'une installation en un clic, comme Flash, ne nécessite pas de redémarrer le navigateur et actualise votre page une fois terminée.

Dan Fabulich
la source
Donc, votre suggestion est essentiellement de toucher d'une manière ou d'une autre toutes les personnes qui vont visiter le site de l'affiche de la question à l'avenir avec IE6 / 7/8 et les inciter à installer Google Chrome Frame avant leur visite? ne serait-il pas plus facile de faire en sorte que tous les utilisateurs d'IE dans le monde passent à Chrome à la place?
Nir
@Nir J'ai édité pour expliquer comment vous pouvez inciter vos utilisateurs à installer GCF en utilisant la bibliothèque JS de Google. C'est assez sympa.
Dan Fabulich
même avec des installations en un clic (BTW, sur Vista, vous devez Ok 5 avertissements de sécurité pour installer Flash - tant pis pour un seul clic) Je ne rêverais pas de demander à mes utilisateurs d'installer un plugin de navigateur juste pour pouvoir utiliser des coins arrondis (et Je soupçonne que les seuls qui installeront sont ceux qui font vraiment confiance et aiment mon produit - c'est-à-dire ceux qui achèteront même sans les coins arrondis).
Nir