Cerise sur le gâteau, il est possible de basculer vers les modes d’affichage des anciennes versions IE5, IE7 et IE8. Ce qui devrait permettre de tester ses pages web beaucoup plus rapidement, sous réserve que le IE5 Document Mode affiche bien les pages comme le fait IE6 !

Quelques plantages, mais je dois avouer que la mémoire de mon PC était pleine comme un oeuf lors de mes tests, ceci expliquant (espérons-le) cela…

Comme on peut le voir, ce blog s’affiche correctement dans cette preview d’Internet Explorer 9 : pourvu que ça dure !

css 4 design vu par Internet Explorer Platform Preview. Cliquez pour agrandir l'image.

Les outils pour développeurs de cette preview ne rivaliseront pas avec  Firebug, mais offrent un environnement de débuggage fonctionnel et assez réactif.

Sélection d'un paragraphe à l'intérieur d'un élément de liste avec les outils pour développeurs de IE9

Lire MIX10 : Internet Explorer 9 se dévoile en preview pour plus d’information.

Comment utiliser les hacks CSS ?

Dans l’article Un seul fichier CSS pour cibler IE6 et IE7 avec les commentaires conditionnels, j’utilisais un commentaire conditionnel pour cibler les versions inférieures ou égales à IE7. Toutefois, IE9 est sur les rails et il est temps de le prendre en compte, d’autant plus que Microsoft veut en faire un champion des standards du web en terme de rendu CSS3 et HTML5.

L’idée derrière la feuille de style unique pour IE est de ne pas augmenter inutilement le nombre de requêtes pour charger une CSS pour chaque version d’Internet Explorer. En attendant de voir ce que nous réserve IE9, j’ai décidé de cibler les versions inférieures ou égales à IE8 en espérant que IE9 tienne ses promesses et en attendant de voir s’il va continuer à gérer les commentaires conditionnels (auquel cas nous pourrions cibler les version inférieures à IE9).

Cibler les versions <= à IE8

<!--[if lte IE 8]>
    <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen,projection" />
<![endif]-->

Note : il existe une forme de commentaires conditionnels qui permet de cibler tous les navigateurs sauf Internet Explorer : <!--[if !IE]> <!--> IE Windows ne lira pas ça <!--> <![endif]-->

Dans cette feuille de style ie.css, si IE6 (et seulement lui) ne se comporte pas comme prévu devant #header { margin-top: 0; }, il suffira d’y ajouter * html #header { margin-top: -5px; } pour régler le problème. Si le problème concerne IE6 et IE7 et que IE8 se comporte de manière standard (c’est à dire que la règle située dans style.css suffit), il faudra utiliser les hacks de la manière suivante :

* html #search .submit { margin-top: -10px; } // IE6
*+html #search .submit { margin-top: -14px; } // IE7

#search .submit { margin-top: -7px; }         //Toutes les versions d'IE
* html #search .submit { margin-top: -10px; } // Surcharge pour IE6 seulement
*+html #search .submit { margin-top: -14px; } // Surcharge pour IE7 seulement

Mettez vos frameworks CSS à jour

Les frameworks CSS proposent souvent une feuille de style spécifique à Internet Explorer. Le plus souvent, le hack utilisé pour cibler IE7 est de la forme html>body qui n’est pas pris en charge par IE6. Or, si l’on cible les versions <= à IE8, ce hack est obsolète puisqu’il est compris par IE8. Pour y remédier, j’utilise *+html qui n’est compris que par IE7.

Ainsi, dans le fichier ie.css de Blueprint, il sera nécessaire de modifier la ligne html>body p code { white-space: normal; } par +html p code { *white-space: normal; } pour éviter que IE8 ne s’emmêle les pinceaux ;)

22 hacks CSS à consommer avec modération

Cette liste de 22 contournements a été compilée par Paul Irish. Elle présente le double intérêt de la quasi-exhausitivité et de distinguer les hacks jouant sur les sélecteurs de ceux qui concernent les attributs.

Hacks sur les sélecteurs

1. IE6 et inférieurs

   * html .test  { color: red }

2. IE7

   *:first-child+html .test { color: red }

3. IE7, Firefox, Safari, Opera

   html>body .test { color: red }

4. IE8, Firefox, Safari, Opera (Tout sauf IE 6,7)

   html>/**/body .test { color: red }

5. Opera 9.27 et inférieurs, Safari 2

   html:first-child .test { color: red }

6. Safari 2 — 3

   html[xmlns*=""] body:last-child .test { color: red }

7. safari 3+, Chrome 1+, Opera9+, Firefox 3.5+

   body:nth-of-type(1) .test { color: red }

8. Safari 3+, Chrome 1+, Opera9+, Firefox 3.5+

   body:first-of-type .test { color: red }

9. Safaris 3+, Chrome1+

      @media screen and (-webkit-min-device-pixel-ratio:0) {
               .test  { color: red }
       }

10. iPhone / Webkit mobile

       @media screen and (max-device-width: 480px) {
                .test { color: red }
        }

11. Safari 2 — 3.1

    html[xmlns*=""]:root .test  { color: red }

12. Safari 2 — 3.1, Opera 9.25

    *|html[xmlns*=""] .test { color: red }

13. Tout sauf IE6 — 8

    :root *> .test { color: red  }

14. IE7

    *+html .test { color: red }

15. Uniquement Firefox. 1+

    .test,  x:-moz-any-link  { color: red }

16. Firefox 3.0+

    .test,  x:-moz-any-link, x:default  { color: red }

Hacks sur les attributs

1. IE6

   .test { _color: blue }

