<div> arrondies en CSS compatibles IE

Posté par seiyar81 le 18 janvier 2010 | Laisser un commentaire (1)

Un problème qui revient souvent pour les développeurs Web : écrire un code CSS compatible avec tous les navigateurs. Enfin quand on dit tous ça sous-entend bien évidemment Internet Explorer et sa gestion foireuse du CSS3…

De plus en cette période où le Web est “2.0”, on aime bien mettre des arrondis partout.
Un problème se pose toutefois : comment éviter d’utiliser des images ? Sous Firefox/Gecko on possède la propriété -moz-border-radius, sous Webkit(Safari, Chrome etc…) -webkit-border-radius, sous KHTML(Konqueror) -khtml-border-radius, sous Opera une propriété sera disponible sous Presto 2.3 (actuellement 2.2), et sous IE : rien.

Malheureusement, la solution proposée ci dessous n’est pas compatible avec Opera, cependant, comme indiqué plus haut la nouvelle version de Presto, qui devrait arriver courant 2010, va arranger cela.

Le problème concerne donc IE, et Microsoft pour palier aux manques de son navigateurs a créé en 1998 les fichiers HTC. Mélange d’HTML et de balises HTA, les fichiers HTC peuvent contenir du code JScript ou VBScript. Ils disposent également de fonctionnalités comme la possibilité de permettre à IE d’afficher la couche alpha des images PNG (via AlphaImageLoader), ou d’appliquer un comportement :hover sur d’autres balises que <a>.

Le code suivant utilise justement un fichier HTC via la propriété behavior :

-moz-border-radius: 5px; 
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
behavior:url('./border-radius.htc');

Vous pouvez télécharger le fichier HTC à cette adresse.
Sachez toutefois que ce code n’est pas conforme aux normes CSS3 établies par le W3C, néanmoins il permet de combler certains manques sur IE.

Catégorie: Développement Web | Laisser un commentaire (1)


Un commentaire pour “<div> arrondies en CSS compatibles IE”

  • I have just got a blog and use about 50 different plugins. Thank you very much for your plugin. It complete my website

Laissez un commentaire