Internet Explorer est probablement le navigateur Web le plus critiqué de l'histoire du Web. Pourtant, il est à l'origine de certaines technologies fascinantes telles les « CSS expressions », qui aurait pu rendre la vie des développeurs beaucoup plus facile si les concurrents d'Internet Explorer les avaient implémentées.

Offrant un panel de solutions pratiques pour vous simplifier la vie et étendre les possibilités de CSS, les expressions de Microsoft sont un moyen assez simple et pratique d'utiliser du Javascript dans les feuilles de styles CSS.

Les expressions CSS, c'est quoi ?

Vous ne vous êtes jamais dit que les CSS étaient très limitées ? Qu'il fallait parfois revoir toute l'architecture de votre site pour pouvoir faire en sorte que le menu à gauche et le corps fassent toujours exactement la même hauteur tout en restants extensibles ? En tout cas, ça a du travailler les développeurs d'Internet Explorer.

Si l'idée d'exécuter du Javascript depuis les feuilles de style CSS peut laisser certains perplexes, de nombreuses applications pratiques découlent de cette idée. Jugez plutôt sur l'exemple suivant :

	#Menu
	{
		height: expression(document.getElementById('Corps').style.height);
	}

Un petit bout de code très court qui va donner à notre menu exactement la même hauteur qu'à l'élément html portant l'ID #Corps. Selon la façon dont vous avez conçu votre design, cela peut paraître difficile, voire impossible de réaliser une chose similaire avec du CSS simple, tout en faisant en sorte que la hauteur de #Corps soit proportionelle à son contenu. Sympa, non ?

Associées aux sélecteurs CSS (:hover, :active, etc...), les expressions permettent aussi de déclencher des évènements Javascript directement depuis la feuille de style CSS. Par exemple, lors du passage de la souris au dessus d'un élément ou lors d'un clique sur un lien.

Les feuilles de styles ont été pensées pour permettre de séparer complètement le contenu (le texte de votre site, etc.) du design, permettant ainsi à un lecteur d'écran pour personnes malvoyantes de lire uniquement le contenu, sans être gêné par le design, celui-ci étant complètement séparé. Dans cette optique, l'idée des expressions CSS peut paraître assez incongrue, le Javascript n'étant pas conçu pour cette utilisation.

Cependant, beaucoup du Javascript présent sur les pagesWeb est aujourd'hui complètement destiné au design, pour apporter des animations, ou simplement pour combler des manques de CSS. Notez qu'il est, par exemple, impossible avec les CSS de faire une « simple » rotation, d'un texte ou d'une image. C'est pour cette raison que de nombreux sites utilisent du Javascript pour combler ces manques. Par conséquent, il serait tout à fait approprié et logique de placer ce Javascript - justement destiné au design - dans les feuilles de style CSS.

Une technologie réduite à... des bidouillages ?

Malgré les nombreux atouts offerts par les expressions de Microsoft, elles ne sont pas très utilisées sur le Web, mis à part... pour corriger certains problèmes du moteur de rendu d'Internet Explorer ? À ce point précis du billet, je tiens à rappeler que les expressions ne sont comprises que par Internet Explorer.

Ainsi, leur utilisation est donc plutôt difficile pour les Webmestres soucieux de maintenir une compatibilité entre les différents navigateurs Web. Néanmoins, ces expressions sont malgré tout utilisées pour corriger des bogues spécifiques à Internet Explorer, ou pour émuler certaines propriétés CSS (telles que « max-width ») qu'il ne supporte pas, contrairement à ses principaux concurrents. Le code ci-dessous présente la propriété « max-width » pour les navigateurs qui la connaissent, et ajoute une expression pour qu'Internet Explorer 6, qui ne connait pas cette propriété ait un comportement similaire.

	#Menu
	{
		max-width: 200px; /* 
			- Cette valeur sera comprise par Firefox, Safari, Opera, ... */
		width: expression(this.width > 200 ? "200px":this.width + "px") /* 
			- Expression pour Internet Explorer */
	}

Vous l'aurez compris, cette expression n'est donc comprise que par Internet Explorer, à qui elle dit explicitement que la largeur maximale de #Menu est de 200 pixels, alors que les navigateurs tiers tels Opera, Firefox, ou encore Safari, se firont à la propriété max-width et ignoreront tout simplement cette expression qu'ils ne comprennent pas. C'est la principale utilisation d'une technologie offrant pourtant de nombreuses utilités tierces.