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.

[code='css'] #selecteurCss { max-width:900px; width:expression(document.body.clientWidth > 900 ? "900px": "auto" ); } [/code]

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.

[code='css'] #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%" ); } [/code]

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

[code='xhtml'] [/code]

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

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

Et dans ie.css:

[code='css'] * html #selecteurCss { width:expression(document.body.clientWidth > 500 ? "500px" : "75%" ); } [/code]

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.