2. IE6, IE7

   .test { *color: blue /* or #color: blue */ }

3. Tout sauf IE6

   .test { color/**/: blue }

4. IE6, IE7, IE8

   .test { color: blue\9 }

5. IE7, IE8

   .test { color/*\**/: blue\9 }

6. IE6, IE7 — fonctionne comme !important

   .test { color: blue !ie } /* la chaine après ! peut être n'importe quoi */

• The weird and wonderful world of Internet Explorer
• How To Attack An Internet Explorer (Win) Display Bug
• The IE/Win Disappearing List-Background Bug
• IE6 Duplicate Characters Bug
• How to resolve browser compatibility issues while working with JavaScript, AJAX and XML
• Double-Margin Bug, Float-Width Bug, Pixel Gap Bug
• CSS Min-Height Bug
• IE White-Space Bug
• Cross Browser Compatible CSS Opacity
• Clearing floated images in body text
• Firefox CSS Magic

Il est bien évident que la question de pose différemment selon que l’on utilise un Mac ou un PC et dans ce dernier cas, c’est encore différent selon que l’on utilise Windows XP, Vista ou Seven. Si vous êtes sous Linux, ma foi, vous devriez être capable de vous en sortir tout(e) seul(e), non ? ^_^v

Installer «Test Drive» (IE9 preview) sur Vista

Note du 16/03/2010 — Microsoft vient de lancer Test Drive pour mettre la version preview d’Internet Explorer 9 en téléchargement. Cette version propose de basculer vers les models de document de IE5, IE7 et IE8 (et bien sûr IE9 par défaut). Ce qui devrait permettre de tester ses pages web beaucoup plus rapidement, sous réserve que le IE5 document mode affiche les pages comme le fait IE6 !

Machine Virtuelle avec Windows XP et IE6

Si comme moi vous utilisez Windows Vista, vous rencontrez peut-être des difficultés pour travailler avec IE6 dans de bonnes conditions. La virtualisation avec Virtual PC ou VirtualBox et l’image disque proposée gratuitement par Microsoft regroupe une version de Windows XP et Internet Explorer 6 et offre un environnement de travail opérationnel.

Une fois l’installation et le paramétrage de la connexion internet de Windows XP effectués, vous pouvez tester votre site sous IE6. Mais c’est très gourmand en ressources et la séance de test se transforme vite en cauchemar à moins d’avoir 4 go de ram et deux écrans (j’ai souvent Photoshop et/ou Illustrator ouverts sans compter les autres logiciels…).

Si votre configuration tient la route, cette solution présente l’avantage de vous permettre de tester votre site avec une vraie version d’IE6, Javascript et commentaires conditionnels en ordre de marche, ce qui n’est pas forcément le cas pour toutes les solutions présentées plus bas.

Quelques conseils pour l’installationde Virtual PC chez xuxu et Comment ça marche.

Logiciels pour tester votre site sous IE

A coté de la virtualisation, il existe des solutions logicielles pour tester son site avec plusieurs navigateurs :

• Si vous êtes sous Windows XP avec IE6, vous pouvez utiliser IE7_standalone pour tester sous IE7. Si vous avez déjà IE7, utilisez Multiple IE pour tester dans IE6 et les versions précédentes. Si vous êtes passé sous Vista, vous pouvez tester IE6 for Vista en version alpha. A noter qu’en désinstallant IE7 sur Windows XP, on retrouve une bonne vieille version d’IE6.
• Dans le même esprit, il existe Internet Explorer Collection qui contient pratiquement toutes les versions d’Internet Explorer : d’IE 1.0 à IE 8.0 ! (Merci à Deloo).
• Si vous utilisez IE8, vous pouvez basculer le moteur de rendu graphique et Javascript dans le mode IE7 ou encore le mode Quirks (IE5) déclenché par IE8 en l’absence de Doctype. Pour cela, rendez-vous dans les outils pour développeurs. Ces outils sont une tentative bienvenue de la part de Microsoft pour offrir des outils de débuggage comme Firebug pour Firefox. Plus d’information sur la prise en charges des CSS, Javascript et documentMode dans IE8.
• IE Tab est une extension Firefox qui utilise le moteur de rendu d’Internet Explorer (IE7 ?) dans un onglet Firefox. C’est surtout utile lorsqu’un site vous annonce qu’il n’est pas compatible avec votre navigateur préféré. Le rendu ressemble vaguement à IE7 mais avec des variantes, notamment en ce qui concerne les comportements Javascript.

IETester

Pas convaincu par les logiciels précédents ? Installez donc IETester qui vous permettra de tester votre site avec la majorité des versions d’Internet Explorer. Toujours en version Alpha, la v0.42 propose des options pour développeurs comme l »activation ou la désactivation du Javascript.

IETester est un peu instable, mais relativement confortable pour des séances courtes.

Tester votre site dans IE5.5, IE6, IE7, IE8 avec IETester. Cliquez pour agrandir l'image.

La communauté autour de IETester semble assez active et vous trouverez de  l’aide sur le forum.

Captures d’écran en ligne

Si les solutions précédentes ne vous conviennent pas, vous pouvez vous tournez vers les services en ligne pour obtenir des captures d’écran sous différentes combinaisons de navigateurs et de systèmes d’exploitation :

• BrowserShots — Pratiquement tous les navigateurs sur la plupart des systèmes d’exploitation,
• BrowsrCamp — Capture d’écran sous Mac OS X,
• Scapture — Capture d’écran sous Linux,
• Netrenderer — de IE5.5 à IE8,
• lynxview — Tester votre site sous Lynx (N’oubliez pas de créer le fichier delorie.htm à la racine de votre site pour que ça fonctionne),
• Browsera — Service payant permettant de tester l’ensemble d’un site (à partir de 29$/mois).
• browsercam — Un autre service payant pour tester sur plus de 400 combinaisons de navigateurs/OS  (à partir de 39.95$/mois pour 3 mois ou 19.95$ pour la journée)

