Feuilles de style dynamiques en cascade

Aller à la navigation Aller à la recherche

CSS dynamique, ou DCSS, est un terme générique pour un ensemble de technologies utilisées pour créer des feuilles de style dynamiques, en utilisant une combinaison de n'importe quel langage de programmation côté serveur (comme PHP/ASP/Perl/JSP) et des feuilles de style en cascade (CSS). La première idée de DCSS a été proposée en juillet 2002 par Jori Koolstra, un programmeur néerlandais[1].

DCSS permet de travailler avec des variables en CSS et la réécriture dynamique de code source en CSS. De nombreux systèmes de gestion de contenu ont créé des modules supplémentaires, par exemple Drupal[2], pour gérer le DCSS. Sass et Moins peuvent être employés comme langages de feuilles de style dynamiques.

Exemple en PHP

Généralement, une page web utilisant les feuilles de style en cascade dynamiques est configurée via trois fichiers. Un premier fichier contenant les variables CSS, un fichier .php qui reprend le contenu CSS et la page web pour laquelle le CSS est requis.

Un fichier .dcss ressemble normalement à ceci : <syntaxhighlight lang="html"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

 <head>
   <title>Exemple DCSS</title>
   <style type="text/css">
     <?php
        /* Inclure la feuille de style */
        require_once("sheet.dcss.php");
     ?>
   </style>
 </head>
 <body>
 </body>

</html> </syntaxhighlight>

Ci-après, le fichier .dcss.php inclus. Remarquez qu'un fichier dcss a toujours une extension .php :

<syntaxhighlight lang="php"> <?php

 /* Inclusion du fichier variables */
 require_once("vars.php");
 echo "p";
 echo "{";
 echo "font-family:    \"$FONT_TYPE\";";
 echo "}";

?> </syntaxhighlight>

Et le fichier qui contient les variables pour le fichier dcss.php (souvent nommé vars.php) :

<syntaxhighlight lang="php"> <?php

 $FONT_TYPE = "Courier New";

?> </syntaxhighlight>

Voir aussi

Références

  1. Jori Koolstra, « Dynamic CSS », (version du sur Internet Archive)
  2. ceardach, « Dynamic CSS », Drupal, (consulté le )

Liens externes

Article publié sur Wikimonde Plus

  • icône décorative Portail de l’informatique
  • icône décorative Portail de l’édition numérique