J’ai vu pour la première fois cette règle CSS en farfouillant les feuilles de styles des participants à CSSZenGarden notamment sur la skin This is Cereal de Shaun Inmande. La particularité de celle-ci est que l’affichage est différent suivant si l’on navigue avec IE ou Firefox.

Cette règle s’applique à tout les attributs CSS. Elle permet à l’attribut auquel il est ajouté de prendre le pas sur tous les mêmes autres attributs qui pourraient se trouver à l’intérieur de la même class ou du même id. En théorie, cette règle a été instaurée pour créer une balance entre la feuille de style « auteur » et et la feuille de style « utilisateur ». Pour plus de détails théoriques consultez la doc CSS du W3C à ce sujet.

En pratique, Internet Explorer ne comprends pas cette règle, il l’ignore complètement contrairement à tout bon navigateur comme FireFox (cliquez ici pour télécharger sans plus attendre ce magnifique logiciel). En d’autres mots vous pouvez grâce à !important afficher un élément complètement différemment suivant un navigateur. Voici un petit code offrant une interprétation différente suivant le navigateur :

[css] div.maclass {    border:1px solid #F00 !important;    border: 5px outset #00F; }

En CSS, si un attribut est répété deux fois au sein d’une même class ou id c’est le dernier nommé qui sera appliqué. Dans le code ci-dessus, !important indique que peu importe si un attribut est répété, celui appliqué sera celui qui contient la règle !important. Ainsi ce petit code affichera sur IE une <div> avec une bordure bleue embossée de 5px et sous FireFox une <div> avec une bordure rouge plate de 1px.

Attention tout de même, cette petite astuce n’est pas destinée à créer des feuilles de styles uniques criblées de !important ayant pour but d’éviter la multiplication des feuilles de styles. Utilisez plutôt ceci pour corriger les petits bugs d’Internet Explorer.

Personnellement, j’utilise cette règle pour corriger l’horrible interprétation de la transparence des images PNG par IE. Si vous utilisez FireFox, vous avez peut-être vu que mon site était légèrement transparent grâce aux PNG. Seulement, si j’avais laissé les PNG, avec Internet Explorer vous auriez sûrement vomis en visitant mon site ! Ainsi, grâce à !important, IE ne « voit » pas des PNG mais des GIF. Ce qui rend le site plus présentable mais pas transparent ! Pour illustrer ceci, voici la comparaison entre le rendu sous Photoshop et le rendu suivant le navigateur :

Finalement, pour la déconne nécessaire et obligatoire, un petit test de navigateur :

Le code :

[css] div.maclass {    background-image:url(firefox.gif) !important;    background-image:url(ie.gif);    background-repeat:no-repeat; }