Browser Sandbox

Browser Sandbox est un bac à sable pour navigateurs à mi-chemin entre les solutions logicielles et la virtualisation via une extension pour Firefox ou un plugin (.exe) pour Internet Explorer.

Le résultat s’affiche sous la forme d’une instance du navigateur que vous avez choisi parmi IE8, IE7, IE6, Firefox 3.5, Firefox 3, Firefox 2; Apple Safari 4 et 3, Google Chrome ou encore Opera 9 et 10 pour finir.

A noter qu’à l’instar d’IETester, l’affichage des polices de caractère n’est pas identique au vrai IE6 et bénéficie plutôt du rendu de la version d’Internet Explorer installée sur votre système.

Browser Sandbox fonctionne bien malgré des plantages inopinés qui surviennent de temps à autre.

Affichage du site dans dans Internet Explorer 6 avec Browser Sandbox de Spoon. Cliquez pour agrandir l'image.

NetBook ou Portables

La solution qui a ma préférence, c’est le NetBook sous Windows XP et IE6. C’est presque trop beau pour être vrai : pour moins de 300€ on s’offre la même configuration que les moins bien lotis de nos visiteurs : faible résolution d’écran, petit processeur et navigateur obsolète… le rêve, je vous dis !

Depuis que j’ai eu l’occasion d’admirer mon blog dans la résolution moyenne de ces Netbook (1024 par 600), je fais en sorte d’avoir du texte à lire dans cette zone en dehors du logo et de la baseline.

Essayez, et vous serez surpris par le nombre de sites ou de blogs qui ne proposent rien à lire dans cette zone primordiale des 500 premiers pixels (oui, il faut retrancher quelques précieux pixels occupés par les barres d’adresse et d’outils de votre navigateur).

Des modèles comme le Asus EeePC 1005HA ou 1008HA, le Samsung N140 ou encore le HP Compaq Mini 311c sous Windows XP sont de bons candidats. Tout autre portable sous Windows XP fera bien entendu l’affaire.

Adobe Browserlab

Oui, mais voilà, vous voudriez également savoir à quoi ressemble votre site chez le Mac Addict qui ne jure que par Mac OS X. Dans ce cas-là Browserlab est fait pour vous. Non seulement il vous permettra de tester votre site sous Firefox et Safari pour Mac OS X, mais en prime vous aurez la possibilité de voir ce que ça donne dans IE6 et IE7 pour Windows de manière à la fois fluide et rapide.

L’affichage des capture est assez rapide et il est possible de comparer plusieurs versions.

Comparer son site : IE6 sous Windows et Safari 3.0 sous Mac OS X. Cliquez pour agrandir l'image.

Internet mobile

Avec des chiffres estimés à plusieurs millions d’utilisateurs, il est important de vérifier que son site web s’affiche correctement sur les petits écrans des périphériques mobiles.

Plus d’information sur MobiReady dans l’article Votre blog sur un téléphone portable, really ready ?

N’oubliez pas de proposer un menu skip links à vos visiteurs mobiles !

Testez votre site web dans plusieurs téléphones portables avec Mobi Ready. Cliquer pour agrandir l'image.

Pour conclure

Cet article fait rapidement le tour des solutions que j’ai eu l’occasion de tester de manière plus ou moins approfondie pour tester mes pages web avec IE6, sachant que j’utilise Vista au quotidien. Si dans votre environnement professionnel les pages web doivent s’afficher correctement partout, il vaut mieux utiliser de vraies machines sous Mac OS X, Windows Vista, XP, Linux, etc.

Il s’agit de la seule manière de pouvoir compter sur le moteur de rendu graphique et Javascript et des éventuels outils d’aide à l’intégration et au développement… Le débuggage d’une page web ne se réduit pas à recaler une barre latérale qui passe sous le contenu principal !

Par ailleurs, il est toujours très intéressant de voir le rendu de son site sous une autre configuration (taille d’écran et résolution différentes, autres polices de caractère  installées, etc). Ça calme !

Références diverses pour les balises HTML5 et les propriétés CSS selon les navigateurs

• The Future of HTML5 — Les spécifications de HTML 5 s’appelaient à l’origine Web Applications 1.0. La plupart des observateurs ont focalisé sur la création des nouveaux marqueurs HTML comme header, nav, aside ou footer alors que cette nouvelle version recèle des trésors fabuleux : 1) Images dynamiques et graphiques avec canvas ; 2) Validation des formulaires améliorées avec webforms 2.0 ; 3) base de données locales pour enregistrer les données ; 4) Géolocalisation et 5) Création de barres d’outils et de menus.

• HTML5 Cheat Sheet — 4 pages en PDF pour connaitre toutes les balises disponibles dans HTML5 (y compris celles qui étaient déjà présentes dans HTML4). Par exemple :

  Tag	Information	Version	Attributes
  blockquote	Long quotation	4/5	cite
  dialog	dialog, conversation	5	global attributes
  section	section	5	cite

• Prise en charge des CSS selon IE6, IE7 et IE8 — Excellente mise au point des différences de prise en charge des sélecteurs et propriétés CSS selon les différentes versions d’Internet Explorer. Pouvons-nous utiliser body>p, a[href] ou encore position: fixeddans IE7 ? Toutes les réponses à ces questions — et à bien d’autres — sur une page claire et concise.

