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.
Supposons le flux XML suivant listant un ensemble d'utilisateurs :
<?xml version="1.0" encoding="UTF-8"?> <users> <user> <id>1</id> <login>lo</login> <email>laurent@sillysmart.org</email> </user> <user> <id>2</id> <login>flo</login> <email>florian@sillysmart.org</email> </user> <user> <id>3</id> <login>charly</login> <email>charly@sillysmart.org</email> </user> </users>
Le css suivant :
table.bo_table_visible {
border:1px solid #000;
border-spacing: 0px;
margin-top:10px;
margin-bottom:10px;
}
table.bo_table_visible tr.summary th {
background:#2E2D2D;
color:#E45A49;
}
table.bo_table_visible tr td, table.bo_table_visible tr th {
padding:0 10px;
}
table.bo_table_visible tr.even td {
background-color:#FFF;
color:#000;
}
table.bo_table_visible tr.even:hover td {
background-color:#FF8ABC;
color:#FFF;
}
table.bo_table_visible tr.odd td {
background-color:#DFDFDF;
color:#000;
}
table.bo_table_visible tr.odd:hover td {
background-color:#64B8FE;
color:#FFF;
}
Il vous suffit d'appliquer le script XSL suivant pour appliquer les styles sur votre liste d'utilisateurs :
<!--
- Apply css with XSL
-->
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:php="http://php.net/xsl" version="1.0">
<xsl:output method="xml" encoding="UTF-8" indent="yes" />
<xsl:template match="root">
<html>
<head></head>
<body>
<table class="bo_table_visible">
<tr>
<th>Id</th>
<th>Login</th>
<th>Email</th>
</tr>
<xsl:for-each select="//users/user">
<xsl:variable name="cssClass">
<xsl:choose>
<xsl:when test="(position() mod 2) = 0">
even
</xsl:when>
<xsl:otherwise>
odd
</xsl:otherwise>
</xsl:choose>
</xsl:variable>
<tr class="{$cssClass}">
<td><xsl:value-of select="id" /></td>
<td><xsl:value-of select="login" /></td>
<td><xsl:value-of select="email" /></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Ce qui produira :
| Id | Login | |
|---|---|---|
| 1 | lo | laurent@sillysmart.org |
| 2 | flo | florian@sillysmart.org |
| 3 | charly | charly@sillysmart.org |
