Stijlstek.nl

Php styleswitcher

Php styleswitcher

Nadat je hebt genoten van de leuke presentatie over CSS i.p.v. tabellen en Christopher Schmitt's 10 redenen om CSS te leren, kun je hieronder mijn styleswitcher vinden. Er zijn er natuurlijk al meerdere in omloop, maar de meeste daarvan maken gebruik van JavaScript. Het nadeel van JavaScript is dat er browsers zijn die daar geen gebruik van maken of moeilijkheden mee kunnen hebben, en dat gebruikers dat kunnen uitschakelen. Om niet afhankelijk te zijn van wat er aan de cliënt kant gebeurt, geef ik dus de voorkeur aan server side scripting, in mijn geval dus PHP.

Ik gebruik hiervoor twee korte scriptjes: één om bij het switchen van stijl een cookie te plaatsen (styleswitch.php), en één om bij het opvragen van de stylesheet het cookie te lezen en de juiste stijl te versturen (style.php). Deze scriptjes staan samen met de verschillende stylesheets in de map /css. In de HTML komt dan iets als dit te staan:

<h2>Kies je stijl</h2> <ul> 	<li><a href="/css/styleswitch.php?style=grijs">Grijs</a></li> 	<li><a href="/css/styleswitch.php?style=blauw">Blauw</a></li> 	<li><a href="/css/styleswitch.php?style=groen">Groen</a></li> 	<li><a href="/css/styleswitch.php?style=oranje">Oranje</a></li> </ul>

En styleswitch.php ziet er dan zo uit:

<?php  $style = $_GET[style]; $bestbefore = strtotime('now + 1 year');  setcookie('style',"$style",$bestbefore,'/'); header("Location: $_SERVER[HTTP_REFERER]");  ?>

Door een geldigheidsdatum van 1 jaar te gebruiken zal de bezoeker ook bij terugkomst zijn of haar gekozen stijl gepresenteerd krijgen. Na het selecteren van de stijl wordt de bezoeker weer teruggestuurd naar de pagina waar hij vandaan kwam, maar deze zal dan de nieuwe stylesheet laden. In die pagina zit gewoon een link naar style.php:

<?php  $charset = "ISO-8859-1";                // define encoding used $defaultcss = "grijs";                  // edit to name default stylesheet $wwwroot = "http://www.example.com";    // edit to conform with domain of site  if(isset($_COOKIE['style'])) { 	$stylesheet = $_COOKIE[style]; 	} else { 	$stylesheet = $defaultcss; 	}  header("Content-Type: text/css; charset=$charset"); header("Location: $wwwroot/css/$stylesheet.css");  ?>

Om te beginnen worden er een paar variabelen vastgelegd: de karakterset (zie headers), de naam van de standaard stylesheet (zonder de bestandsextensie .css) en de domeinnaam waar de site staat. Dan wordt gekeken of er een cookie is, en zo ja dan wordt de voorkeur stijl toegepast, zo nee dan de standaard stylesheet. Tenslotte wordt de browser geïnformeerd welke stylesheet die op moet halen.

print