Site: plugins SPIP
Prise électrique

Outils pour développeurs

<SPAN CLASS="CAPS">CSS</SPAN> IMBRIQUÉS


11 votes
Version de SPIP
  • SPIP 2.0
  • SPIP 2.1
État : stable
Base de données
  • ? Pas d’accès SQL
Auteur : ARNO*
Langues
  • ? Pas de texte

Ce plugin permet de traiter des CSS imbriqués.

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 :

  1. ul#principal {
  2.         border: 1px solid red;
  3.         width: 200px;
  4.         background-color: #aaaaaa;
  5. }
  6. ul#principal li {
  7.                 color: red;
  8. }
  9. ul#principal li  a {
  10.         color: black;
  11. }
  12. ul#principal li.on {
  13.         background-color: red;
  14.         color: white;
  15. }
  16. ul#principal li.on  a {
  17.         color: #ffaaaa;
  18. }

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 :

  1. ul#principal {
  2.         border: 1px solid red;
  3.         width: 200px;
  4.         background-color: #aaaaaa;
  5.         li {
  6.                 color: red;
  7.                
  8.                 a {
  9.                         color: black;
  10.                 }
  11.         }
  12.         li.on {
  13.                 background-color: red;
  14.                 color: white;
  15.                
  16.                 a {
  17.                         color: #ffaaaa;
  18.                 }
  19.         }
  20. }

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 :

  1. a {
  2.         . .spip_in {...}
  3.         . .spip_out {...}
  4. }

et avec des variantes de survol :

  1. a {
  2.         . .spip_in {
  3.                 ...
  4.                 . :hover {...}
  5.         }
  6.         . .spip_out {
  7.                 ...
  8.                 . :hover {...}
  9.         }
  10. }

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 :

  1. [<link rel="stylesheet" href="(#CHEMIN{monstyle.css}|direction_css|css_imbriques)" type="text/css" />]

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 :

  1. #FILTRE{css_imbriques_decouper}

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. a,
  2. a.spip_in,
  3. a.spip_out {
  4.         text-decoration: none;
  5.         color: #ff0000;
  6. }

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

Pour écrire une critique de ce plugin, vous devez être un rédacteur de ce site.
Écrire un message

Un message, un commentaire ?
  • (Pour créer des paragraphes, laissez simplement des lignes vides.)

Qui êtes-vous ? (optionnel)
  • [Se connecter]

Site: plugins SPIP
Prise électrique
9 votes