Babylon Design

par Samuel Le Morvan

Chez vous aussi, utilisez un Web de qualité

Tutoriels HTML/CSS

Revigorez vos travaux d’intégration en suivant les préconisations des instances mondiales de l’Internet !

Tutoriels HTML/CSS

Le Hack CSS !important

Un hack CSS qui n’en ai pas vraiment un puisqu’il s’agit d’un argument valide. Il peut servir à différencier Internet Explorer des autres navigateurs ce qui est utile pour corriger les bugs du logiciel de Microsoft.

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 :

Comparaison de rendu

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

Petit test de navigateur :

Le code :

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


Ce que nos lecteurs en disent :

  1. FREUD

    Ah ben voilà, c’est mieux avec les screenshots ;)

  2. Shemu

    Merci tonton freud :)

  3. Jérémie

    Héhé, sympa cette astuce !

  4. slainer68

    bizarrement, Safari navigateur basé sur KHTML/Konqueror ne supporte pas cette balise…

  5. Directeur

    Je me suis permis de mettre un lien, vers votre article. Si cela vous gene, signaler le moi par mail.
    http://www.photoshop-school.org/...

    Cordialement,

  6. Shemu

    No problemo ;)

  7. FREUD

    Tu fais quoi là Shemu ???
    Veux-tu bien aller te recoucher !!!

    Non mais…

    ;)

  8. Rank

    Pour ce qui veulent du PNG24 transparant sur IE c’est par là :
    webfx.eae.net/dhtml/pngbe…

    Un script Java associé avec de la CSS et le tour est joué.
    Le résultat est génial sur tous les Navigateurs.

    @+
    RanK

  9. chris

    je vais essayer avec se systeme cela semble bien fonctionner les gif me posent un probleme je n’arrive pas a gerer l’antialliasing et le png semble un bon compromis seulement si personne utilisait ie :)

  10. Lina

    "Un hack CSS qui n’en ai pas vraiment un puisqu’il s’agit d’un argument valide."
    Ce n’est pas valide W3C ?
    Avertissement : (Level : 2) Redéfinition de la propriété
    C’est normal je suppose ?

  11. amoradyl

    Merci beaucoup pour cette astuce que je ne connaissais pas et qui m’aurait bien aidé avec mes anciens sites :D

    PS : j’adore le test anti-spam… être mauvais en maths n’est pas une tare ^^

    Amoradyl

  12. synergia

    Bonjour,
    Découvert ce site par hazard et bien merci pour nombreuses astuces présentes ici.

    Bon, pour ma part, j’utilise ceci dans le <head> de la page Html :

    <link href="css/mafeuilledestyle.css" rel="stylesheet" type="text/css" />
    <!–[if lt IE 7.]>
    <script defer type="text/javascript" src="javascript/pngfix.js"></script>
    <link rel="stylesheet" type="text/css" href="css/iefix_local.css"/>
    <![endif]–>

    Je déclare d’abord la feuille de style pour les navigateurs conformes, ensuite un test conditionel qui, si le navigateur est IE :
    1- Charge le script de gestion de la transparence des .PNG pour les images qui se trouvent dans le flux du document Html (*)
    2- Charge une feuille de style différente, destinée à corriger les défaillances de IE (**)

    (*) Pour le pngfix voir ici : homepage.ntlworld.com/bob…

    (**) Pour gérer la transparence des images en background déclarés dans la feuille de style :
    .maclasse {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/mon_image.png’, sizingMethod=’crop’);}
    (voir ici pour plus d’infos : msdn.microsoft.com/worksh…

    Voilà, comme ca je règle mon problème de feuilles de styles IE et la tranparence.

  13. Shemu

    Merci Synergia de ta contribution.
    J’ai également écris un petit billet là-dessus.

  14. Samuel

    Apparemment Internet Eplorer 7 comprendrais cette règle à présent. Car le site m’indique que je suis sous Firefox, alors que je suis sous Internet Explorer 7 (pour voir la différence, mais aucune différence.)
    IE fait des progrès …

  15. Beral

    @Samuel : exact, maintenant IE comprend le !important … mais ce n’est pas un progrès puisqu’il continue de mal gérer les CSS. Il va falloir juste trouver un nouveau hack.

  16. Christ Off

    Personnellement, j’utilise les hacks décris ici
    nanobox.chipx86.com/blog/…

  17. Vincent

    Une petite précision cela ne fonctionne plus avec ie7. Alors soyez vigilant en utilisant cette règle.
    @+, vince

  18. stargatejojo

    Ca fonctionne toujours avec IE 7 ?

  19. amine

    je suis un débutant en ce qui concerne le desein et aussi la création des site web, alors pour mon cas gé rien trouver comme solution pour mon site créer avec des feuilles de style que le script pngfix.js mais ce que j’avais comme probleme c’est comment on peu l’appliquer ds le cas de css?

  20. fred

    Pour ie 7 seulement très facile, commencer un déclaration css par *+html ca fonctionne pour moi. Je ne crois pas que ce soit valide mais bof, qd t’a pas le choix :

    *+html .nomdelaclasse { }

  21. Strato

    Ça ne fonctionne plus avec IE7…

  22. Champagne

    Yeah super pratique !

  23. Stifu

    Le mieux, si l’on veut faire clean, c’est souvent d’avoir une ou plusieurs feuilles de style séparées pour IE… Sinon, si c’est juste pour quelques petites exceptions à la volée, un underscore devant les propriétés pour IE6, et une astérique devant les propriétés pour IE6 et 7… C’est ce que je préfère faire.

  24. MTProd

    Afin que IE6 prenne en compte l’argument !important il suffit d’installer ce petit javascript sur votre site :
    dean.edwards.name/IE7/

  25. moOw

    Pour la transparence des PNG sous IE6, y’a surtout aussi les DXImage dans les feuilles de style, et le tout sans Javascript ;)

  26. lover2folie

    Il y a juste une petite question que je me pose, est-ce que ce "hack" fonctionne pour toutes les versions d’ie (y compris la 7) ?

  27. Nico Willot

    Pour refaire fonctionner ce hack sous IE7 il suffit de rajouter "!" à la fin de "!important"

    ex:

    .test {
    width: 100px;
    height: 100px;
    background: #FF0000 !important;/*rouge pour Firefox*/
    background: #00CC00 !important!; /*vert pour IE*/

    }

    Et hop!

  28. Agent 47

    Avec IE8 tout est parfait :):

    Vous utilisez Firefox ou un autre naviguateur comprenant la régle !important.

    Enfin ouf acid2 ^^

Les commentaires sont clos.