zzzombie

En cherchant si IE 8 allait enfin supporter les bords arondis en CSS, je suis tombé sur un article du blog de la superbe IE Team.
http://blogs.msdn.com/ie/archive/2005/06/23/431980.aspx
J’adore l’argument justifiant le non support des coins arrondis en CSS : c’est du CSS3 les mecs ! Même à la période où été rédigé le post sur le blog d’IE, une solution était déjà en place depuis longtemps : les éditeurs de navigateurs implémentent leurs fonctionnalités expérimentales mais utiles avec -identifiant (-moz pour Gecko, -webkit pour Webkit, -opera pour Opéra) ce qui rend très bien.
Mais soyons un peu foufous et admettons l’argument de MS. La IE team nous propose une solution “simple et efficace” pour créer des coins arrondis avec IE.
Et là franchement c’est drôle.

On nous propose deux techniques :
La première consiste à faire 2 ou 4 gifs. Dans le premier cas, inutile de compter faire des liquid layouts, c’est largeur fixe ou rien.
Une variante consiste à faire 4 gifs. Beaucoup plus évolutif, surtout sans anti-aliasing : c’est moche mais ça passe sur n’importe quel fond. Wahouu.
Et comment insère-t-on ces gifs dans le HTML ? Avec un tableau et des balises img bien sûr ! Ou comment pourrir le code et faire 4 requêtes serveur pour rien.

La seconde technique utilise… les CSS !
“Best of all, the nested DIV elements solution doesn’t rely on tables at all.”
Ce qui est génial, c’est que cette déclaration est immédiatement suivie de la CSS qui commence par

   td { background-color: #FFFFFF; }
   td img { display: block; }

Et aucune trace dans le code HTML qui suit d’un tag TD ou d’un tag IMG. Pas mal.
Mais surtout, voici le résultat. De gauche à droite : Firefox 3.1b1, Webkit nightly et IE6 sous CrossOver 7.1.

Donc la IE Team considérait qu’il vallait mieux ne pas implémenter des fonctionnalités de CSS 3 - probablement à cause de leur fanatisme bien connu des standards - et propose aux développeurs de se prendre la tête à faire des découpes d’images qu’il faudra faire pour chaque coin arrondi sur un fond de couleur différente, pour chaque arrondi de taille différente, et le plus beau de tout… sans anti-aliasing.
Et bien sûr, leur solution ne fonctionne “correctement” que sous IE - sans doute parce qu’il est le plus respectueux des standards, la preuve : ils ne font pas n’importe quoi avec CSS 3.

En conclusion : la IE Team se fiche complètement des développeurs et MSDN est une base inestimable pour se former à mal coder.

Et bien entendu, rien n’a changé depuis cette époque : on sait que SVG ne sera toujours pas suporté par IE8, on a vu les arguments tout aussi lamentables de la IE Team que dans l’exemple qui précède.

Personellement j’ai fait mon choix depuis quelques temps : je ne m’occupe plus de IE.
Il n’y a aucune raison valable de s’en occuper, du reste : pourquoi dépenser du temps à combler les lacunes d’un produit minable technologiquement, quand vous pouvez le consacrer aux choses qui font votre force ?

Si toutefois vous n’êtes pas aussi radicaux ni prêts à montrer aux utilisateurs d’IE ce que vaut réellement leur navigateur, vous pouvez utiliser une alternative : vous simplifier le boulot, garder un code propre et en contrepartie avoir une version pour IE plus lourde.
Vous pouvez utiliser les tests conditionnels d’IE pour inclure IE8.js et utiliser jQuery (par exemple) pour améliorer le rendu de IE et supporter ainsi les bords arrondis (http://www.methvin.com/jquery/jq-corner-demo.html), et même des choses plus poussées comme des dégradés.
Bien sûr l’affichage sera moins agréable (car les changements seront appliqués après que le DOM soit prêt, parce que la page sera plus lourde…) mais après tout, vous n’êtes ni responsables de ce que fait IE, ni du browser que les visiteurs installent.

Quelques liens pour finir :
http://www.bioneural.net/2008/02/06/the-best-way-to-do-corners-and-gradients/
http://brandonaaron.net/jquery/plugins/gradient/docs/
http://www.bennadel.com/index.cfm?dax=blog:1014.view