[css] CSS dynamique grâce à PHP
- Auteur :http://css.tests.free.fr Mise à jour :27-01-2007
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 :
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 :
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.
C'est probablement 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.
$UA=getenv("HTTP_USER_AGENT");
if (eregi("MSIE [4-6]|Opera( |/)[4-6]|Konqueror",$UA) && !eregi("Opera( |/)[7-9]",$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
<!--
/*<![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 :
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
Cours en relation :
Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in /home/aidocours/cours.php on line 46