• CSS Compatibility and Internet Explorer — Je devrais y penser plus souvent : le réseau Microsoft pour les développeurs est plein de ressources pour faire le point sur la prise en charge des sélecteurs ou des attributs CSS disponibles dans les différentes versions d’Internet Explorer. Merci Josselin :)

• Web browser CSS support — Spécifications et prise en charge des propriétés CSS 2.1 et CSS3 selon les navigateurs. Possibilité de choisir parmi 14 agents utilisateurs : IE 4, IE 5, IE 5.5, IE 6, IE 7, IE 8, Firefox 1, Firefox 1.5, Firefox 2, Firefox 3, Opera 8.5, Opera 9, Konqueror 3.5 et Safari 2. Via les Carnets de La Grange.

• Browser support for CSS3 and HTML5 — Tableaux synthétiques pour connaitre le degré de prise en charge de HTML5 et CSS3 par les principaux navigateurs du marché : Safari 4 (Win), Firefox 3.5 (Win), Google Chrome (Win), Opera 10 (Win) et Internet Explorer 6, 7 & 8. Les propriétés les plus largement supportées (dans une optique d’amélioration progressive) sont : rgba(), hsla(), opacity(), border-radius (except Opera) et canvas.
  

• Pour finir cette rubrique, je vous propose de lire ou relire HTML5 et l’avenir du web de Tim Wright (traduit par Goulven Champenois) qui fait le point sur les avancées technologiques apportées par la nouvelle version de HTML.

Typographie : au-delà des polices installées chez l’utilisateur

• Utiliser n’importe quelle police sur un site web — L’article fait rapidement le point sur les différentes manières d’utiliser les polices de caractères sur son site web et présente la directive CSS3 @font-face qui commence à faire parler d’elle.

  Pour que vos fontes puissent être intégrées à Internet Explorer, il faudra convertir les polices du format TTF (TrueType Font) vers le format EOT (Embedded OpenType) avec TTF to EOT Font Converter.

  Si vous n’avez pas de belles fontes libres de droits sous la souris, je propose aux cinq premiers d’entre vous qui en feront la demande dans les commentaires, une invitation pour tester TypeKit. Grosso modo, une fois inscrit, vous pourrez faire une sélection de polices de caractère parmi près de 70 fontes classées par style (Serif, Sans Serif, Script et Exotic) ou par tag (clean, geometric, futuristic, grunge, gothic, etc.). Merci à bibinou pour l’invitation.

Framework CSS sans stress

• My Simple Framework — Ce framework fera plaisir à tous ceux qui trouve que la rigidité des grilles entravent leur créativité. A la place, ce framework se distingue avec plus de 1 600 feuilles de style prêtes à l’emploi pour subvenir à vos besoins en matière de mise en page web : 840 CSS en 960 pixels avec par exemple head-nav-3col(1-2-3)-4col(3-4)-960px.css et 840 CSS liquides avec head-nav-2col(1-2)-4col(2-3-4)-liquid.css.

• oocss — Framework CSS à la mode de la programmation objet. A ce sujet, je suis assez d’accord avec Grégoire pour dire que la POO c’est du pipeau — ou du moins pas indispensable en développement web — car la programmation procédurale en a encore sous la botte… Ceci dit, il y a toujours de bonnes idées à prendre dans les frameworks, donc, enjoy!

• Reset CSS spécial HTML5 — Un bon reset CSS c’est le début d’un framework ! Cette remise à zéro des styles par défaut des balises HTML est inspiré par le Reset CSS d’Eric Meyer auquel Richard Clark a ajouté les éléments spécifiques à HTML5 : article, aside, dialog, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video. Via Blog-html5.

Pour avoir une liste plus conséquente de frameworks CSS et une analyse plus touffue, je vous invite à lire :

• Framework CSS — mettez vos grilles au pas !,
• Frameworks CSS + Reset CSS : design from scratch,
• Framework CSS sémantique ? Comment je vois les choses.

CSS Float

Avoir les pieds dans la float n’est pas toujours agréable, alors voici quelques liens qui devraient vous aider à vous en sortir :

• Understanding CSS Floats — La propriété float expliquée en texte, code et illustration. Des explications claires et didactiques en anglais.
• CSS Float Theory — Dans la même veine que le lien précédent, en plus complet peut-être. Ce tour d’horizon sur float contient également une palanquée de liens qui valent également le coup d’oeil.
• Floatutorial — Si je devais partir sur un ile déserte avec un seul site sur float, c’est certainement celui-ci que j’emporterais avec moi, ne serait-ce que pour les nombreux exemples concret mettant en oeuvre la propriété float.

Allez, encore un effort pour en savoir davantage sur cette propriété CSS passionnante (en français) :

• Pour rétablir le flux après un float, vous êtes plutôt HR, BR ou DIV ?,
• Rétablir le flux après des éléments flottants en CSS sans balise HTML supplémentaire.

Miscellanées

Last but not least, je termine cette revue de presse avec ces liens qui viennent de me tomber sous la souris :

• Intégrateurs, montez au front — Voici le résumé de la conférence donnée par Stephane Deschamps à Paris-Web 2009. Cette intervention aurait pu s’appeler L’intégrateur, cet inconnu. Ce métier est mal connu, sans doute à cause de l’étendue des techniques et des savoir-faire qu’il faut connaitre et maitriser si possible.

DOM vs Namespace html:

