Voici un pré-processeur de CSS destiné aux webmestres qui manipulent sous SPIP 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 :

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 :

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 une variante 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 :

et avec des variantes de survol :

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 :

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

Une autre méthode pour utiliser des CSS imbriqués dans une feuille de style sous forme de squelette (ici, couleur.html) consiste à l’appeler ainsi :

Cette dernière méthode est particulièrement compatible avec la fonction de SPIP qui regroupe différents fichiers CSS dans un même fichier compacté.

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).

Pseudo-styles

La version 1.2 du plugin introduit des pseudo-styles, non standards, permettant de coder facilement des fonctionnalités des CSS (généralement qualifiées de « CSS 3 ») qui demandent habituellement plusieurs lignes de code, voire des codes très farfelus pour assurer une compatibilité maximale pour le webkit (Safari, Chrome), Mozilla, Opera et MSIE.

Ces pseudo-styles, à l’image des raccourcis propres à Mozilla (styles commençant par -moz) ou le webkit (-webkit), commencent ici par le -spip. Il permettent en une seule ligne, assez simple, de produire automatique les différents codes nécessaires à l’affichage cohérent sur les différents navigateurs.

• Opacité

Voici le pseudo-style pour gérer l’opacité :

Ce -spip-opacity est ainsi transformé par le plugin :

