Comme vous le savez probablement, Internet Explorer 6 ne supporte pas plusieurs des propriétés du CSS 2. C’est le cas notamment de la propriété max-width (et min-width). Heureusement, IE permet de spécifier des propriétés à l’aide de JavaScript directement dans le CSS en utilisant la fonction expression().

Ainsi, supposons qu’on veut une largeur maximale, on peut utiliser le code suivant. La propriété max-width sera utilisée par les navigateurs compatibles css2 et ignoreront la propriété contenant la fonction expression(). L’inverse se produira avec ie. Le code javascript pour la propriété width se traduit: si la largeur du body est plus grande que 900, mettre la largeur du selecteur à 900px, sinon laisser le sélecteur se dimensionner automatiquement.

#selecteurCss {
    max-width:900px;
    width:expression(document.body.clientWidth > 900 ? "900px": "auto" );
}

Par ailleurs, cette fonctionnalité devient également utile si on l’utilise en combinaison avec une largeur en pourcentage. Par exemple, le code suivant permet de spécifier une largeur de 75% jusqu’à un maximum de 500px.

#selecteurCss {
    /* Les 2 lignes suivante seront utilisées par les navigateurs compatibles css2 */
    max-width: 500px;
    width: 75%;
    /* celle-ci sera utilisée par ie6 et moins, et remplacera la ligne précédente */
    width:expression(document.body.clientWidth > 500 ? "500px" : "75%" );
}

C’est bien beau tout ça, mais cette méthode n’est évidemment pas valide selon les normes. La validation devient toutefois possible en plaçant le code spécifique à ie dans une feuille css à part et uniquement accessible à ie. Ainsi dans la page, on insère le code suivant qui ne sera lu que par ie6 et moins (car max-width est supposé être fonctionnel dans ie7).

<!--[if lt IE 7]>
    <style type="text/css" media="all">@import "ie.css";</style>
<![endif]-->

En reprenant l’exemple précédent, dans votre feuille de style de base, vous auriez:

#selecteurCss {
    /* Les 2 lignes suivante seront utilisées par les navigateurs compatibles css2 */
    max-width: 500px;
    width: 75%;
}

Et dans ie.css:

* html #selecteurCss {
    width:expression(document.body.clientWidth > 500 ? "500px" : "75%" );
}

Voilà, même si ce n’est pas la plus jolie des méthodes, elle fonctionne et n’empêche pas votre code css de valider. Si vous avez une meilleure façon d’émuler le max-width dans ie6, laissez-le nous savoir dans les commentaires.