1. Le DOM pour créer from scratch ex nihilo les balises manquantes. Cette méthode préconisée notamment par John Resig consiste à créer les éléments dont nous avons besoin via Javascript :

   
       <!--[if IE]>
           <script type="text/javascript">
               document.createElement("header");
               document.createElement("footer");
               document.createElement("nav");
               document.createElement("article");
               document.createElement("section");
           </script>
       <![endif]-->
   

   Pour automatiser la création des éléments présents dans HTML5, Remy Sharp nous propose HTML5 enabling script :

   
      <!--[if IE]>
          <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
      <![endif]-->
   

2. Le préfixe html: pour déclarer l’élément dans son namespace :

   
   <html:header>Ceci est un header</html:header>
   

Pour faire le point sur les avantages et inconvénients de ces deux techniques, voici l’excellent article How to get HTML5 working in IE and Firefox 2 suggéré par Adrien Leygues dans le fil de discussion en question.

Un script PHP à écrire…

Pour réunir le meilleur des deux mondes, Yves Van Goethem propose de servir les éléments HTML avec ce préfixe uniquement pour IE, le code serait réécrit par un moteur en back-end pour obtenir un script côté serveur (et non plus dépendant de Javascript) pour automatiser la prise en compte des balises HTML5 par IE, ce qui permettrait d’utiliser les nouvelles balises HTML5 dès avant-hier ! N’hésitez pas à vous manifester si vous avez déjà développé un script ou simplement si vous avez des idées sur la question.

En attendant Godot 2022 ^_^v

Voici un exemple de page HTML5 valide proposée par Remy Sharp dans HTML 5 Boilerplates utilisant le script html5.js :

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset=utf-8 />
            <title>HTML 5 complete</title>
            <!--[if IE]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
            <![endif]-->
            <style>
                article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; }
            </style>
        </head>
        <body>
            <p>Hello World</p>
        </body>
    </html>

Notez le display: block pour déclencher la prise en compte des éléments HTML and the cat’s in the bag!.

Links for Free

• http://html5doctor.com/html-5-boilerplates
• http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2
• http://www.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web
• http://groups.google.fr/group/webdevfr
• http://ejohn.org/html5-shiv
• http://remysharp.com/2009/01/07/html5-enabling-script
• http://viralpatel.net/blogs/2009/05/html-5-the-new-html-kid-on-the-block.html
• http://www.alistapart.com/articles/previewofhtml5
• http://bbxdesign.com/2009/06/08/introduction-au-html-5
• http://www.iheni.com/html5-tips-structure-doctype-aria

Les commentaires conditionnels de Conditional-CSS peuvent s’appliquer à l’ensemble d’une règle CSS ou à une seule de ses propriétés. Voici un exemple d’utilisation :

/* Conditional-CSS example */
a.button_active, a.button_unactive {
    display: inline-block;
    [if lte Gecko 1.8] display: -moz-inline-stack;
    [if lte Konq 3.1] float: left;
    height: 30px;
    [if IE 5.0] margin-top: -1px;
    text-decoration: none;
    outline: none;
    [if IE] text-decoration: expression(hideFocus='true');
}

Voici les navigateurs pris en charge par le script :

• Internet Explorer
• Internet Explorer Mac
• Gecko (Firefox etc)
• Webkit (Safari etc)
• Opera
• Konqueror
• Safari Mobile (iPhone, iPod)
• IE Mobile
• PSP Web browser

Même si je ne suis pas fan de ce genre de technique — qui automatise d’une certaine manière les hacks CSS souvent décriés — force est de reconnaitre que l’auteur de c-css à fait du beau travail. Je garde l’adresse sous le tapis de souris : on ne sait jamais ;)

• Prise en charge du chunk iTXt,
• Utilisation des dernières version de zlib et libpng.
• Le code binaire est désormais une application Unicode,
• Le logiciel n’est pas compatible avec Window 95/98/ME,
• Beaucoup de ménage dans le code source,
• Quelques bugs réparés, mais d’autres bugs sont sûrement apparus qu’il faudra réparer à leur tour !
• Passe de la licence GPLv2 à GPLv3.

Ce petit utilitaire est très pratique pour modifier la couleur par défaut des PNG transparents pour éviter le background disgrâcieux sous IE6 ;)

Le format PNG

Le PNG est format d’enregistrement d’image destiné à remplacer le format GIF dans sa version 8 bits. La version 24 bits en RVBa — qui comprend plus de 16 millions de couleurs — autorise jusqu’à 256 niveaux de transparence très utiles en webdesign pour superposer deux images dont celle du dessus laisse transparaitre celle du dessous.

Malheureusement, IE6 ne comprend rien à ces différents niveaux de transparence : il faut ruser, c’est usant. Certains préconisent la dégradation grâcieuse : utiliser la transparence dans les navigateurs qui la prennent en charge et servir autre chose au dernier de la classe : un PNG 8 bits avec une seule couleur de transparence, fusionner les deux images censées se superposer, voire même utiliser une image légèrement différente.

Après tout, les visiteurs ne sont pas toujours des développeurs web utilisant plusieurs versions de navigateurs pour traquer la moindre différence de rendu. Si vous pouvez vous le permettre, foncez ! Dans le cas contraire, il faudra recourir à des solutions plus ou moins fonctionnelles selon que l’image en question se trouve placée en background d’un élément (une div, par exemple) ou dans une balise img. Si votre image transparente est placée sur un fond uni, il reste la possible de modifier l’image par voie logicielle :

Modifier le chunk (segment) bKGD des png

Un image au format PNG est composée de différents segments (chunks) dont le fameux bKGD qui spécifie une couleur de fond par défaut. A noter que les agents utilisateurs (navigateurs, logiciels, etc.) ne sont pas tenus de respecter cette couleur et peuvent en utiliser une autre. Dans IE6, cette couleur se rapproche d’un gris-vert tirant sur le turquoise…

