CSS dynamique grâce à PHP

PHP peut générer une feuille de style et, si le navigateur l'accepte, envoyer cette page compressée.
Cette méthode, comme toutes celles qui reposent sur les "bugs" ou sur la détection du navigateur, n'est pas sans risque.

Créer une feuille de style dynamique

Afin de régler un problème lié à l'utilisation d'instructions CSS2 avec Opera 6 et Konqueror nous allons donc créer une feuille de style dynamique qui sera valide.

Dans la feuille css_1page.css, la règle suivante n'est pas correctement interprétée :

#content a{
border:1px solid;
border-color:transparent;
border-bottom-color:#B2CFE9;
}

Pour éviter un mauvais affichage des bords transparents avec MSIE, elle a été modifié ainsi :

* #content a{
border:1px solid #D4E6FE;
}

html>body #content a{
border:1px solid;
border-color:transparent;
border-bottom-color:#B2CFE9;
}

Il est plus difficile d'exclure Opera 5 ou 6 et Konqueror qui eux aussi vont donner un résultat inattendu :

Lien avec une bordure transparente
mal affiché par les navigateurs qui n'interprètent pas CSS2 car il n'est pas géré par la feuille de style.
Ce n'est sans doute pas votre cas.

Nous allons donc renommer css_1page.css en css_dyn_1page.php et ajouter

<?php
header("Content-type: text/css; charset=iso-8859-1");
?>

au début du fichier.

Dans notre feuille de style (ici css_dyn_1page.php) nous allons aussi ajouter quelques instructions PHP pour modifier la règle si le navigateur est Opera 4, 5 ou 6, Konqueror et ôter le filtre qui empêche MSIE de lire la règle.
Nous allons utiliser l'identificateur annoncé par le navigateur.

<?php
$UA=getenv("HTTP_USER_AGENT");
if (preg_match("#MSIE [4-7]|Opera( |/)[4-6]|Konqueror#i",$UA) && !preg_match("#Opera( |/)[7-9]#i",$UA))
{
echo "
#content a{
border:1px solid #D4E6FE;
}
";
}
else
{
echo"
#content a{
border:1px solid;
border-color:transparent;
border-bottom-color:#B2CFE9;
}
";
}
?>

Puis nous pouvons faire la même chose avec toutes les instructions qui posent problème.
Comme avec tout script PHP, rien ne nous empêche de récupérer une information dans un cookie, dans une variable ou une table MySQL...

Le choix de l'identificateur aura donc des conséquences sur une capture de site.

Lier cette feuille de style générée par PHP

Nous allons ensuite remplacer le code :

<link rel="stylesheet" href="css/css1page.css" type="text/css" />

par

<link rel="stylesheet" href="css/css_dyn_1page.php" type="text/css" />

ou bien, afin d'éviter le crash de Netscape 4 ou IE 4, par

<style type="text/css">
<!--
/*<![CDATA[*/
@import "css/css_dyn_1page.php";
/*]]>*/
-->
</style>

Envoyer la page dans un format compressé

Il n'est pas difficile d'envoyer cette page sous une forme compressée.
Il suffit d'ajouter le code suivant au début de notre fichier :

<?php
ob_start ("ob_gzhandler");
header("Content-type: text/css; charset=iso-8859-1");
/*partie facultative*/
header("Cache-Control: must-revalidate");
$utiliser_cache_pendant = 3600 ; //délai en secondes avant expiration
//mettre à 0 si on utilise un cookie ou une variable...
$Expiration = "Expires: ".gmdate("D, d M Y H:i:s",time() + $utiliser_cache_pendant)." GMT";
header($Expiration);
/*fin de la partie facultative*/
?>

Tous les navigateurs n'acceptent pas cette compression mais, à part Netscape 4, ils afficheront la page correctement.

Voilà pour un aperçu des risques et des possibilités avec PHP quand les modules Apache (de compression et de réécriture des noms de fichiers) ne sont pas activés.

Plusieurs pages du site utilisent CSS dynamique avec des variables, cookies ou une session.

W3C XHTML 1.0
W3C CSS
création de pages sans tableaux