Personnaliser les CSS de l’espace privé

Lorsqu’un plugin veut personnaliser, modifier ou enrichir les styles de l’espace privé, il doit définir un fichier squelette définissant les CSS requises et nommé prive/style_prive_plugin_[prefixeplugin].html (ou [prefixeplugin] est le préfixe du plugin).

Ce fichier squelette doit déclarer un cache long adapté aux CSS (car elles ne bougent pas) et les headers. Exemple : le fichier style_prive_plugin_medias.html du plugin medias commence par :

#CACHE{3600*100,cache-client}
#HTTP_HEADER{Content-Type: text/css; charset=utf-8}
#HTTP_HEADER{Vary: Accept-Encoding}

Variables CSS

À partir de SPIP 4, il est possible et même recommandé d’employer des variables CSS dans les styles de l’espace privé des plugins [1].

Ainsi, on écrira :

.selecteur {
    color: var(--spip-color-theme-light);
}

À la place de :

.selecteur {
    color: #ENV{claire};
}

Variables à disposition

Le noyau met à disposition une série de variables que l’on peut réutiliser, elles sont toutes préfixées par « spip- ».

Voici les principales variables à connaître :

Variable Description
spip-color-theme La couleur d’accent choisie par l’utilisateur⋅ice.
spip-color-theme-[light|lighter|lightest] Variations claires de la couleur d’accent
spip-color-theme-[dark|darker|darkest] Variations sombres de la couleur d’accent
spip-color-theme--h Donne la teinte de la couleur d’accent
spip-color-theme--s Donne la saturation de la couleur d’accent
spip-color-theme--l Donne la luminosité de la couleur d’accent
spip-color-gray Un gris neutre.
spip-color-gray-[light|lighter|lightest] Variations gris clair
spip-color-gray-[dark|darker|darkest] Variations gris sombre
spip-spacing-y Donne une mesure de référence pour l’espacement vertical des éléments. On peut s’en servir pour les marges inférieures, etc.
spip-spacing-x Donne une mesure de référence pour l’espacement horizontal des éléments. Elle peut être utile pour les gouttières des colonnes, etc.

On peut trouver la liste complète des variables CSS du noyau dans l’inspecteur des navigateurs en filtrant les styles CSS avec « --spip- », cependant les autres variables sont destinées à un usage interne et peuvent être amenées à évoluer.
Il est recommandé de s’en tenir à la liste ci-dessus dans les styles des plugins.

Le basculement vers des variables CSS dans les styles du privé est un travail en cours, cette liste est amenée à être complétée par la suite.

Déclarer des variables

Lorsque des plugins déclarent leurs propres variables CSS pour le privé, il faut veiller à ne pas provoquer de téléscopages en utilisant des noms trop génériques.

Aussi il est conseillé de préfixer ces variables avec le préfixe du plugin.

Exemple avec le plugin Compagnons :

:root {
    --compagnon-border-width: 2px;
}

Notes

[1L’objectif à terme est de basculer vers des feuilles de styles CSS statiques à la place de squelettes SPIP

Auteur JLuc, tcharlss Publié le : Mis à jour : 19/03/22