Commentaires Conditionnels ou Comment optimiser le cross browsing

Date de publication : 16/10/2007

TODO

Introduction
1. Exemple de départ
2. Les commentaires conditionnels
3. L'utilisation avec des feuilles de style
4. Les autres utilisations
5. Conclusions
Pistes de lectures

Introduction

La conception de pages Web fidèles, quelque soit le navigateur de l'internaute, est aujourd'hui encore un grand sujet de préoccupations des concepteurs de page Web. Ce problème est tellement récurrent que plus personne ne code sans utiliser les feuilles de style.

Mais malgré le gain indéniable de cette approche, tous les designers d'interfaces sont régulièrement soumis à des migraines. Si la diversité des navigateurs n'est qu'un aspect du problème ; le respect plus ou moins scrupuleux des standards du W3C en est un autre. Et ce n'est pas fini ! Que penser aussi du choix de Microsoft de confier le rendu des mails HTML dans Outlook 2007 à son éditeur de texte Word et non plus à Internet Explorer ?

Les plus expérimentés utiliseront avec plus ou moins de bonheur des hacks, et tous envisageront, à un moment ou à un autre, une re-conception de la page... Pourtant, une méthode simple permet de résoudre efficacement et de manière structurée un grand nombre de difficultés : l'utilisation de commentaires conditionnels. Et uniquement parce que cette technique est une initiative heureuse de Microsoft, tous les afficionados du développement Web vont enfin pouvoir réconcilier avec bonheur Internet Explorer (85,8% des parts du marché des navigateurs dans le monde en Janvier 2007 ), Firefox (11,69%), Safari, Opera, Netscape et les autres. De la même manière, les mailings HTML pourront continuer à présenter des contenus attrayants.

Voyons vite comment !

1. Exemple de départ

Comme un exemple est tout aussi important qu'une explication, nous allons manipuler une page HTML simple qui présente toutes les caractéristiques d'une incompatibilité entre navigateurs, en utilisant l'effet d'opacité. En effet, cette fonctionnalité est native dans les moteurs d'interprétation moderne, mais elle est soumise à différentes syntaxes.

commentaires1.html

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <title>Commentaires conditionnels</title>
    <style type='text/css'>
        body {
            background-color: #999999;
        }
        
        h1 {
            clear: both;
            font-size: medium;
            margin-bottom: 0;
        }
        
        p {
            margin-top: 2px;
        }
        
        .opacityLessThanIE55 {
            background-color: #ffffff;
            float:left;
            border: 1px solid #000000;

            /* 100% = bloc opaque ; 0% = bloc transparent */
            filter: alpha(opacity=50);
        }

        .opacityForAndMoreThanIE55 {
            background-color: #ffffff;
            float:left;
            border: 1px solid #000000;

            /* 100% = bloc opaque ; 0% = bloc transparent */
            filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
        }

        .opacityForMozilla {
            background-color: #ffffff;
            float:left;
            border: 1px solid #000000;

            /* 1 = bloc opaque ; 0 = bloc transparent */
            -moz-opacity: 0.5;
        }
        
        .opacityForOthers {
            background-color: #ffffff;
            float:left;
            border: 1px solid #000000;

            /* 1 = bloc opaque ; 0 = bloc transparent */
            opacity: 0.5;
        }
    </style>
</head>

<body>
    <h1>class="opacityLessThanIE55"</h1>
    <p class="opacityLessThanIE55">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. 
    Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed,
    dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper
    congue, euismod non, mi.
    </p>
    
    <h1>class="opacityForAndMoreThanIE55"</h1>
    <p class="opacityForAndMoreThanIE55">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. 
    Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed,
    dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper
    congue, euismod non, mi.
    </p>
    
    <h1>class="opacityForMozilla"</h1>
    <p class="opacityForMozilla">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. 
    Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed,
    dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper
    congue, euismod non, mi.
    </p>
    
    <h1>class="opacityForOthers"</h1>
    <p class="opacityForOthers">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. 
    Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed,
    dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper
    congue, euismod non, mi.
    </p>
    
