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

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

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="#000000"; $couleurfond="#FFFFFF";}

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="#000000"; $couleurfond="#FFFFFF";}

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.

Des exemples d'utilisation de CSS dynamique avec des variables, cookies ou une session sont disponibles sur le site consacré à CSS.