Cela faisait un bon moment que je voyais au milieu des css le mot-clé !important; sans réellement m'y intéresser pour finalement m'apercevoir qu'il constitue une merveilleuse façon de hacker IE6, le tout en respectant les normes w3c.
Sur de gros projets web, vous avez sans doute déjà dû rencontrer des problèmes de styles css qui ne s'appliquaient pas comme vous le désiriez, avant de vous rendre compte que vous appliquiez ce style dans le vent car il était redéfini un peu plus loin, ce dernier écrasant le 1er style.
Pour pallier à ça, je mettais en place beaucoup d'héritage de styles afin de limiter le risque de surcharges css. Le mot clé !important sert justement à prioriser l'application d'un style sur un autre. C'est ainsi que si un attribut est défini avec le mot clé !important en fin de définition et que ce même attribut est redéfini plus bas ou dans une feuille de style externe, il ne sera plus écrasé.
Là où ça devient très bon avec notre cher IE6, éternel démon de l'implémentation xHTML / CSS, c'est que ce bon vieux browser ne connaît pas ce mot-clé. Alors qu'en fait-il ? Il l'ignore pardi ! Nous pouvons donc, à partir du moment où le mot-clé respecte les normes, profiter de cette inconnaissance, pour hacker IE6 :)
Allez un bon petit css est plus efficace qu'un long discours.
html, body, p, form, fieldset, table, {
margin:0;
padding:0;
}
body{
background-color:#FFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}
ol, ul{
list-style: none;
}
div#fakeDiv{
display:block;
width:300px;
height:300px;
background-image:url(../Img/test.png) !important; /* non-sucky browser */
background-image:url(../Img/test.gif); /* IE6 */
background-repeat:no-repeat;
}
Ce qui permet d'offrir une image transparente de très bonne qualité en PNG sur les navigateurs connaissant le mot-clé !important et une de moins qualité en GIF sur IE6 et inférieurs ; le tout sans passer par des <!--[IF lt IE 7]> ou des PNG fix.
Cet exemple est extensible à n'importe quel problème css récurrents sur IE6, notamment les double margin, padding négatifs, transparence, etc.
Un petit script fort utile pour ceux qui en ont marre de faire des feuilles de style dédiées seulement à IE6 uniquement pour des problèmes de transparence png.
Ce script js se charge dans un if relatif à IE6 (et inférieurs) de cette façon :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <!--[if lt IE 7]> <script defer type="text/javascript" src="Public/Scripts/Javascript/Statics/pngfix.js"></script> <![endif]--> </head>
Il permet, sous réserve d'affecter les attributs html width="" et height="" aux images en question, d'appliquer la transparence sur ces dernières. Le script disponible sur le site de l'auteur PNG Fix est le suivant :
var arVersion = navigator.appVersion.split("MSIE");
var version = parseFloat(arVersion[1]);
if ((version >= 5.5) && (document.body.filters))
{
for(var i=0 ; i<document.images.length ; i++)
{
var img = document.images[i];
var imgName = img.src.toUpperCase();
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : "";
var imgClass = (img.className) ? "class='" + img.className + "' " : "";
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' ";
var imgStyle = "display:inline-block;" + img.style.cssText;
if (img.align == "left") imgStyle = "float:left;" + imgStyle;
if (img.align == "right") imgStyle = "float:right;" + imgStyle;
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle;
var strNewHTML = "<span " + imgID + imgClass + imgTitle + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";" + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>";
img.outerHTML = strNewHTML;
i = i-1;
}
}
}
