Voici un plugin destiné aux web­mestres qui mani­pulent des fichiers CSS par­ti­cu­liè­rement com­plexes, avec des imbri­ca­tions à la chaîne.

Une des dif­fi­cultés des CSS, lorsque l’on com­mence à 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 dis­cri­minées selon les endroits, est que l’on se retrouve alors avec des listes inter­mi­nables 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 enri­chis­se­ments par rapport à la norme, puis à faire passer ces fichiers par un pré-​​processeur qui les trans­forme en fichiers CSS standards.

SPIP propose déjà quelques solu­tions pour aller dans ce sens :
— en passant une feuille de style par le filtre direction_css, on peut l’adapter auto­ma­tiquement aux langues qui s’écrivent de droite à gauche, l’interface étant inté­gra­lement inversée ;
— avec les balises #SET et #GET, si l’on réalise ses styles sous forme de sque­lettes, on a un système de variables très pra­tique (par exemple : définir une seule fois la valeur d’une couleur puis l’utiliser dans plu­sieurs classes ; par la suite, pour changer la couleur de l’ensemble, il suffit d’intervenir uniquement dans la défi­nition de la variable).

Il manque, à mon avis, une autre pos­si­bilité offerte par le pré-​​processeur de Shaun Inman : pouvoir écrire ses défi­ni­tions de classes sous forme imbriquée (nested), pour en cla­rifier la lecture.

C’est l’objet du présent plugin.

Voici un court morceau de code CSS standard :

On peut consi­dérer que ce code est arti­fi­ciel­lement com­pliqué, mais en réalité, quand on entre dans les détails d’une mise en page, on se retrouve rapi­dement avec des sys­tè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éfi­nition, sans répéter la hié­rarchie des intitulés.

Ainsi le code précédent s’écrit :

Il existe une autre sub­tilité : la pos­si­bilité, 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 une variante de la pré­cé­dente (plus sim­plement : on « colle » les deux noms). Voici par exemple une manière de code a.spip_in, a.spip_out :

et avec des variantes de survol :

Notez bien : cette notation n’est pas standard et ne cor­respond pas à la norme des CSS. Il s’agit d’un système de notation qui doit être impé­ra­ti­vement traduit de manière logi­cielle (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 res­pectant la norme : le plugin admet des fichiers tota­lement stan­dards, ou tota­lement imbriqués, ou uti­lisant les deux nota­tions (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 com­plément de ce dernier, en passant le fichier par css_imbriques :

Si vous réa­lisez votre feuille de style sous forme de sque­lette (ma méthode pré­férée), il suffit d’ajouter, en fin de sque­lettes (par exemple « css.html »), la balise :

Notez enfin que ces fonc­tions, 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 dis­pa­raissent (bug à cor­riger pour une pro­chaine version).

Mise à jour

1.0. Accepter les critères sur plusieurs lignes, du style :

1.1. Les ereg sont rem­placés par des mb_ereg (com­pa­ti­bilité PHP 5.3).