HTML & CSS

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 :

[pastacode lang= »php » message= »La fonction include() » highlight= » » provider= »manual »]

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

[/pastacode]

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 :

[pastacode lang= »markup » message= »Appel de la CSS » highlight= » » provider= »manual »]

<link rel="stylesheet" href="/styles.php" type="text/css" />

[/pastacode]

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 :

[pastacode lang= »php » message= »PHP en tant que text/css  » highlight= » » provider= »manual »]

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

[/pastacode]

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 :

[pastacode lang= »php » message= »Mettre les CSS en cache » highlight= » » provider= »manual »]

<?php
    header('HTTP/1.0 304 Not Modified');
?>

[/pastacode]

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

[pastacode lang= »php » message= »Contrôle du cache en PHP » highlight= » » provider= »manual »]

<?php
    header('Cache-Control: max-age=3600, must-revalidate');
?>

[/pastacode]

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 :

[pastacode lang= »markup » message= »CSS servie en CSS en prévision d’une règle de réécriture » highlight= » » provider= »manual »]

<link rel="stylesheet" href="/styles.css" type="text/css" />

[/pastacode]

2. Dans le fichier htaccess :

[pastacode lang= »apacheconf » message= »Parsing des fichier CSS par PHP » highlight= » » provider= »manual »]

RewriteEngine on
RewriteRule (.*).css /$1.php

[/pastacode]

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

[pastacode lang= »php » message= »Exemple de code fonctionnel avec un session PHP » highlight= » » provider= »manual »]

<?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>

[/pastacode]

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

[pastacode lang= »php » message= »Feuille de style dynamique avec PHP » highlight= » » provider= »manual »]

<?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']; ?>
}

[/pastacode]

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.

Publié le par Bruno Bichet