CSS dynamique grâce à PHP : utiliser des cookies pour changer de style

PHP peut donc générer une feuille de style et peut aussi modifier la déclaration des styles en fonction des préférences de l'utilisateur.
Cette page va utiliser des cookies pour mémoriser pendant une minute les couleurs choisies par le visiteur et les utiliser dans une autre page.


Votre navigateur ne semble pas en mesure d'afficher une feuille de style générée par PHP.

Comme vous n'avez pas de cookie, le texte est en noir sur fond blanc.

texte

Choisir une couleur

Le texte
noir blanc bleu foncé bleu clair rouge jaune
Le fond
noir blanc bleu foncé bleu clair rouge jaune

Après avoir effectué une sélection et cliqué sur "Sélectionner" vous pouvez tester celle ci pendant une minute.

Le code

Mettre en place les cookies

Toute méthode est acceptable.
Pour cette page, c'est un formulaire, mais des variables passées dans l'URL, une variable de session ou un accès MySQL peuvent en faire autant.

Nous avons donc besoin de deux variables : $couleurtexte, $couleurfond.
La routine suivante va créer des cookies avec les valeurs qui nous intéressent. Leur durée de vie sera de 60 secondes.

/*Utilisez $_POST plutôt que $_REQUEST avec un formulaire*/
if(isset($_REQUEST['couleurtexte']))
{
setcookie ('couleurtexte', $couleurtexte, time()+60, '/', 'mon_domaine.com', '0');
setcookie ('couleurfond', $couleurfond, time()+60, '/', 'mon_domaine.com', '0');
}
else
{$couleurtexte="#000"; $couleurfond="#FFF";}

Récupérer les valeurs

On retrouve les valeurs en début de page.

if(isset($_COOKIE["couleurtexte"]))
{$couleurtexte=$_COOKIE["couleurtexte"]; $couleurfond=$_COOKIE["couleurfond"];}
else
{$couleurtexte="#000"; $couleurfond="#FFF";}

Affecter les valeurs au style

Ici on modifie div.test grâce à PHP.

<style type="text/css">
<!--
/*<![CDATA[*/
#content div.test{
color:<?php echo $couleurtexte;?>;
background-color:<?php echo $couleurfond;?>;
}
/*]]>*/
-->
</style>

Tant que les cookies sont actifs, le style sera celui qui a été choisi par le visiteur, sinon il trouvera les valeurs par défaut.

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