</body>
</html>

Vous pouvez tester cette page dans votre navigateur. Le rendu dans Internet Explorer 7, Opéra 9.23 et Firefox 2 est éloquent !

2. Les commentaires conditionnels

Implémentés dans les versions Windows d'Internet Explorer depuis la version 5.0, les commentaires conditionnels sont utilisables dans toutes les pages HTML et XHTML marquées text/html, ainsi que dans des pages XSLT.

Vous l'aurez compris, extensions des balises de commentaires, ils ne seront pas interprétés dans les autres navigateurs et permettent un codage propre.

Microsoft propose deux versions de ces commentaires, les Downlevel-hidden et les Downlevel-revealed. Si les premiers sont compatibles avec les normes HTML (W3C), il n'en est pas de même pour les seconds. Mais qu'importe, pour notre propos nous resterons résolument compatibles !

La syntaxe HTML est de la forme :

<!--[if condition]>
  code HTML réservé à IE
<![endif]-->

La syntaxe XSLT est de la forme :

<xsl:comment><![CDATA[[if condition]> pseudo-html
  <![endif]]]>
</xsl:comment>

La condition peut-être enrichie par une ou plusieurs combinaisons d'opérateurs, comme décrit ci-après.

Opérateur	Description
IE version	Spécifie une version spécifique ou une famille de versions, suivant la précision de l'argument version. Si cet argument n'est pas renseigné, alors il s'agit de toutes les versions d'Internet Explorer. Exemples : [if IE 7] pour toutes les versions d'IE 7, [if IE 5.5000] pour la version 5.5 uniquement
!	Négation de la condition. Exemple : [if !IE 7] pour toutes les versions autres que la 7
lt	Plus petit que (less than). Exemple : [if lt IE 6] pour toutes les versions inférieures à la 6
lte	Plus petit ou égal à (less than or equal). Exemple : [if lte IE 5.5] pour toutes les versions inférieures ou égales à la 5.5
gt	Plus grand que (greater than). Exemple : [if gt IE 5] pour toutes les versions supérieures à la 5
gte	Plus grand ou égal à (greater then or equal). Exemple : [if gte IE 5.5] pour toutes les versions supérieures ou égales à la 5.5
( )	Parenthesage : permet de créer des conditions complexes.
&	Et logique. Exemple : [if (gt IE 5) & (lt IE 7)] pour toutes les versions supérieures à la 5 et inférieures à la 7
\|	Ou logique. Exemple : [if (IE 6) \| (IE 7)] pour toutes les versions 6 et 7
true	Vrai. Exemple : [if true] retourne un test toujours positif
false	Faux. Exemple : [if false] retourne un test toujours négatif

3. L'utilisation avec des feuilles de style

Comme déjà évoqué, les commentaires conditionnels ne sont interprétés que par Internet Explorer ; il est donc nécessaire de concevoir la feuille de style de référence pour tous les autres navigateurs et d'en prévoir une, ou plusieurs, spécifiquement pour IE qui sera appelée ensuite. Bien évidemment, seuls les sélecteurs nécessaires seront spécifiés dans ces feuilles de style spécifiques.

A partir de l'exemple du début, nous pouvons définir, par exemple, les feuilles de style ci-dessous.

Pour tous les navigateurs :

default.css

/* Styles de référence pour tous les navigateurs */

body {
  background-color: #999999;
}

h1 {
  clear: both;
  font-size: medium;
  margin-bottom: 0;
}

p {
  margin-top: 2px;
}

.opacityHalf {
  background-color: #ffffff;
  float:left;
  border: 1px solid #000000;

  /* 1 = bloc opaque ; 0 = bloc transparent */
  -moz-opacity: 0.5;    /* pour Mozilla */
  opacity: 0.5;      /* pour tous les autres : Opera, Firefox, etc. */
}

Spécifiquement pour IE, versions inférieures à 5.5 :

old_IE.css

/* Styles pour IE < 5.5 */

.opacityHalf {
  /* 100% = bloc opaque ; 50% = bloc transparent */
  filter: alpha(opacity=50);
}

