I. Introduction

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 style, 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.

II. Trois 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 :

II-A. 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 :

Méthode avec la fonction include()
Sélectionnez
<style type="text/css">
    <?php include('/styles.php'); ?>
</style>

II-B. Servir le contenu d'un fichier PHP en tant que "text/css"

La deuxième solution utilise toujours un fichier styles.php, mais cette fois, on le place à l'intérieur de la balise <link> :

Balise link
Sélectionnez
<link rel="stylesheet" href="/styles.php" type="text/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" :

Header PHP de content-type
Sélectionnez
<?php
    header('content-type: 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 :

Header PHP du code HTTP 304
Sélectionnez
<?php
    header('HTTP/1.0 304 Not Modified');
?>

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

Header PHP de cache-control
Sélectionnez
<?php
    header('Cache-Control: max-age=3600, must-revalidate');
?>

Ceci indique le nombre de secondes durant lesquelles la page devra être conservée dans le cache du navigateur, à partir du moment où elle a été demandée.

II-C. 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.

  • Dans le fichier HTML :
Balise link
Sélectionnez
<link rel="stylesheet" href="/styles.css" type="text/css" />
  • Dans le fichier htaccess :
Code de réécriture
Sélectionnez
RewriteEngine on
RewriteRule (.*).css /$1.php

Ou alors, on peut aussi demander au serveur d'interpréter les fichiers .css comme étant des fichiers PHP en rajoutant cette ligne dans un fichier htaccess :

Parsing des .css par PHP
Sélectionnez
AddType application/x-httpd-php .css

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

Pour commencer, voici un récapitulatif des éléments abordés plus haut avec quelques exemples de variables PHP placées dans des tableaux $_SESSION[] afin qu'elles soient disponibles tout au long de la navigation.

  • Le fichier index.php
Exemple d'utilisation : le fichier index.php
Sélectionnez
<?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 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
    <title>Calendrier PHP</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="style.css" media="all" type="text/css" />
    </head>
    <body>
        <div id="container"></div>
    </body>
</html>
  • Le fichier styles.php (ou styles.css avec le fichier htaccess)
Exemple d'utilisation : le fichier style.php
Sélectionnez
<?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']; ?>   
}

IV. 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 en CSS n'est pas une pratique plus répandue que je ne le croyais.