Přepínač CSS stylů (PHP skript) na straně serveru

Na Interval.cz vyšel článek, jak na alternativní CSS styly stránek pomocí serverového skriptování. Domnívám se ale, že pro začátečníka je takovýto seriál málo podrobný, obsahuje pár faktických nedostatků, a pro pokročilého programátora je k ničemu. Ten to dávno zná.

V čem je tento skript podstatně lepší:

• funguje i v Internet Exploreru a jeho nadstavbách.
• automaticky generuje formulář, pro volbu a změnu stylu.
• doplňuje textové popisy stylů.
• zajišťuje verzování stylů, nutné pro měnící se weby.
• řeší situaci, kdy v cookie je již neexistující styl.

Nově jsem napsal i třídu styleSwitcher, pro přepínání CSS stylů, je to lepší řešení, podívejte se na ně.

Definice proměnných:

// takto se bude jmenovat cookie se stylem
$cookie = 'csscookie';
// aktualni verze stylu
$version = '001';
// styly - nazvy souboru, bez .css
$cssstyles = 'red,blue,green';
// vychozi styl
$defaultsheet = 'red';
// styly - popis
$cssnames = 'rudá záře,námořník,golf';
// URL ke stylům
$url='http://localhost/css/';

Zde jsme si nadefinovali základní proměnné. V proměnné $cookie je uvedeno, jak se bude jmenovat cookie s nastavením stylu. Pokud tuto proměnnou změníme, všichni uživatelé budou mít výchozí styl. Výchozí styl je v proměnné $defaultsheet. K čemu je proměnná $verze? Představte si, že děláte velký web, který má styly červená, modrá a zelená. Následně změníte layout webu. Jediné zcela funkční řešení, jak prohlížeče donutit, aby CSS obnovily, je tyto soubory přejmenovat. Nicméně, přejmenovávat je na náhodné hodnoty není moc dobré řešení.

Já používám řešení, kdy ke každému názvu CSS souboru přiřadím číslo verze, proměnná $version. Skutečné názvy CSS souborů na serveru tak nejsou jen, jak je definováno v $cssstyles, red, blue, green, ale red001, blue001 a green001. Pokud změníte CSS soubory, změníte proměnnou $version, a soubory přejmenujete na red002, blue002 a green002. Základ souborů zůstává, mění se verze. Pokud s více verzemi nechcete pracovat, nastavte $version=“;

Další proměnné? $cssnames obsahuje definici názvů stylů, tak jak se zobrazí uživateli, a $url cestu k CSS souborům, končící zpětným lomítkem.

Zjištění uživatelem preferovaného stylu

Abychom mohli napsat mírně efektivnější kód, převedeme si proměnné se stylem, a jmény do pole. Na to nám slouží funkce explode().

// promenne dame do pole
static $mystyles = 0, $mynames = 0;
if (!$mystyles){
  $mystyles = explode(',',$cssstyles);
  $mynames = explode(',',$cssnames);
}

Následně zjistím preferovaný styl, a, pokud jej uživatel již má v cookie uložen, zjistím, zda tento styl ještě existuje. Výsledkem je preferovaný styl v proměnné $mycookie.

$mycookie="";
if (isset($_COOKIE[$cookie])){
  $mycookie=$_COOKIE[$cookie]; // style still exists?
  if (!in_array($mycookie,$mystyles)) $mycookie="";
}
if ($mycookie=="") $mycookie=$defaultsheet;

Vypsání meta informací

Do hlavičky souboru zapíšeme informace o aktuálním stylu (stylesheet) a alternativních stylech (alternate stylesheet), včetně jejich slovního popisu.

$i=0;
foreach ($mystyles as $mystyle){
  $curl=$url.$mystyle.$version.'.css'  ;
  if($mystyle==$mycookie) // aktualni styl
    echo "<link rel='stylesheet' type='text/css' href='$curl'". 
      "media='screen,projection' title='".$mynames[$i++]."' />n";
  else  // alternativni styly
    echo "<link rel='alternate stylesheet' type='text/css' ".
      "href='".$curl."' media='screen,projection' title='".$mynames[$i++]."' />n";
}

Formulář

Protože prohlížeče jako Internet Explorer alternativní styly nepodporují, musíme vytvořit rovněž formulář, který uživateli nabídne veškeré existující styly, označí ten aktivní, a umožní tuto volbu odeslat a uložit v cookies. Po odeslání formuláře je potřeba provést redirect, přes header(‘Location:’), kvůli principu fungování cookies, jsou totiž načítány při zahájení HTTP relace.

$serverurl = "http://".$_SERVER['SERVER_NAME'].
$_SERVER['REQUEST_URI'];
echo "<form id='cssswitch' method='post' action='$serverurl'>n";
echo "<div><fieldset><legend>Styl</legend>n";
echo "<select name='cssselected'>n";
$i=0;
foreach ($mystyles as $mystyle){
  if( $mystyle == $mycookie) $deff="selected='selected'"; else $deff="";
  echo "<option value='$mystyle' $deff id='opt".strval($i)."'>".$mynames[$i]."</option>n";
  $i++;
}
echo "</select>n";
echo "<input type='submit' name='submitcss' value='Zmenit styl' />n";
echo "</fieldset></div></form>n";

Uložení cookie

Co nám zbývá? No, musíme, při redirectu, data z formuláře uložit, jinak by uživatelova volba nebyla zaznamenána. Jak na to? Otestujeme, zda došlo k odeslání formuláře a uložíme volbu metodou setCookie().

if ( isset($_POST['submitcss']) ) {
setCookie($cookie,$_POST['cssselected'], time()+36002430,'/');
$serverurl = "http://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'];
header("Location: $serverurl");
$url = htmlspecialchars($url);
die("Redirected: <a href="$serverurl">$serverurl</a>");
}

Jak tento kód používat v XHTML / PHP?

Příklad následuje:

<?php include('css.php');
CSS('SAVE') ?> <!-- uložení cookie -->
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'>
<html><head>
<?php CSS('META') ?> <!-- vypsání stylesheets -->
</head><body>
<?php CSS('SELECT') ?> <!-- formulář pro výběr -->
</body></html>

Celý zdrojový kód si můžete rovněž stáhnout v souboru css.php.txt.