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 */

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

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 !

Qu’en penser ? Ce viewport n’est pas forcément lié à la résolution de l’écran. Il s’agit de la taille ajustée manuellement par l’utilisateur. On peut imaginer qu’il alloue une largeur pour tous les sites qu’il consulte ou qu’il ajuste cette largeur en fonction des informations qui apparaissent sur le site, en fonction de ses centres d’intérêt.

Quand le sage montre la lune, l’imbécile regarde le doigt…

Dans ce cas, les tailles données par Google ne voudrait pas dire grand chose. Difficile en effet de savoir qui de la poule ou de l’oeuf était là avant et vice-versa ! Je terminerais par un proverble chinois que j’affectionne particulièrement : Quand le sage montre la lune, l’imbécile regarde le doigt… J’exagère un peu et je tiens à modérer mon manque d’enthousiasme pour Browser Size : cet outil fait peu mais il le fait bien, et c’est déjà pas mal ^_^v

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 ;)

Pour y remédier, Damien Ravé nous propose une utilisation judicieuse de la fonction PHP filemtime() qui renvoie la date de la dernière modification d’un fichier pour recharger le cache CSS ou JS :

<script type="text/javascript" src="js/script.js?v=<?php echo filemtime('js/script.js'); ?>">
<link rel="stylesheet" type="text/css" href="css/ecran.css?v=<?php echo filemtime('css/ecran.css'); ?>">

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’

Pour autant, je reste un utilisateur comme les autres quand il s’agit de consulter mes mails (Gmail) de saisir du courrier (Google Documents), de consulter mes flux RSS (Google Reader) ou simplement pour lire le journal (Google News).

Firefox 3 — le capital sympathie s’épuise ?

La force de Firefox 3 ne réside pas dans ces qualité intrinsèques : qu’en reste-t-il une fois les extension désactivées ? Pourtant, l’indulgence de la part de la communauté vis-à-vis du Panda roux a été jusqu’au déni des contre-performances, pourtant évidentes que j’avais évoqué dans l’article Firefox roxe ? Opera, ça ira ? et IE7 part en sucette ?

La faute à Javascript ?

La particularité des services mentionnés plus haut est de faire un usage important de Javascript qui sollicite la mémoire du navigateur et grève ses performances. De ce point de vue, Firefox n’est pas un foudre de guerre et question rapidité il ne fait pas le poids, y compris face à Internet Explorer 6…

On a retrouvé Big Foot !

Quant à l’empreinte mémoire, n’en parlons pas : il m’arrive régulièrement d’observer une occupation de près de 1Go. Tout ça ne serait rien, si Firefox n’avait pas la fâcheuse habitude de planter régulièrement. La fonction qui permet de recouvrer l’ensemble de la session n’excuse pas tout. Mais au final, j’y trouve mon compte grâce aux extensions disponibles qui me font gagner du temps dans dans le « débuggage » des pages web.

Et Google Chrome fut

Une des particularités de Google Chrome est de lancer chaque onglet dans un processus différent à côté du noyau principal qui reste très léger. Grâce au gestionnaire de tâche intégré, il devient possible de connaitre précisément l’occupation mémoire de des onglets ouverts. Cela permet d’optimiser la navigation et de mieux gérer la RAM en réservant Google Chrome pour afficher les sites nécessitant des ressources importantes.

Où je veux en venir ? Simplement à une nouvelle organisation de mon surf quotidien : Google Chrome comme navigateur par défaut et Firefox 3 comme outil de développement web.

Conclusion

Comme la majorité de la population n’a pas besoin des extensions de developpement de Firefox 3, Google Chrome risque de rafler la mise auprès du grand public, comme le moteur de recherche Google l’avait fait en son temps : on ne résiste pas à l’accélération de l’affichage des résultats, pas plus qu’à celui des pages web.

Pour finir, il sera plus difficile pour la fondation Mozilla de mettre en place une plate-forme anxiogène sur le produit de Mountain View que sur celui de Redmond !

L’aspect pratique, en revanche est indéniable quand on est face à des zones de saisie trop chiches. Déjà une bonne surprise au bout de 5 min. d’utilisation seulement. Ca promet :)

Question : Au fait, c’est quoi le user-agent de Google Chrome ?

Réponse :

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US)
AppleWebKit/525.13 (KHTML, like Gecko)
Chrome/0.X.Y.Z Safari/525.13.`

La boite à outils du codeur de site web

Javascript »