Certains logiciels comme TweakPNG permettent de modifier la valeur de bKGD. Si vous disposez d’un fond de couleur uni, il suffit d’y mettre la couleur du fond sur laquelle est placé votre image contenant des zones transparentes.

Dans le cas contraire, les filtres Microsoft sont nos amis :

Le filtre AlphaImageLoader de Microsoft

Internet Explorer (depuis la version 5.5) inclut un mécanisme de filtres propriétaires filter dont AlphaImageLoader qui gère la transparence des png 24 bits. L’utilisation du filtre diffère selon que l’image est appelé via la balise img ou en tant que background d’un autre élément.

Appliqué sur une balise img

Applique le filtre sur les images dont la classe CSS est .img_png à l’intérieur d’une feuille de style réservée à IE6 avec les commentaires conditionnels. Il suffit de renseigner la source de monImageTransparente.png dans la variable src :

.img_png {
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pix/monImageTransparente.png', sizingMethod='image');
}

Appliqué sur une image en background

Pour les navigateurs tenant compte de la transparence, vous aurez la règle CSS :

.div_png {
    width: 100px;
    height: 150px;
    background: url(../pix/monImageTransparente.png) no-repeat;
}

Pour Internet Explorer 6, il faudra utiliser :

.div_png {
    width: 100px;
    height: 150px;
    background: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pix/monImageTransparente.png', sizingMethod='scale');
}

Notez l’attribut sizingMethod qui peut recevoir les valeurs image, scale ou crop (via l’excellente FAQ du forum d’Alsacréations.) :

• image — Réduit ou élargit le bloc pour correspondre aux dimensions de l’image (valeur par défaut),
• scale — Etire l’image aux dimensions du bloc,
• crop — Rogne l’image pour qu’elle tienne dans le bloc.

Quelques contraintes

1. La source de l’image doit être relative au document HTML qui l’affiche et non à la feuille de style CSS qui la réclame. De sorte qu’une image se trouvant dans un dossier images appelée dans un fichier CSS se trouvant dans un dossier css ne devra plus se trouver sur le chemin ../pix/monImageTransparente.png mais sur pix/monImageTransparente.png.

2. Les liens contenus dans un élément HTML possédant une images de fond transparente ne sont plus cliquables, les champs input ne sont plus accessibles et le texte n’est plus sélectionnable. Une manière générale d’y remédier est d’ajouter une déclaration du type :

   
   .div_png a,
   .div_png input {
       position: relative;
       z-index: 1;
   }
   

   Pour plus d’information sur cette question, lire le fil de discussion paru sur le forum d’Alsacréations et la synthèse rédigée par Frank Galey.

3. Il n’est pas possible d’utiliser les propriétés background-repeat et background-position avec une image PNG transparente en background.

4. Il est difficile d’utiliser des événements de style rollover pour permuter des images de fond au passage de la souris.

Passez-moi l’expression !

C’est assez contraignant. Heureusement, le web est rempli de gens de bonnes volonté qui se sont retroussé les manches pour nous offrir des solutions sur un plateau. Voyez plutôt :

* html img,
* html .png {
    position:relative;
    behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
);
}

Trouvé sur komodomedia via babylon-design.

Le * html est là uniquement pour cibler IE6. Vous pourrez donc vous en passer si vous utilisez une feuille de style dédiée à ce navigateur. Ne fonctionne pas si Javascript est désactivé. Nécessite une image transparente de 1px de côté (transparent.gif).

Note : il sera peut-être nécessaire d’ajouter un z-index: 1; pour éviter les problèmes de liens, d’éléments de formulaire ou de sélection de texte évoqués plus haut.

Une solution globale avec iepngfix

Il existe de nombreux scripts permettant d’automatiser avec plus ou moins de bonheur cette gestion de la transparence des images PNG. Ils mettent tous en oeuvre le filtre AlphaImageLoader soit dans un fichier Javascript, soit dans un fichier HTC. Parmi tous les scripts existants, j’ai retenu iepngfix de TwinHelix que m’a conseillé Oncle Tom sur Twitter.

Ce composant HTC gère la plupart des contraintes énoncées plus haut, y compris l’absence de prise en compte de background-repeat et background-position dans iepngfix version 2.0 Alpha 3.

Le script est très simple à utiliser :

1. Copiez les fichiers iepngfix.htc and blank.gif dans le dossier de votre site web,

2. Copiez la déclaration CSS suivante dans votre feuille de style ou votre fichier HTML :

   
   img, div {
       behavior: url(iepngfix.htc);
   }
   

   Vous pouvez placer dans ce sélecteur CSS toutes les balises HTML, les identifiants ou les classes pour lesquels vous désirer activer la gestion de la transparence des PNG. Séparez-les simplement par une virgule.

3. N’oubliez pas que le chemin vers les fichiers iepngfix.htc et blank.gif est relatif au document HTML et non à la feuille de style CSS.

4. Si votre site est composé de sous-dossier, n’hésitez pas à ouvrir le fichier iepngfix.htc dans un éditeur de texte pour modifier la variable blankImg afin de la faire pointer vers votre pixel transparent. Par exemple : IEPNGFix.blankImg = '/images/blank.gif';

   Cette fois encore, le chemin doit être relatif au document HTML. Si vous désirez activer la prise en charge des propriétés background-repeat et background-position assurez-vous d’inclure le fichier Javascript iepngfix_tilebg.js dans votre document HTML :

   <pre><code>
   <script src="iepngfix_tilebg.js" type="text/javascript"></script>
   </code></pre>
   

