Notions de variables en CSS

Malgré des évolutions régulières, et des efforts du côté des navigateurs, le développement de feuilles de styles CSS reste assez frustre. Nous passons notamment beaucoup de temps à copier/coller des valeurs numériques correspondant à des couleurs, des marges, des largeurs … La modification de ces valeurs obligent à de fastidieux chercher/remplacer, ou de long parcours de fichiers. L’idéal serait de disposer de la notion de constante nous permettent d’associer une valeur à un label, puis d’utiliser ce label dans tout le reste des feuilles de styles.
Hors cette notion de constante n’existe pas aujourd’hui, et même la version 3 de ce standard n’inclut pas de telles fonctionnalités. Voici quelques idées pour contourner cette difficulté.

Méthode manuelle

La méthode suivante est extrêmement simple. Elle consiste à inscrire en tête de fichier, dans un commentaire, toutes les critères susceptibles d’évoluer dans la feuille de styles (couleurs de fond, couleurs de bordures, taille, …)

/*
	Orange: #ff6633
	Yellow: #ffcc00
	Gris clair: #eaeaea
	Link: #2361a1
*/

D’un seul coup d’oeil, nous avons l’ensemble des valeurs à modifier. Nous pouvons donc les prendre une à une, et réaliser un Recherche/Remplacement dans tout le fichier CSS.

La méthode est rustique, mais elle évite le parcours des fichiers. Elle reste cependant manuelle, et subsiste le risque d’un remplacement accidentel, d’éléments du fichier qui ne correspondent que partiellement aux critères de recherche.

Utilisation SVN

SubVersion est un outil de Versionning. Il permet globalement de gérer les différentes versions ou branches d’une application en cours de développement, et limite les risques liés au travail en équipe (édition simultanée d’un même fichier par exemple).

SubVersion (en abrégé SVN) possède deux fonctionnalités qui peuvent nous intéresser: la notion de propriété (properties), et la substitution de mots-clés (Keywords substitution).

Globalement, l’opération consiste à

  • Déclarer dans le code source des fichiers CSS, des mots-clés (par exemple $HeaderBorderColor$)
  • D’associer une propriété HeaderBorderColor aux fichiers CSS (par exemple svn propset HeaderBorderColor '#eaeaea' themes/My_Theme/*.css

L’outil effectuera les substitutions de toutes les propriétés associées aux fichiers CSS, au moment d’un commit par exemple.

Je vous renvoie à la documentation de SVN pour des explications plus détaillées.

Cette méthode est très fiable, et rigoureuse. Elle cependant beaucoup plus lourde et contraignante que la précédente. Elle s’adresse à ceux qui travaillent déjà avec SVN, et qui le maîtrisent parfaitement (ce qui n’est pas encore mon cas). Il faut également que le développement soit facilement paramétrable.

Utilisation de PHP

Méthode générale

Autre astuce possible: utiliser quelques lignes de codes PHP. Dans le fichier HTML, l’appel à la feuille de styles se fait habituellement de la façon suivante:

Avec notre méthode, la ligne devient:

Notez bien que nous appelons le fichier style.php à la place du fichier style.css. Le fichier style.php doit ensuite être structuré de la façon suivante:

<!--p
header("Content-type: text/css");
/*  - Definition des variables  - */
$orange = '#ff6633';
$yellow = '#ffcc004';
echo <<<CSS
/*  - Debut de la feuille de styles  - */
h2 {
	color: $orange ;
	font-size: 1.4em;
}
CSS;
-->

Le fichier PHP utilise la syntaxe Heredoc dont vous trouverez des détails ICI, ou LA

Comme vous pouvez le constater, la méthode est très simple. Les deux avantages principaux sont:

  • Elle permet, à moindre frais, de regrouper en tête de fichier, l’ensemble des paramètres de la feuille de styles. Plus besoin de toucher ensuite à la feuille de styles elle-même,
  • Elle ne change pas les habitudes de travail.

La méthode a cependant un inconvénient à ne pas négliger: la feuille de styles style.php est chargée à chaque appel de la page HTML, contrairement au fichier
style.css qui est appelé une fois, puis placé en cache. Si la feuille de styles est légère,
cela ne pose pas de problèmes particuliers. Si elle est plus lourde, ce chargement systématique peut ralentir sensiblement l’affichage des pages.

Une solution de contournement serait d’utiliser deux feuilles de styles: une standard pour les styles figés, et une utilisant l’entête PHP pour les styles « paramétrés ».

Vous trouverez l’article original décrivant cette méthode sur le site de Tedd.

Thèmes WordPress

Pour qu’un thème WordPress soit valide, il doit contenir au moins une feuille de style portant le nom style.css. Avec notre méthode, ce fichier est renommé en style.php.  Pour contourner ce problème, nos pouvons créer le fichier style.css,
contenant uniquement les commentaires minimum (exemple de la documentation)

/*
Theme Name: Rose
Theme URI: the-theme's-homepage
Description: a-brief-description
Author: your-name
Author URI: your-URI
Template: use-this-to-define-a-parent-theme--optional
Version: a-number--optional
.
General comments/License Statement if any.
.
*/

Puis créer le fichier style.php qui contiendra tous les styles comme décrit précédemment.

Conclusion

Aucune des méthodes présentées n’est parfaite. Sur un site de petite taille, la méthode manuelle est certainement la plus recommandée simplement parce qu’elle est la moins lourde (et/ou la plus simple).
Si vous utilisez déjà l’outil Subversion, la méthode 2 n’imposera pas trop de changements dans vos habitudes, et elle s’intègre à votre processus de développement. Pour les autres, la méthode utilisant PHP est très efficace, mais il faut bien vérifier qu’elle n’impacte pas trop les performances du site.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *