Des feuilles de style CSS dynamiques avec PHP

Les bonnes pratiques de développement web font leur chemin et l’intégrateur web prend l’habitude de séparer le fond (code HTML) de la forme (feuille de style CSS et Javascript) dans des fichiers distincts pour une saine séparation des pouvoirs et une maintenance aisée. Malgré tout, quand je regarde mes feuilles de styles, je trouve une palanquée de valeurs redondantes ou dépendantes d’autres valeurs. En attendant qu’une prochaine génération de CSS gère les variables, voici plusieurs manières d’ajouter du code PHP dans vos fichiers CSS.

3 techniques pour ajouter du PHP dans vos CSS

Pour inclure des variables ou du code PHP dans une feuille de style, il n’y a pas 36 solutions : il faut s’arranger pour que le serveur interprète le code PHP. Pour cela, je vous propose trois méthodes très largement inspirées par Josselin Willette aka Bisûnûrs :

Inclure un fichier PHP avec la fonction include

La première et la plus simple est tout simplement d’inclure un fichier PHP contenant vos déclarations CSS qui pourront contenir tout le code PHP que vous voudrez à l’intérieur d’une balise style :

<style type="text/css">
    <?php include('/styles.php'); ?>
</style>
La fonction include()

Servir le contenu d’un fichier PHP en tant que text/css

La deuxième solution utilise toujours un fichier styles.php placé cette fois dans une balise link :

<link rel="stylesheet" href="/styles.php" type="text/css" />
Appel de la CSS

Dans le fichier styles.php, il suffit d’ajouter une ligne pour indiquer au navigateur que le contenu doit être considéré comme du text/css :

<?php
    header('content-type: text/css');
?>
PHP en tant que text/css

Comme le fait remarquer Xavier Borderie dans Des CSS dynamiques via PHP, la différence avec un « vrai » fichier CSS, c’est que le fichier styles.php ne sera pas placé dans le cache du navigateur et sera chargé systématiquement à chaque requête. Pour remédier à cela, il propose d’ajouter la ligne :

<?php
    header('HTTP/1.0 304 Not Modified');
?>
Mettre les CSS en cache

Dans le même esprit, il semble possible d’utiliser les fonctions de Cache-Control comme max-age et must-revalidate :

<?php
    header('Cache-Control: max-age=3600, must-revalidate');
?>
Contrôle du cache en PHP

Ceci indique le nombre de secondes durant lesquelles la page devra être conservée dans le cache du navigateur, à partir de l’instant de la requête de cette page.

Utiliser une règle de réécriture pour transformer les *.css* en *.php*

La troisième solution est identique à la deuxième, si ce n’est que le fichier CSS se termine par l’extension .css : un fichier htaccess se charge de de la réécriture des fichiers se terminant par .css en .php.

1. Dans le fichier HTML :

<link rel="stylesheet" href="/styles.css" type="text/css" />
CSS servie en CSS en prévision d'une règle de réécriture

2. Dans le fichier htaccess :

RewriteEngine on
RewriteRule (.*).css /$1.php
Parsing des fichier CSS par PHP

Mettre des variables ou des fonctions PHP dans notre fichier servi comme text/css

Pour commencer, voici un exemple récapitulatif des exemples abordés plus haut avec quelques exemple de variables PHP placées dans des tableaux $_SESSION[] pour être disponibles tout au long de la navigation.

Le fichier index.php

<?php
session_start();
$_SESSION['bg']['body'] = '#00f';
$_SESSION['bg']['container'] = '#0f0';
$_SESSION['bg']['footer'] = '#f00';
$_SESSION['txt']['police'] = '#333';
$_SESSION['txt']['border'] = '#000';
?>
<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
        <title>Calendrier PHP</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="style.css" media="all" />
    </head>
    <body>
        <div id="container"></div>
    </body>
</html>
Exemple de code fonctionnel avec un session PHP

Le fichier *styles.php* (ou *styles.css* avec le fichier *htaccess*)

<?php
header( 'content-type: text/css' );
session_start();
?>
body {
     background: <?php echo $_SESSION['bg']['body']; ?>
}
#container {
    background: <?php echo $_SESSION['bg']['container']; ?>;
    color: <?php echo $_SESSION['txt']['police']; ?>;
    border: 1px solid <?php echo $_SESSION['txt']['border']; ?>
}
Feuille de style dynamique avec PHP

Pour conclure

Si l’on excepte la première solution qui semble un peu cheap, les deux suivantes semblent allier la souplesse du PHP avec le respect des standards du web et la conformité aux bonnes pratiques. Sans oublier les validateurs qui ne devraient rien trouver à redire. Au point que je me demande si l’utilisation des variables PHP en CSS n’est pas une pratique plus répandue que je ne le croyais.