Alternativní styly – použití skriptů na straně serveru

21. dubna 2004

•

Tímto článkem zakončím svou sérii pojednání o alternativních stylech. Tentokrát vám ukáži, jak změnit styl stránky pomocí skriptu na straně serveru. Získáte tak kompletní přehled různých možností práce s alternativními styly.

Obě řešení, popsaná v předchozích dvou článcích, využívala již existující element link. První technika předpokládala, že prohlížeč načte obsah množiny těchto elementů a nabídne uživateli příslušné menu, druhá používala uzly, představující tyto elementy, k vypínání a zapínání jim příslušných souborů. Tentokrát ovšem budeme muset začít pěkně od začátku.

Skriptujeme na straně serveru

Řešení na straně serveru funguje přesně naopak než řešení na straně klienta. Do XHTML dokumentu zapíšeme pouze element link pro stálý styl. Další odkazy se budou do dokumentu zapisovat pomocí skriptu na straně serveru (v tomto případě jsem si vybral PHP). Toto řešení se do jisté míry podobá řešení, uvedenému v předchozím článku, v tom, že také využívá cookies.

Každému stylu přiřadíme jméno. Protože nepracujeme vůbec s atributem title elementu link, můžeme si jména vymyslet. Následující výpis kódu představuje funkci, která na základě řetězcového parametru vrací pole obsahující jména příslušných souborů. Množné číslo je v tomto případě na místě, tato funkce je navržena tak, aby jednomu jménu odpovídalo více stylových souborů. Tímto simulujeme sdružování stylů popsané v první článku. Dále definujeme dvě konstanty, číselnou DAYS, představující počet dnů, po které bude platit cookie s názvem stylu, a řetězec BASE, který označuje stav, kdy uživatel chce vypnout úplně všechny styly kromě stálého.

define(„BASE“,“none“);
define(„DAYS“,10);
function getFileName($name)
{
  $ret=array();
  if ($name!=BASE)
  {
    if (!$name) $name=“pref“;
    switch ($name)
    {
      case „pref“: $ret[0]=“pref_style.css“; break;
      case „first“: $ret[0]=“alt_style1.css“; break;
      case „second“: $ret[0]=“alt_style2.css“; break;
      case „third“: $ret[0]=“alt_style3a.css“; $ret[1]=“alt_style3b.css“; break;
    }
  }
  return $ret;
}

Funkce vrací pole $ret[], které je na začátku úplně prázdné. Pokud je funkci předán parametr rovnající se hodnotě konstanty BASE, je toto prázdné pole vráceno. V opačném případě se ještě testuje, jestli nebyl předán funkci prázdný řetězec (to se stane, pokud cookie se jménem stylu neexistuje). Pokud je tomu tak, je do parametru přiřazena hodnota pref (v tomto textu dále předpokládám, že preferovaný styl má jméno pref, vy si to samozřejmě můžete ve svých skriptech změnit). Dále se na rozcestníku switch testuje hodnota $name a pole $ret se plní příslušnými jmény souborů. Ve vašich skriptech se bude tato část pochopitelně lišit, můžete si zvolit libovolná jména a jim příslušející soubory.

Někde v textu stránky se samozřejmě musí objevit odkazy umožňující změnu stylu. V tomto případě (a na stránce index.php) budou vypadat takto:

<a href=“index.php?style=pref“>preferovaný alternativní styl</a>
<a href=“index.php?style=first“>1. styl</a>
<a href=“index.php?style=second“>2. styl</a>
<a href=“index.php?style=third“>3. styl</a>
<a href=“index.php?style=none“>pouze základní styl</a>

Odkazy tedy budou směřovat na stejnou stránku, jenom budou navíc předávat jméno stylu pomocí get proměnné style. Z toho tedy vyplývá, že každá stránka může získat jméno svého stylu prostřednictvím jednoho ze dvou možných zdrojů. Buď jako součást své adresy nebo z cookie. Ke druhé zmíněné možnosti dojde, pokud je stránka spuštěna odjinud než z uvedených odkazů, tedy jí není předána žádná proměnná style. Následující funkce načte jméno stylu:

function loadStyle()
{
  if (isset($_GET[„style“]))
  {
    return $_GET[„style“];
  }
  else
  {
    return (isset($_COOKIE[„style“]) ? $_COOKIE[„style“] : „“);
  }
}

Funkce se nejdříve pokusí převzít proměnnou style z adresy dokumentu. Pokud nebyla takto žádná předána, zkusí ji převzít z cookie. Pokud není hledaná hodnota ani tam, vrátí prázdný řetězec. K tomu může dojít v případě, že cookie neexistuje a uživatel nepřišel na stránku jedním z uvedených odkazů. V tomto případě bude použit preferovaný alternativní styl.

Poslední funkce převezme jméno stylu, vyhledá k němu odpovídající soubory (pomocí již uvedené funkce getFileName()) a zapíše do dokumentu elementy link s odpovídajícím obsahem:

function writeLink($name)
{
  foreach (getFileName($name) as $style)
  {
    echo(„<link href=\“$style\“ type=\“text/css\“ rel=\“stylesheet\“ />\n“);
  }
}

Nyní už potřebujeme pouze krátký kód, který uloží do cookie jméno právě zvoleného stylu. Nezapomeňte, že pokud nepoužíváte output buffering nebo ekvivalentní techniku, tento kód se musí v dokumentu objevit ještě předtím, než váš skript provede jakýkoli výstup do prohlížeče (jinak řečeno, nejlépe je uvést tento kód hned na začátek dokumentu):

if (isset($_GET[„style“]))
{
setcookie(„style“,$_GET[„style“],time()+60*60*24*DAYS,“/“);
}

Toto byl poslední nutný kus kódu, kompletní skript si můžete stáhnout. Stačí jej pak includovat na začátek každé vaší stránky ještě před jakýmkoli výstupem, protože kromě deklarací všech potřebných funkcí obsahuje i zmíněný krátký kód k uložení jména stylu do cookie. Ve svém dokumentu v sekci head použijte funkce následovně:

V hlavičce stránky je uveden stálý styl a další styly jsou zapisovány podle hodnoty jména stylu načtené funkcí loadStyle().

Výhody a nevýhody

Řešení pomocí skriptu na straně serveru má jednu zásadní výhodu oproti řešením uvedeným v předchozích článcích, bude fungovat úplně všude a nemusí se spoléhat na možnosti prohlížeče. Tato výhoda je natolik významná, že z určitého pohledu je toto řešení nejlepší ze všech uvedených. Nevýhodou je, že určitým způsobem podrývá sémantiku dokumentu. Techniky z minulých dílů totiž pracovaly se seznamem stylů, který byl přímo součástí dokumentu v podobě množiny elementů link. V případě řešení na straně serveru vše funguje obráceně. Seznam stylů je definován vně samotný XHTML dokument (v našem případě je definován funkcí getFileName()) a zapisují se pouze vybrané styly.

Úkolem této série článků nebylo pouze nabídnout hotová řešení použitelná k výměně alternativních stylů, ale především porozumět jednotlivým možnostem, jak alternativní styly uživateli nabídnout. Pokud bych si já osobně měl vybrat jedno z nabídnutých řešení, nejspíše bych zvolil klientské skriptování, i přes všechna negativa. Je ovšem možné, že vaše volba bude odlišná, proto doufám, že vám pro ni tyto články poskytly dostatek argumentů.