Des feuilles de style CSS dynamiques avec PHP

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

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>

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" />

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');
    ?>

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');
    ?>

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');
    ?>

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" />

  1. Dans le fichier htaccess :


        RewriteEngine on
        RewriteRule (.*).css /$1.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 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="styles.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)


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

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 standarts 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.

Ressources externes

L’essentiel à connaitre sur la mise en cache des fichiers par le navigateur.

Tutoriel sur l’utilisation de variables PHP dans une feuille de style CSS.

This is an informational document. Although technical in nature, it attempts to make the concepts involved understandable and applicable in real-world situations. Because of this, some aspects of the material are simplified or omitted, for the sake of clarity. If you are interested in the minutia of the subject, please explore the References and Further Information at the end.

Compression de fichiers css js kml xml txt html à l’envoi au navigateur.

Proposition d’un mécanisme de gestion des variables par les CSS par Daniel Glazman et David Hyatt.

Cette technique semble mettre en oeuvre le mécanisme proposé dans le lien ci-dessus.

Script PHP permettant d’automatiser la compression gzip (zlib) pour les fichiers css, js, kml, xml, xsl, txt et html.

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



24 commentaires pour “Des feuilles de style CSS dynamiques avec PHP”

  1. Thoams dit :

    Bonjour Bruno,

    super sympa cet article :) J’utilise régulièrement une autre solution pour interpréter les fichiers CSS par PHP. On peut rajouter cette ligne dans le htaccess : AddType x-mapp-php4 .css

    Ainsi tous les fichiers du répertoire et sous-répertoires seront interprétés par le moteur PHP. Il ne faut donc pas oublier de remplir le header comme tu l’as écrit : header(‘content-type: text/css’);

    J’aime bien cette solution, car les fichier CSS reste en « .css ». Cela est pratique pour la lisibilité du code et également pour la coloration syntaxique.

    Bonne journée, Thoams ;-)

  2. Bruno Bichet dit :

    @Thoams: Décidément, les solutions ne manquent pas pour faire des CSS dynamiques ;) J’imagine que ça fonctionne aussi pour PHP5 avec AddType x-mapp-php5 .css ?

  3. Thoams dit :

    @Bruno : en effet, il faut préciser la version de PHP. La commande fonctionne donc également pour la version 5 avec « AddType x-mapp-php5 .css »

    Comme tu l’avais deviné :)

  4. Josselin dit :

    Ou encore :

    AddType application/x-httpd-php .css

    Ce qui permet de s’affranchir de la version de PHP.

  5. Bruno Bichet dit :

    @Josselin: Merci Josselin, effectivement, cette méthode est plus générique. Bon, maintenant, faut tester toussa ;)

  6. x@v dit :

    moi j’enregistre un nouveau fichier fwrite(); Sa me fait peur vos solutions. Trop de ressources utilisées…

  7. Bruno Bichet dit :

    @x@v :

    Sa me fait peur vos solutions. Trop de ressources utilisées…

    lol, je viens de voir la source de ton site et tu charges une bonne dizaine de scripts js… ;)

  8. x@v dit :

    en faite j’ia un back office qui me permet de changer ma css à l’aide d e formulaire. Et donc à l’envoi du formulaire, je crée une css, police, couleur, style… temps qu’a avoir des variables…

  9. Thoams dit :

    @x@v :

    L’intérêt des variables dans le CSS n’est pas juste pour pouvoir le changer quand on veut, c’est pour améliorer la pérennité du code. Comme par exemple, pouvoir utiliser des variables pour le chemin des images (avec l’attribut background): En décrivant l’emplacement des images avec un chemin absolu et à l’aide d’une variable, tu peux modifier ton architecture, migrer de serveur ou changer de nom de domaine sans te prendre la tête.

    Bonne journée, Thoams ;-)

  10. x@v dit :

    oui effectivement: mais justement j’ai fait un back-office qui me permet de changer ces variables et d’écrire une css que j’enregistre dans un fichier. fwrite();

    de plus j’ai essayé: header(« Content-type: test/css »); j’apelle ma css

    Mais sa ne fonctionne que sous IE ?

  11. Bruno Bichet dit :

    @x@v: Peut-être qu’avec « content-type: text/css » (text vs test) ça marchera mieux ;)

  12. x@v dit :

    En faite j’ai ajouter le charset dans le header pour que sa fonctionne…

  13. Kaelig dit :

    Hello, je vous conseille à tous CSS CACHEER de Shaun Inman : http://www.shauninman.com/archive/2008/05/30/check_out_css_cacheer

    Il m’a fait gagner un temps précieux (surtout au niveau du support des sélecteurs imbriqués, des constantes et de la génération de grilles de colonnage !).

  14. yann dit :

    quelqu’un peut m’expliquer en résumer ? quelle méthode est la mieux?quelles sont les avantages des cette méthode? désolé suis débutant en Php.

  15. Thoams dit :

    Après le dernier commentaire, je dirais que la meilleure méthode est d’utiliser le CSS cacheer : http://www.shauninman.com/archive/2008/05/30/check_out_css_cacheer

    ca permet de faire de garder la logique du CSS (langage de description et non langage métier), et utiliser les constantes et l’héritage de propriété.

    Bonne chance, Thoams ;-)

  16. Kaelig dit :

    Oui justement c’est de CSS cacheer que je parle dans mon article cité plus haut.

  17. […] This post was mentioned on Twitter by br1o les bons tuyaux, Sébastien Grégoire, Patrick Quang Thien, Samuel HECQUET, poupi and others. poupi said: ♺ @br1o: Des feuilles de style CSS dynamiques avec PHP http://j.mp/b2PnL4 #css #php […]

  18. peb dit :

    juste une petite remarque par rapport au addtype pour gérer les .css via php, cela peut alourdir énormément le fonctionnement du serveur web car tous les fichiers css sont parsés via php. il faut savoir qu’un process php est gourmand en mémoire, il faut donc, autant que faire se peut, éviter d’envoyer tout à php via apache :)

  19. […] Des feuilles de style CSS dynamiques avec PHP […]

  20. […] Des feuilles de style CSS dynamiques avec PHP Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ? […]

  21. LEGRAND dit :

    Bonjour,

    moi je viens de tester tout ça mais hélas ça donne rien… quand je regarde le code source, la ligne :

    elle n’apparait pas…

    j’ai pourtant bien mis le .htaccess dans mon dossier « module » avec les références suivantes :

    RewriteEngine on RewriteRule (.*).css /$1.php AddType x-mapp-php5 .css

    et les headers dans le fichier styles_zoomimg.php :

    .frame {width:180px; height:240px; background:url(statue-small.jpg); font-size:1px; margin-left:10px;} .frame a {display:block; float:left; width:5px; height:5px; cursor:crosshair; position:relative; z-index:10;} etc...

    un petit coup de main ?

    je suis sur Google chrome Version 28.0.1500.63 m

    Merci pour vos réponses si y a encore quelqu’un qui traîne dans le coin ^^

  22. LEGRAND dit :

    les balises code ne fonctionnent pas…

    donc les headers :

    la ligne insérée :

  23. LEGRAND dit :

    arf pas grave laissez tomber je vais demander ailleurs…



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site