- Le plugin « CSS imbriqués »
[SPIP 2.0] Voici un plugin destiné aux webmestres qui manipulent des fichiers CSS particulièrement complexes, avec des imbrications à la chaîne.
Une des difficultés des CSS, lorsque l’on commence à entrer dans les plus petits détails de l’interface d’un site Web et que l’on veut donc créer des classes très discriminées selon les endroits, est que l’on se retrouve alors avec des listes interminables de classes aux noms de plus en plus longs.
Une idée qui circule sur le Web (par exemple sur le site de Shaun Inman) consiste à écrire ses styles selon une méthode contenant des enrichissements par rapport à la norme, puis à faire passer ces fichiers par un pré-processeur qui les transforme en fichiers CSS standards.
SPIP propose déjà quelques solutions pour aller dans ce sens :
— en passant une feuille de style par le filtre direction_css, on peut l’adapter automatiquement aux langues qui s’écrivent de droite à gauche, l’interface étant intégralement inversée ;
— avec les balises #SET et #GET, si l’on réalise ses styles sous forme de squelettes, on a un système de variables très pratique (par exemple : définir une seule fois la valeur d’une couleur puis l’utiliser dans plusieurs classes ; par la suite, pour changer la couleur de l’ensemble, il suffit d’intervenir uniquement dans la définition de la variable).
Il manque, à mon avis, une autre possibilité offerte par le pré-processeur de Shaun Inman : pouvoir écrire ses définitions de classes sous forme imbriquée (nested), pour en clarifier la lecture.
C’est l’objet du présent plugin.
Voici un court morceau de code CSS standard :
ul#principal {
border: 1px solid red;
width: 200px;
background-color: #aaaaaa;
}
ul#principal li {
color: red;
}
ul#principal li a {
color: black;
}
ul#principal li.on {
background-color: red;
color: white;
}
ul#principal li.on a {
color: #ffaaaa;
}
On peut considérer que ce code est artificiellement compliqué, mais en réalité, quand on entre dans les détails d’une mise en page, on se retrouve rapidement avec des systèmes d’héritages beaucoup plus complexe.
L’idée de la méthode des CSS imbriqués est de saisir une classe qui dépend d’une autre classe à l’intérieur de sa définition, sans répéter la hiérarchie des intitulés.
Ainsi le code précédent s’écrit :
ul#principal {
border: 1px solid red;
width: 200px;
background-color: #aaaaaa;
li {
color: red;
a {
color: black;
}
}
li.on {
background-color: red;
color: white;
a {
color: #ffaaaa;
}
}
}
Il existe une autre subtilité : la possibilité, dans une classe imbriquée, de faire précéder le nom de la classe imbriquée par un point suivi d’un espace ; cela indique que cette classe est dérivé de la précédente (plus simplement : on « colle » les deux noms. Voici par exemple une manière de code a.spip_in, a.spip_out :
a {
. .spip_in {...}
. .spip_out {...}
}
et avec des variantes de survol :
a {
. .spip_in {
...
. :hover {...}
}
. .spip_out {
...
. :hover {...}
}
}
Notez bien : cette notation n’est pas standard et ne correspond pas à la norme des CSS. Il s’agit d’un système de notation qui doit être impérativement traduit de manière logicielle (par le présent plugin) pour qu’un fichier CSS standard soit envoyé au visiteur.
Remarque : l’utilisation du plugin ne vous interdit pas d’utiliser la notation d’une manière respectant la norme : le plugin admet des fichiers totalement standards, ou totalement imbriqués, ou utilisant les deux notations (la méthode imbriquée n’étant qu’une extension de la norme).
Pour que ce plugin traite votre fichier CSS, il faut l’utiliser de la même façon qu’on utilise direction_css, ou en complément de ce dernier, en passant le fichier par css_imbriques :
[<link rel="stylesheet" href="(#CHEMIN{monstyle.css}|direction_css|css_imbriques)" type="text/css" />]
Si vous réalisez votre feuille de style sous forme de squelette, je n’ai pas trouvé de méthode idéale. Cette que j’adopte généralement, c’est d’insérer directement le code des CSS dans tous mes fichiers :
<style type="text/css">
[(#INCLURE{fond=perso}|css_imbriques_decouper)]
</style>
Notez enfin que ces fonctions, contrairement à direction_css, ne traitent pas les @import présents à l’intérieur des fichiers CSS. Dans la version actuelle, il y a des chances que ces @import disparaissent (bug à corriger pour une prochaine version).