5. Dans certains cas, il sera nécessaire d’envoyer le bon type MIME à Internet Explorer 6. L’auteur du script a prévu un fichier iepngfix.php qui inclut le fichier iepngfix.htc tout en renvoyant le type MIME text/x-component associé aux fichiers .htc :

   
   img, div, a, input {
       behavior: url(/css/resources/iepngfix.php);
   
   }
   

6. Pour améliorer les performances, soyez le plus sélectif possible : préférez un #img_header ou un .img_png à l’utilisation de la balise img seule, sauf bien sûr si toutes vos images ont besoin du script !

7. Il se peut que le fond gris-vert apparaisse brièvement lors du chargement de l’image. Si vous ne voulez pas ce comportement (notamment sur les grandes images), vous n’aurez qu’à revenir à une utilisation « manuelle » du filtre AlphaImageLoader comme indiqué dans la première partie.

N’hésitez pas à consulter le fichier iepngfix.html présent dans l’archive .zip qui apporte une palanquée d’informations, de trucs et d’astuces pour utiliser le script et remédier aux problèmes d’utilisation.

Une nouvelle solution globale avec DD_belatedPNG

DD_belatedPNG semble faire l’unanimité autour de lui pour sa légèreté et son efficacité, y compris lorsqu’on l’utilise avec background-position ou background-repeat. Le script s’utilise très simplement :

<pre><code>
<!--[if IE 6]>
    <script src="DD_belatedPNG.js"></script>
    <script>
        DD_belatedPNG.fix('.png_bg');
    </script>
<![endif]-->
</code></pre>

La classe .png_bg n’est qu’un exemple et vous pourrez utiliser un ou plusieurs sélecteurs à votre convenance, tels que :

 <script>
        DD_belatedPNG.fix('.example1, .example2, img');
 </script>

Conclusion

Ce sujet semble inépuisable, ce qui n’est pas mon cas. Je laisse cet article en version bêta pendant quelques temps histoire de laisser décanter le sujet : il serait étonnant que des erreurs ou inexactitudes ne se soient pas glissées sous le tapis de souris ;)

Ressources externes

Généralités sur le format PNG

Gérer la transparence du PNG par voie logicielle

Ce logiciel permet d’accéder aux informations contenues dans un fichier PNG dont notamment le chunk (segment) bKGD pour modifier la couleur de fond sur laquelle s’applique la transparence (un fond gris/vert/turquoise par défaut dans ie6). Vous trouvez quelques explications concernant son utilisation sur

Logiciel très pratique et simple d’emploi pour améliorer la compression des images au format PNG. Il suffit de faire glisser les images que vous voulez améliorer et le PngOptimizer s’occupe du reste. Possède quelques options pour manipuler les chunks ou garder une version de l’image d’origine.

C’est peu connu, mais les spécifications du format PNG 8 bits autorisent plusieurs couleurs dans le segment Alpha, ce qui permet de spécifier plusieurs couleurs transparentes en utilisant un logiciel approprié comme Fireworks. Voilà une bonne technique pour s’autoriser une dégradation grâcieuse des images transparentes sous Internet Explorer 6 !

Un peu hors-sujet par rapport à la transparence des PNG, je signale l’existence d’un plugin pour Photoshop qui permet d’optimiser le poids des images PNG : le plugin installé par défaut dans Photoshop ne rend pas vraiment justice aux possibilités de compression de ce format.

Quelques scripts

Version 1.0 et version 2.0 Alpha 3 du script iepngfix. Gère les background-repeat et background-position dans la version Alpha à l’aide d’un fichier Javascript supplémentaire.

Ce script est proposé par Yves Van Goethem. Nombreuses options disponibles réservées à un public averti ;)

Fichier Javascript gérant la plupart des pièges posés par l’application du filtre AlphaImageLoader.

Avec Unit PNG Fix pas besoin de définir des classes ou de cibler vos éléments. Fonctionne avec les balises img ou sur les background-image. Très léger. Merci à 13sportif pour le lien.

Expression Javascript permettant de gérer la transparence des PNG en img ou en background

Script très léger et pratique. S’applique à toutes les images PNG de votre document. Toutefois, certaines images restent en mode téléchargement alors quelles sont bien affichées, ce qui peut donner l’impression au visiteur que quelque chose ne tourne pas rond sur le site. Malgré tout, ce script vieillissant peut encore rendre quelques services : il m’a rappellé l’existence de l’attribut defer="defer" de la balise script qui permet de différer le chargement (ou l’application) du script en question. Voir cet article très complet sur l’analyse de defer.

Propose une version modifiée du script précédent pour les champs de formulaires <input type="image" />

Encore un Javascript à se mettre sous la souris ! Crée une balise div dans laquelle est affichée l’image traitée par le filtre DirectX :

Plus ou moins la même chose avec un composant HTC.

Une solution originale en PHP.

Autres ressources sur la transparence des PNG

La blonde propose avec pédagogie un récapitulatif des différentes méthodes pour gérer cette transparence sur 256 niveaux.

Présente de nombreuses solutions et contournement pour afficher les images transparentes.

La FAQ du forum Alsacréations sur comment obtenir la transparence des PNG avec Internet Explorer 6

Tutoriel pour pallier les effets secondaires du filtre AlphaImageLoader en cas de positionnement absolu.

Mise en garde d’Eric Daspet sur l’utilisation des filtres : Si vous l’utilisez pour une petite icône de présentation qui apparaît vingt fois dans votre page, c’est vingt exécutions du filtres qui sont faites. À chaque exécution du filtre le rendu est bloqué, en attente. Sur Yahoo! Search en retirant AlphaImageLoader de la feuille CSS c’est jusqu’à 100ms qu’ils ont gagné (information donnée par Stoyan Stefanov sur sa dernière présentation).

