[Webdesign] IE-CSS, un support CSS3 basique pour IE 6-7-8

Les navigateurs modernes supportent tous CSS3 et ses propriétés étendues qui permettent d’obtenir de jolies sites web sans trop d’effort.

Tous, sauf bien entendu Internet Explorer !

Mais ce n’est pas très grave, puisque il existe un certain nombre de solutions pour ajouter le support CSS3. La plupart consiste en l’ajout d’un script JS.

IE-CSS3 est un script (un fichier .htc) qui peut être utilisé directement dans vos feuilles de styles CSS3, pour ajouter des « comportements » (en utilisant par exemple behavior: url(ie-css3.htc); pour les connaisseurs).

Il ajoute seulement quelques effets disponible en CSS3, parmi les plus essentiels :

border-radius
box-shadow

text-shadow

Ce petit bout de script redéfini simplement ces 3 propriétés et les traite en utilisant le moteur VML de dessin vectoriel, présent dans IE.

Par exemple pour définir un contour arrondi et ombré :

.box {
  -moz-border-radius: 15px; /* Firefox */
  -webkit-border-radius: 15px; /* Safari and Chrome */
  border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */

  -moz-box-shadow: 10px 10px 20px #000; /* Firefox */
  -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
  box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */

  behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */
}

Très simple.

Une bonne solution très légère (bien que limitée) qui trouvera sa place chez ceux qui souhaite allier beauté et performance, y compris avec IE 6, 7 et 8.

Téléchargez IE-CSS3 (11.9 Ko)