Des feuilles de style CSS dynamiques avec PHP

par Bruno Bichet (css4design)

Date de publication : 19 dcembre 2008 Dernire mise jour :

Les feuilles de style CSS sont trs pratiques pour sparer le fond et la forme mais il leur manque la possibilit de dclarer des variables que l'on pourrait rutiliser tout au long d'un projet web. Heureusement pour nous PHP est l et nous allons voir comment l'utiliser pour dynamiser nos CSS.

Des feuilles de style CSS dynamiques avec PHP par Bruno Bichet (css4design)

I - Introduction..............................................................................................................................................................3 II - Trois techniques pour ajouter du PHP dans vos CSS.......................................................................................... 3 II-A - Inclure un fichier PHP avec la fonction "include()"....................................................................................... 3 II-B - Servir le contenu d'un fichier PHP en tant que "text/css".............................................................................3 II-C - Utiliser une rgle de rcriture pour transformer les .css en .php............................................................... 4 III - Mettre des variables ou des fonctions PHP dans notre fichier servi comme "text/css"........................................ 4 IV - Pour conclure........................................................................................................................................................5

-2Copyright 2008 - Bruno Bichet. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrts.
http://css4design.developpez.com/tutoriels/css/feuille-de-style-css-dynamique-avec-php/

Des feuilles de style CSS dynamiques avec PHP par Bruno Bichet (css4design)

(1) I - Introduction
Les bonnes pratiques de dveloppement web font leur chemin et l'intgrateur web prend l'habitude de sparer le fond (code HTML) de la forme (feuille de style CSS et Javascript) dans des fichiers distincts pour une saine sparation des pouvoirs et une maintenance aise. Malgr tout, quand je regarde mes feuilles de style, je trouve une palanque de valeurs redondantes ou dpendantes d'autres valeurs. En attendant qu'une prochaine gnration de CSS gre les variables, voici plusieurs manires 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 interprte le code PHP. Pour cela, je vous propose trois mthodes :

II-A - Inclure un fichier PHP avec la fonction "include()"

La premire et la plus simple est tout simplement d'inclure un fichier PHP contenant vos dclarations CSS qui pourront contenir tout le code PHP que vous voudrez l'intrieur d'une balise style : Mthode avec la fonction include()
<style type="text/css"> <?php include('/styles.php'); ?> </style>

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

La deuxime solution utilise toujours un fichier styles.php, mais cette fois, on le place l'intrieur de la balise <link> : Balise link
<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 considr comme du "text/css" : Header PHP de content-type
<?php header('content-type: text/css'); ?>

Comme le fait remarquer Xavier Borderie dans Des CSS dynamiques via PHP, la diffrence avec un "vrai" fichier CSS, c'est que le fichier styles.php ne sera pas plac dans le cache du navigateur et sera charg systmatiquement chaque requte. Pour remdier cela, il propose d'ajouter la ligne : Header PHP du code HTTP 304
<?php header('HTTP/1.0 304 Not Modified'); ?>

-3Copyright 2008 - Bruno Bichet. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrts.
http://css4design.developpez.com/tutoriels/css/feuille-de-style-css-dynamique-avec-php/

Des feuilles de style CSS dynamiques avec PHP par Bruno Bichet (css4design)

Dans le mme esprit, il semble possible d'utiliser les fonctions de Cache-Control comme max-age et must-revalidate : Header PHP de cache-control
<?php header('Cache-Control: max-age=3600, must-revalidate'); ?>

Ceci indique le nombre de secondes durant lesquelles la page devra tre conserve dans le cache du navigateur, partir du moment o elle a t demande.

II-C - Utiliser une rgle de rcriture pour transformer les .css en .php
La troisime solution est identique la deuxime, si ce n'est que le fichier CSS se termine par l'extension .css : un fichier htaccess se charge de de la rcriture des fichiers se terminant par .css en .php. Dans le fichier HTML : Balise link
<link rel="stylesheet" href="/styles.css" type="text/css" />

Dans le fichier htaccess : Code de rcriture

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

Ou alors, on peut aussi demander au serveur d'interprter les fichiers .css comme tant des fichiers PHP en rajoutant cette ligne dans un fichier htaccess : Parsing des .css par PHP
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 rcapitulatif des lments abords plus haut avec quelques exemples de variables PHP places 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
<?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/xhtml1strict.dtd"> -4Copyright 2008 - Bruno Bichet. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrts.
http://css4design.developpez.com/tutoriels/css/feuille-de-style-css-dynamique-avec-php/

Des feuilles de style CSS dynamiques avec PHP par Bruno Bichet (css4design)

Exemple d'utilisation : le fichier index.php

<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
<?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 premire 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 rpandue que je ne le croyais.

-5Copyright 2008 - Bruno Bichet. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrts.
http://css4design.developpez.com/tutoriels/css/feuille-de-style-css-dynamique-avec-php/

Des feuilles de style CSS dynamiques avec PHP par Bruno Bichet (css4design)

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

-6Copyright 2008 - Bruno Bichet. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrts.
http://css4design.developpez.com/tutoriels/css/feuille-de-style-css-dynamique-avec-php/