À partir d’une seule déclaration (-spip-opacity), on obtient ainsi automatiquement le code fonctionnant sous d’anciennes versions de Safari, sous Mozilla 3.5, sous Chrome et Safari, ainsi que sous Internet Explorer (notez l’utilisation d’un « filtre » MSIE et la valeur d’opacité adaptée.

• Coins arrondis

Le code de base arrondi d’un coup tous les coins :

On peut préciser une valeur pour chacun des coins du pavé :

— Inset

est transformé en :

Évidemment, on abusera de :

pour positionner une boîte exactement sur son contenant.

• Ombre de boîte

La première valeur (3px) est le décalage de l’ombre portée vers la droite. La seconde (2px) est le décalage vers le bas. La troisième (10px) est l’intensité du floutage de l’ombre. La dernière valeur est la couleur.

En mettant les deux premières valeurs à zéro, on obtient assez classiquement un halo autour de la boîte, et non une ombre portée.

• Dégradé

Je n’ai pas trouvé de consensus sur la syntaxe exacte d’un dégradé de fond, aussi je me suis inspiré de ce que propose le W3C, en essayant de faire aussi simple que possible. À noter : les différents navigateurs ont de puissantes particularités, mais la méthode proposée est simple et le rendu est très proche sous Mozilla, Safari, Chrome et... Internet Explorer (même de vieilles versions !).

Le code produit est assez farfelu :

La syntaxe de notre pseudo-style est la suivante :
— « top » l’orientation du dégradé (de haut en bas) ; l’autre valeur possible est « left » (de gauche à droite) ; il n’est pas possible de faire un dégradé en biais (MSIE ne sait pas le faire, et les dégradés verticaux et horizontaux représentent en pratique un bonne partie des besoins) ;
— la première couleur est la couleur de départ (ici, la couleur du haut),
— la seconde est la couleur d’arrivée (ici, en bas).

Pour assurer la compatibilité avec les navigateurs qui ne gèrent pas les dégradés, on pensera à indiquer, dans la feuille de style, la couleur de fond que l’on souhaite. Notez bien : il faut impérative indiquer cette valeur avant le dégradé, sinon on écrase le dégradé :

Important : les couleurs de dégradé doivent être indiquées sous forme hexadécimale « classique » à six lettres (pour la compatibilité du code pour MSIE) ; par ailleurs, l’actuel compacteur de CSS livré avec SPIP est en effet un peu trop « efficace », et transforme les codes couleurs composés de trois paires de lettres identiques (du genre #ff0066 transformé en #f06) d’une façon qui ne permet plus au dégradé MSIE de fonctionner. Si vous utilisez le compactage des CSS (et vous devriez le faire...), choisissez des couleurs qui n’ont pas d’équivalent à trois lettres (tel que #ff0066).

À partir de la version 3.3, on peut utiliser des couleurs roba :

• Fond de bloc semi-transparent

Pour réaliser des fonds de bloc colorés semi-transparents, dans les navigateurs modernes, il suffit de définir la couleur de fond en rgba (on code les 3 composantes de couleurs, suivies d’une valeur d’opacité).

Évidemment, pas sous MSIE.

Le pseudo-raccourci suivant transforme les valeurs pour qu’elles fonctionnent « normalement » en RGBA, et fabriquent le filtre approprié pour MSIE.

On peut aussi utiliser des pourcentages :

Notez bien : n’insérez pas de background-color traditionnel avec ce style, sinon il écrasera l’effet de transparence sous MSIE.

• Transitions

La versions 1.3 du plugin traite les transitions CSS :

Par exemple, pour effectuer une transition sur la couleur du fond, on peut coder ainsi :

• Text shadow

L’ombre portée du texte se code avec -spip-text-shadow.

Son intérêt à limité à une situation (qui n’est cependant pas inutile du tout) : lorsque les décalages horizontal et vertical sont nuls, c’est qu’on souhaite réaliser un halo autour du texte.

Dans ce cas, le plugin insère un code compatible MSIE.

• Compatibilité

D’après mes essais, la compatibilité est assez bonne, y compris avec MSIE. Habituellement, ces effets se dégradent bien, visuellement, lorsqu’ils ne sont pas actifs. On perd des effets de relief, mais la page n’est pas « déformée » (trucs qui dépassent partout) et le texte reste lisible.

Sous MSIE, on pourra être amené à changer l’ordre des différents styles, certains ayant tendance à en désactiver d’autres (il semble par exemple que l’opacité, placée après la dégradé, annule le dégradé).

Les deux choses à surveiller principalement sont :
— la dégradation de l’opacité ;
— la mention explicite d’une couleur de fond avant la définition d’un dégradé de fond.

• Clearfix

On a souvent besoin d’être certain que les « float » sont dégagés à la fin d’un bloc (qui contient, donc des blocs flottants à gauche et/ou à droite). On souhaite éviter d’ajouter un « clear:both » à la suite de ce bloc : on veut que ce soit le bloc lui-même qui contienne l’ordre de libérer les blocs flottants à sa suite.

Pour cela, il existe la méthode dite « clearfix », qui consiste à créer une classe spécifique, .clearfix, que l’on insère dans le code HTML des blocs concernés.

Voir par exemple : http://nicolasgallagher.com/micro-c....

Le plugin CSS imbriqués propose un pseudo-style qui donne le même résultat :

Le gros avantage de cette méthode, c’est qu’il n’est pas nécessaire d’ajouter une classe dans le code HTML de la page : on peut avec ce pseudo-style forcer le comportement de n’importe quelle class sans modification de code HTML.

• Pseudo-styles libres

En dehors des cas prévus ci-dessus, tout pseudo-style commençant par -spip- est automatiquement transformé dans les déclinaisons pour Mozilla, Webkit, MSIE, Opera et en CSS3 « simple ».

Noter que le préprocesseur ne vérifie pas que ces styles existent réellement.

Ainsi,

est transformé en :

@media

Les CSS3 introduisent la notion de @media, qui permet de définir des comportements de classes selon divers critères (support, largeur d’affichage...).

À partir de la version 1.8, le plugin CSS imbriqués est compatible avec ces pseudo-classes définissan les @media. Il introduit de plus une subtilité qui permet de définir les @media à l’intérieur d’une hiérarchie (puisqu’ici, les CSS peuvent-être imbriqués), le plugin reconstituant ensuite des classes de @media correctes (à la « racine » des déclarations), regroupant les différentes définitions d’un même média.

Cela permet de définir localement la variante d’une classe en fonction du média, le plugin regroupant ensuite toutes les variantes de classe d’un même média en fin de fichier.

Par exemple :

devient :

Mise à jour

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

1.1. Les ereg sont remplacés par des mb_ereg (compatibilité PHP 5.3).

1.2. Introduction de pseudo-styles -spip... permettant de créer automatiquement des styles compatibles Webkit, CSS3, Mozilla et MSIE. Tous les mb_ereg sont remplacés par des preg plus classiques.

1.3. Introduction des pseudo-styles pour les transitions CSS.

1.4. Introduction du pseudo-style -spip-background-color.

1.5. Introduction de -spip-text-shadow.

1.6. Introduction de la fonction couleur_rgba($couleur, $alpha) qui permet de fabriquer une couleur RGBA à partir d’un code hexadécimal.

1.7. Introduction de -spip-float: fix; qui permet de faire adopter par n’importe quelle classe le comportement « clearfix » (sans devoir ajouter de classe dans le code HTML).

1.8. Compatibilité avec les @media queries.

1.9. Ajout du comportement PIE.htc, inséré automatiquement dans les pseudo-comportements -spip-border-radius et -spip-box-shadow. Ces deux pseudo-classes fonctionnent donc désormais sous MSIE.

À noter : dans ces deux pseudo-classes, si aucune position n’est indiquée explicitement, le plugin injecte automatiquement une position:relative;, de façon à assurer le bon fonctionnement sous Internet Explorer.

2.0. Gestion des mediaqueries imbriquées. Le plugin « inverse » la structure par la suite.

2.1. Suppression du comportement PIE.htc (et de l’ajout de « position:relative ») : résultat beaucoup trop aléatoire.

2.3. Retour de PIE.htc, mais on peut le désactiver avec :

Si on n’insère pas PIE.htc, le plugin n’insère plus les mentions de position dans les classes pseudo-classes border-radius et box-shadow.

2.4. Tous pseudo-style commençant par -spip- est transformé dans ses équivalents -moz-, -webkit-, -o-, -ms-…

3.0. Compatibilité avec SPIP 3.

3.1 Compatibilité avec les @keyframes. Par cohérence, on pourra utiliser @-spip-keyframes. Dans tous les cas, le plugin fabriquera toutes les versions avec les différents préfixes.

Et pour appeler ces keyframes, utiliser évidemment -spip-animation, qui fabriquera également les versions avec les préfixes nécessaires.

Remarque. Le minifieur de CSS intégré a SPIP n’autorise pas d’intitulé de CSS baptisé « 0% » (il le remplace par « 0 »). Ce qui bloque les keyframes qui commencent par cet intitulé. Le pré-processeur remplace donc automatiquement l’intitulé « 0% » par « from ».

3.3 Possibilité d’utiliser des couleurs rgba dans les gradients.

3.8 Ajour de -spip-inset, qui s’utilise comme le caractéristique CSS insert, mais qui est automatiquement transformé en valeurs de left, right, top, bottom.

Les insertions de fichiers .htc ne sont plus activées par défaut. Si on tient à les utiliser, il faut donc déclarer :