Des feuilles de style CSS dynamiques avec PHP

Les feuilles de style CSS sont très pratiques pour séparer le fond et la forme mais il leur manque la possibilité de déclarer des variables que l'on pourrait réutiliser tout au long d'un projet web. Heureusement pour nous PHP est là et nous allons voir comment l'utiliser pour dynamiser nos CSS.

Cet article a été publié à l'origine à l'adresse suivante : Des feuilles de style CSS dynamiques avec PHP

Article lu fois.

L'auteur

Bruno Bichet

L'article

Publié le 19 décembre 2008

Version PDF Version hors-ligne

ePub, Azw et Mobi

Liens sociaux

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.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants :

Copyright © 2008 Bruno Bichet. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.