Ombrages et arrondies avec CSS3 pour IE6, IE7 et IE8

CSS3 approved for IE

CSS3 n’est pas encore supporté par Internet Explorer 8, il faudra attendre Internet Explorer 9. Espérons que cette fois la firme de Redmond ne nous décevra pas. Cependant, comme je l’avais expliqué dans un billet précédent billet concernant la compatibilité des arrondies en CSS pour les différents navigateurs, pour certaines des fonctionnalités, il existe des alternatives, ou plutôt des hasks. On a évoqué l’existence d’un fichier .htc, qui permettait de rendre compatible les arrondies avec CSS3.

Ce script a été développé par Remiz Rahnas et vous pouvez le télécharger ici border-radius.htc.

Le rôle de ce script est de faire la conversion du CSS3 vers un langage spécique à Windows le VML(Vector Markup Language). Ce langage permet de faire de nombreux effets visuels à intégrer dans une page HTML. Mais il n’est pas considéré comme un standard et de ce fait, seul Internet Explorer le supporte.

Il existe une version modé du script border-raduis, qui supporte également les effets d’ombres sur les boites et le texte. Vous le trouverez ici : ie-css3.htc et le résultat devrait ressembler à ceci :

Je suis du CSS3 compatible Internet Explorer 6+

A l’utilisation, c’est exactement la même implémentation que le précédent script. Pour s’assurer la compatibilité avec IE8, il faut toujours s’assurer que le div conteneur ait les propriétés position: relative; z-index 0;, et le tour est joué :

.box {
  -moz-border-radius: 15px; /* Firefox */
  -webkit-border-radius: 15px; /* Safari et Chrome */
  border-radius: 15px; /* Opera 10.5+, norme CSS3 */
 
  -moz-box-shadow: 10px 10px 20px #000; /* Firefox */
  -webkit-box-shadow: 10px 10px 20px #000; /* Safari et Chrome */
  box-shadow: 10px 10px 20px #000; /* Opera 10.5+, norme CSS3 */
 
  /* Appel du script htc pour la compatibilité avec Internet Explorer */
  behavior: url(ie-css3.htc); 
}

source : http://www.fetchak.com/ie-css3/

Articles similaires :

Mots-clefs : , , , ,

3 commentaires sur “Ombrages et arrondies avec CSS3 pour IE6, IE7 et IE8”

  1. nourcy dit :

    C’est un peu l’embrouille, pcq j’utilise http://www.keithclark.co.uk/labs/ie-css3/ pour la compatibilité browser notamment le nth-child qui sauve la vie et il porte le même nom…

    Enfin bref ça à l’air sympa.

    Pour ma part, pour les radius j’utilise http://css3pie.com/ qui fait le border-radius, le box-shadow et le linear-gradient

    A tester :)

  2. jdpro dit :

    merci pour le script il fonctionne a merveille, ie_css3.htc

  3. Alzheimer dit :

    IE9 est sorti depuis un bout de temps, mais toujours à la grosse bourg !
    FF, NS, Safari, GC… sont compatibles avec mon site, mais bien évidemment pas IE :’(

Laisser une réponse