Spécifiquement pour IE, versions supérieures ou égales à 5.5 :

recent_IE.css

/* Styles pour IE >= 5.5 */

.opacityHalf {
  /* 100% = bloc opaque ; 50% = bloc transparent */
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}

La page HTML reprenant l'utilisation des commentaires conditionnels devient alors :

commentaires2.html

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <title>Commentaires conditionnels</title>
  
  <!-- Par défaut -->
  <link rel="stylesheet" type="text/css" href="default.css" />
  
  <!-- Pour les versions d'Internet Explorer inférieures à 5.5 -->
  <!--[if lt IE 5.5000]>
  <link rel="stylesheet" type="text/css" href="old_IE.css" />
  <![endif]-->

  <!-- Pour les versions d'Internet Explorer supérieures ou égales à 5.5 -->
  <!--[if gte IE 5.5000]>
  <link rel="stylesheet" type="text/css" href="recent_IE.css" />
  <![endif]-->

</head>

<body>
  <h1>class="opacityHalf"</h1>
  <p class="opacityHalf">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. 
    Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed,
    dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper
    congue, euismod non, mi.
  </p>
</body>
</html>

Vous pouvez tester cette page dans votre navigateur. Avec un code propre et organisé, le résultat est sans appel :

4. Les autres utilisations

Bien sûr, cette syntaxe est aussi utilisable " en ligne " (inline) dans votre code HTML, pour tous les usages qui vous passeront par la tête.

Par exemple, pour proposer à un internaute de changer de navigateur, vous pouvez utiliser le code ci-dessous à l'intérieur des balises <body></body>.

<!--[if IE]>
<p>Cette page est optimisée pour <a href="http://www.opera.com/products/" target="newWindow">Opera</a>
ou <a href="http://www.mozilla-europe.org/fr/products/firefox/" target="newWindow">Firefox</a> et
votre navigateur actuel est Internet Explorer.</p>
<![endif]-->

De la même manière, vous trouverez ci-après une solution pour intégrer de manière universelle un objet Quicktime dans votre page.

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="320" height="260">
  <param name="src" value="http://lien vers le fichier .mov" />
  <param name="controller" value="true" />
  <param name="autoplay" value="false" />
  <!--[if !IE]>
    <object type="video/quicktime" data=" http://lien vers le fichier .mov " width="320" height="256">
      <param name="controller" value="true" />
      <param name="autoplay" value="false" />
    </object>
  <![endif]-->
</object>

5. Conclusions

Les commentaires conditionnels sont une possibilité de codage, certes hors norme pour le moment, mais dont l'utilité et les gains sont sans appels : fini les nuits de cauchemars et le cumul de hacks en tous genres pour des sites compatibles avec tous les navigateurs.

Dans cette présentation, nous avons pris le parti de proposer un exemple associé aux feuilles de styles, mais ne vous y trompez pas, cette technique fonctionne aussi bien pour du HTML inline, ce qui signifie qu'il est possible d'ajuster aussi le contenu. C'est indéniablement une solution très intéressante y compris pour les mailings HTML et le contournement élégant des restrictions imposées par d'Outlook 2007.

Il ne reste plus maintenant qu'à espérer que cette initiative soit valorisée à sa juste mesure, tant du côté des navigateurs alternatifs que dans la prochaine mise à jour des normes du W3C afin de rendre cette approche rapidement universelle.

Pistes de lectures

[1] La rubrique HTML / XHTML sur Developpez
[2] La rubrique CSS sur Developpez
[3]

MSDN : About Conditional Comments
[4]

CssHack : de nombreux hacks pour feuilles de styles
[5]

Tableau de synthèse des hacks par navigateur Web
[6]

Keep CSS Simple

Ismaël Ahounou est Directeur du Management des Collaborateurs chez EDIS Consulting.

EDIS Consulting

Version PDF Version hors-ligne

Copyright © 2007 Ismaël Ahounou. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts. Droits de diffusion permanents accordés à Developpez LLC.