Image may be NSFW.
Clik here to view.
Les avantages sont multiples :
- Hormis quelques connaissances basiques en PHP, pas besoin d'apprendre de nouvelle syntaxe pour gérer la CSS, c'est d'une simplicité à l'épreuve des balles,
- Il n'y a rien à installer sur le serveur,
- Comme c'est PHP qui est utilisé, la CSS est créée côté serveur, il n'y a pas de problème de CSS à compiler côté client (avec tous les inconvénients que cela pose),
- Cela permet de garder la maîtrise absolue de ses CSS, le code généré n'obéit qu'à son créateur.
Créer la CSS proprement dite
Le fichier CSS s'appellera donc styles.php, et se présente ainsi :
<?php
header('content-type: text/css');
ob_start('ob_gzhandler');
header('Cache-Control: max-age=31536000, must-revalidate');
// etc.
?>
/* ici vos styles statiques */
L'entête (header) indique que le fichier PHP est bien de type CSS, et les autres permettent la mise en cache, la compression afin que les performances ne soient pas oubliées (en supposant que les fichiers PHP ne soient pas déjà paramétrés pour être mis en cache).
L'appel à la CSS se fera ainsi :
<link href="../layout/css/styles.php" rel="stylesheet" type="text/css" media="all" />Quelques possibilités données par PHP
Une variable pourra s'écrire ainsi :
<?php
$couleur_texte='#fc4022';
?>
body {
color:<?php echo $couleur_texte; ?>;
}
#page {
color:<?php echo $couleur_texte; ?>;
}Supposons qu'il faille un style prévoyant des transitions à reprendre sur divers éléments :
<?php
$transition = '-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;';
?>
img {
<?php echo $transition; ?>
}
/* [...] */
.mabox {
border:1px solid #fff;
<?php echo $transition; ?>
}
On peut même imaginer un tableau contenant les préfixes en début de fichier, et une simple boucle permettra de créer tous les préfixes, vous simplifiant la vie pour ces derniers.
<?php
$tab_prefixes = array('-webkit-','-moz-','-ms-','-o-','');
/** ... **/
foreach($tab_prefixes as $prefix){
echo $prefix.'transition: all 1s;';
}
?>Autre idée, on peut imaginer une fonction se basant sur le tableau des préfixes ci-dessus et générant un dégradé linéaire avec tous les préfixes.
<?php
function linearGradient($prefixes, $xy, $cStart, $cEnd, $pStart, $pEnd) {
foreach($prefixes as $prefix){
echo 'background-image: '.$prefix.'linear-gradient('.$xy.', '.$cStart.' '.$pStart.', '.$cEnd.' '.$pEnd.');';
}
}
$tab_prefixes = array('-webkit-','-moz-','-ms-','-o-','');
?>
div {
<?php linearGradient($tab_prefixes, 'left bottom', '#B8B8B8', '#A8683E', '0%', '87%'); ?>
/** par exemple : background-image: -moz-linear-gradient(left bottom, #B8B8B8 0%, #A8683E 87%); **/
}Note : l'idée n'est pas de réinventer un framework comme SASS ou LESS, juste de montrer quelques possibilités basiques immédiatement utilisables, très facilement créables et qui permettent de gagner du temps.
Autre exemple pratique : un site multilingue
En supposant que l'on ne conserve qu'une CSS, il est possible de passer un paramètre en querystring, ainsi, on pourra savoir dans le fichier quelles propriétés/parties modifier selon le paramètre :
Pour une CSS en langue chinoise :
<link href="../layout/css/styles.php?lang=cn" rel="stylesheet" type="text/css" media="all" />Pour la langue anglaise :
<link href="../layout/css/styles.php?lang=en" rel="stylesheet" type="text/css" media="all" />La CSS peut donc être structurée ainsi :
<?php
if (!empty($_GET['lang'])){
$lang=$_GET['lang'];
}
else {$lang='fr';} // sinon langue par défaut : cocoricoo
?>
#navigation {
height:60px;
<?php
echo ' background:#262223 url(../images/menu-' . $lang . '.jpg) 0 0 no-repeat;';
?>
width:713px;
/* ici les autres propriétés */
}
Autre avantage, comme la mise en cache se fait sur le nom de fichier et la querystring (imaginez que styles.php?lang=cn est différent de styles.php?lang=fr), il n'y a aucun souci en cas de changement de langue durant la navigation.
Autre exemple : imaginons que vous ayez un menu de navigation, certains textes peuvent être très long en allemand ou en russe là où ils peuvent être très courts (2 caractères) en chinois. Selon le positionnement, il est possible d'avoir quelques petits soucis désagréables.
L'utilisation de if peut également permettre d'adapter certaines propriétés de manière très locale afin de pallier à ces petits soucis.
#menuaccess a {
<?php
if ($lang=='ru' OR $lang=='de')
echo ' font-size:80%;';
else
echo ' font-size:90%;';
?>
}Site à fort trafic : des solutions simples
Le principal inconvénient de cette méthode est de mobiliser PHP pour générer la CSS - même si les ressources mobilisées sont très légères - cela peut poser problème dans le cas d'un site à fort trafic où le serveur peut être déjà bien sollicité. Dans ce cas, il faudra sérieusement envisager la mise en cache.
Une simple convention de notation permettra de générer directement les fichiers statiques de vos CSS, par exemple style_<lang>.css. Pour que la mise en cache soit possible à chaque mise à jour des CSS, il suffira de prévoir une date unique qui sera passée en querystring, ce qui donnerait :
<link href="../layout/css/style_fr.css?v=201202231234" rel="stylesheet" type="text/css" media="all" />Conclusion
Pour des problèmes simples ou certains cas bien précis, l'utilisation de PHP pour générer des CSS est une solution pratique, nécessitant peu de connaissances, simple et efficace : la maîtrise des CSS est totale. C'est un juste milieu entre la CSS totalement statique et des frameworks plus évolués.