Article très instructif sur la transparences du format PNG et l’application de AlphaImageLoader

Il faut dire que la base installée est encore importante et on ne peut pas demander au gens de couper la branche sur laquelle ils sont assis. Et pourtant, je sens que vous n’attendez qu’une bonne occasion pour vous débarrasser du bouzin.

Le constat

IE6 représente encore entre 20% et 30% des visites, parfois plus, parfois moins. Il est donc important d’en tenir compte dans la majorité des projets de sites web. Sur mon blog, les internautes équipés de IE6 ont représenté environ 12% des visites depuis juillet 2006 et comptent pour 7% des visites sur les trois dernier mois.

Si j’enlève les développeurs web qui dégainent IE 6 pour tester les sites visités (et qui doivent représenter une grande partie des lecteurs), j’évalue à moins de 5% le nombre d’internautes qui me rendent visite « pour de vrai » avec IE6 sachant qu’il s’agit certainement des visiteurs envoyés par Live.com qui désirent regarder danser Louxor…

5%, c’est peu mais ça représente plus de 1000 visites par mois : c’est suffisant pour s’en soucier quand même ! Il n’est pas dans mes intentions de priver ces visiteurs d’une saine lecture :)

Du coup, il m’est venu une idée : pourquoi ne pas rediriger les visiteurs équipés d’une version d’IE inférieure à 7 vers le flux RSS mis en forme par Feedburner sachant qu’un visiteur surfant avec IE6 pourra s’abonner et me lire plus tard depuis son agrégateur ?

C’est là qu’intervient kickIE6 :

I’m in ur blog kicking ie6, kwel… ^__^v

<script type="text/javascript">
    if ( $.browser.msie ) {
        if ( $.browser.version < 7 ) {
            document.location.href = 'http://feeds.feedburner.com/css4design';
        }
    }
 </script>

Placez ce script après l’appel de la librairie jQuery entre les balise head de votre fichier header.php (si vous êtes sous WordPress) et d’indiquez l’adresse de votre flux Feedburner à la place du mien.

Pour que votre flux RSS s’affiche correctement dans un navigateur, vous devrez peut-être activer le service BrowserFriendly de Feedburner dans l’onglet Optimize. En savoir plus sur les services Feedburner.

Installer jQuery sans douleur sur WordPress

Vous ne savez pas si jQuery est installé dans votre thème WordPress ? Voici une ligne à ajouter juste au-dessus du script kickIE6 :

<?php wp_enqueue_script('jquery'); ?>

Cette ligne devrait activer la bibliothèque jQuery installée en standard avec WordPress.

Une solution qui exclue ?

J’ai mis en place ce script depuis une dizaine de jours et comme me l’ont fait remarquer plusieurs personnes (deux pour être exact), une partie de ceux qui utilisent IE6 ne le font pas par choix personnel et subissent les lourdeurs de leurs administrateurs réseaux qui ne veulent (ou ne peuvent) pas mettre à jour le parc informatique de l’entreprise. C’est pour ceux-là justement que je propose la lecture du flux et l’abonnement ensuite si plus d’affinité.

Mais quid de l’interaction ? Et oui, la lecture du flux ne permet pas aux lecteurs de laisser des commentaires. C’est vrai et ça m’ennuie. Même si derrière les chiffres il y a des personnes, je ne peux m’empêcher de me dire que le pourcentage de ceux qui laissent des commentaires par rapport aux lecteurs est faible et il n’y a aucune raison pour que ceux qui utilisent IE6 soient plus bavards que les autres…

Par ailleurs, je compte sur le fait que ceux qui subissent IE6 au travail, ont certainement un autre navigateur installé à la maison ;)

Comment j’en suis arrivé là, en réalité…

C’est la faute à Blueprint ! Pas vraiment, mais un peu quand même. J’avais déjà utilisé avec succès ce framework CSS et le script IE7.js, mais quand j’ai refait mon thème, j’ai péché par excès de confiance en ne testant mon design sous IE 6 qu’à la fin ^_^v

Blueprint n’est pas vraiment en cause car je n’ai pas suivi la logique du framework pour toutes les parties de la mise en page. C’est là que je me suis aperçu que l’intrusion de la présentation dans le code HTML sous la forme des classes CSS ne facilite pas la mise en place d’une feuille de style alternative. Surtout quand on change de design tous les mois, ou presque !

Je reconnais que si j’avais été plus vigilant en utilisant Blueprint (tester tôt et souvent), j’aurais — comme d’habitude — un blog qui s’affiche aussi bien dans IE6 que dans les autres navigateurs.

Conclusion

Je n’envisage pas de laisser tomber le support CSS d’IE6. Mais ce blog est un terrain d’expérimentation et j’ai eu envie d’expérimenter en mettant en avant une utilisation originale des flux RSS pour pallier les manques d’Internet Explorer 6. Cette idée pourrait trouver un prolongement en fournissant du contenu aux périphériques mobiles en complément d’une version mobile d’un blog, par exemple.

Je rappelle que le support d’Internet Explorer 6 est indispensable pour gagner ses galons d’intégrateur web. Pour autant, il n’est pas interdit de prendre en compte son lectorat et les ressources que l’on est prêt à mettre sur la table pour fournir la meilleure interaction possible entre les visiteurs et le contenu. De ce point de vue, les flux RSS associés aux différents services de Feedburner méritent d’être pris en compte dans une stratégie globale d’accès à l’information.

Keep clickin’