J'ai croisé pendant ma glorieuse période d'évangélisation du Desktop Publishing d'Apple de nombreux créatifs.

Ces designers portaient tous un catogan enserrant la natte de leurs cheveux.
Ceux que je croise aujourd'hui sont tous chauves. Quel châtiment capillaire a pu s'abattre sur leurs crânes ? Ne cherchez pas : j'ai la réponse : c'est la faute à Microsoft et sa cochonnerie d'IE.

Si j'ai réussi à lui faire avaler HTML5 (j'y reviendrai dans un prochain billet), il demeure que les différences d'interprétation — pour les anciennes versions — sont telles qu'il faut les corriger.
Oui mais comment ? Des feuilles de styles séparées ? Des hacks dans nos feuilles ? Appliquer une classe particulière sur la balise body ? Où passer par Javascript ?

Pour ce blog en CSS3 et HTML5 j'ai pratiqué 1 ou 2 Hacks pour IE8, pour Opera et Chrome, 1 seul, mais j'ai découvert avec IE6 qu'il y avait du boulot pour lui régler le moteur.
J'entends d'ici vos hurlements « On s'en fout d'IE6 ! ». Quand il s'agit de business les gars on peut pas faire autrement que de pallier ses défauts. Je connais des entreprises (de grands comptes généralement) qui n'offrent pas le choix du navigateur à leurs employés. Si si...
Alors si votre site ne soit pas accessible par IE préfèrez-vous que votre visiteur le quitte pour aller voir votre concurrent ? [silence].
Alors comment fait-on pour corriger ses erreurs d'interprétation ?

Les feuilles de styles séparées

Vous les connaissez tous.

<!-- Feuille de styles pour IE, toutes versions confondues -->
<!--[if IE]>
<link rel="stylesheet" href="style-ie.css" type="text/css" />
<![endif]-->

<!-- Feuille de styles pour les versions d'IE strictement postérieures à la 7 -->
<!--[if gt IE 7]>
<link rel="stylesheet" href="style-ie8-et-plus.css" type="text/css" />
<![endif]-->

<!-- Feuille de styles pour IE 7 et versions antérieures -->
<!--[if lte IE 7]>
<link rel="stylesheet" href="style-ie7-et-moins.css" type="text/css" />
<![endif]-->

<!-- Feuille de styles pour IE 6 seulement -->
<!--[if IE 6]>
<link rel="stylesheet" href="style-ie6.css" type="text/css" />
<![endif]-->

<!-- Feuille de styles pour tous les navigateurs et pour les versions d'IE au moins égales à la 7 -->
<!--[if gte IE 7]>
<link rel="stylesheet" href="style-tous-plus-ie7-et-plus.css" type="text/css" />
<![endif]-->

<!-- Feuille de styles pour tous les navigateurs, sauf IE -->
<!--[if !IE]>
<link rel="stylesheet" href="style-tous-sauf-ie.css" type="text/css" />
<![endif]-->

On les appelle via les commentaires conditionnels que seules les différentes versions d'Internet Explorer (en tous cas supérieures à la V5.0) comprennent. Elles ne seront donc pas interprétées par les autres navigateurs (Chrome, FireFox, Safari, Opera).
« Oui mais bon, il n'y a pas qu'IE dans la vie. Et les autres browsers ? »
Bien sûr vous avez raison. Et c'est chiant pénible à gérer toutes ces feuilles de style. Au bout d'un moment on ne s'y retrouve plus.
Alors ? Passer par des...

Hacks pour vos CSS ?

On a tous péché en les oubliant dans les CSS ces Hacks...ça va en « Quick and dirty » pour nous faciliter la vie de codeur,

div.madiv {float: right; padding-left: 24px; _padding-left: 19px }

mais ça manque de classe (!), ça valide pas..., bref, c'est la pire des solutions.
« Oui mais bon, il n'y a pas qu'IE dans la vie. Et les autres browsers ? » Bis repetita non placent.
On y vient. On y vient...

Du body buildé

Je fais du body building depuis quelques années (vous en conviendrez, Mesdames, que ça ne m'a pas trop mal réussi).
« Du body building ? Qu'est-ce ? »

Cela consiste tout simplement à ajouter une ID au body pour faire appliquer, pour cette page seule, des classes particulières à la page sur laquelle le visiteur se trouve.
C'est pas clair ? Un exemple alors :

Pour votre page contactez-moi vous voulez des liens de couleurs différentes des autres pages. Sur toutes les autres pages de votre site ils sont bleus, mais là il vous les faut en rouge car, c'est bien connu, le rouge est plus incitatif.
Y a 2 manières de le faire :

• vous pouvez déclarer une feuille de style séparée pour votre page contact.
  C'est lourd. Et à chaque modification de la feuille principale vous devez faire les modifs dans la CSS de la page contact.
• vous pouvez donner à tous ces liens une classe unique pour cette page.
  C'est la solution la plus courante... et ça fait des feuilles de style à rallonge.

Non ! La meilleure solution est d'affecter au body de la votre page contact un ID unique. Ainsi vous pourrez utiliser la même feuille de style et faire appliquer pour cette page la couleur des liens que vous voulez.
Et c'est tout simple à mettre en œuvre :

body id="contact"

Et pour votre CSS :

a {
color: blue;
}
#contact a {
   color: red;
}

Maintenant qu'on a une idée on va la pousser à faisant appliquer des classes spécifiques pour la terreur des coiffeurs pour codeurs de CSS : IE.
C'est vraiment tout con :

Pour la CSS il n'y a plus qu'à :

div.madiv { color: inherit;}
.ie div.madiv { color: green; }

Pour mon CMS HTML5 de COSEur, c'est cette fonction que j'ai employée :

function bodyID() {
   global $categorySEF;
   $catList = explode( ',', l( 'cat_listSEF' ) );
   // sNews does not differentiate between admin pages and public pages 
   // A default install would have the first 4 as 'archive,contact,sitemap,login'   
	unset( $catList[0], $catList[1], $catList[2], $catList[3] );
   if ( $categorySEF || ( _ADMIN && $_GET['action'] ) ) {
      if ( 
          in_array( $_GET['action'], $catList ) ||
          in_array( $categorySEF, $catList )  
	) {
	$bodyID = 'administration';
		} else $bodyID = $categorySEF;
		} else $bodyID = s('home_sef');
   $conditional = '<!--[if IE 6 ]>class="ie6"<![endif]--><!--[if IE 7 ]>class="ie7"<![endif]--><!--[if IE 8 ]>class="ie8"<![endif]-->';
	return ' 	&lt;body id="'.$bodyID.'"&gt;';
 }

« Et pour les autres navigateurs ? Tu fais quoi ? »
Eh bien puisque vous me poussez à bout je n'utilise plus aucune des solutions ci-dessus (mise à part la fonction function bodyID()).
Je fais maintenant de la...

Détection de navigateurs en PHP

Mais on verra ça dans le prochain article...