Prepínač štýlov: rozobranie Resolution Dependent Layout

Man in Blue dávnejšie príkladom dokumentoval možnosť prehodenia CSS v závislosti na šírke layoutu.
Študovanie zdrojáku plného Lorem Ipsum môže sťažiť implementáciu.

Postavme si podľa modrého muža svoj vlastný dokument.
Predpokladám, že už máte hotový dokument, jeho layout v štýloch a pripravili ste si aj alternatívny layout pre „široké“ obrazovky.
Váš kód doplňte a pozmeňte v sekcií HEAD približne takto:
<style type=“text/css“ media=“all“>
@import „zakladny-layout.css“;
</style>
<link rel=“alternate stylesheet“ type=“text/css“ href=“siroka-obrazovka.css“ title=“800″ />
<script type=“text/javascript“ src=“event_listeners.js“></script>
<script type=“text/javascript“ src=“resolution.js“></script>
Základný layout máte v zakladny-layout.css a pod ním linkujete ako alternatívny štýl siroka-obrazovka.css pričom pozor na pomenovanie v parametri title – to si zvoľte podľa toho, ako to zmeníte v js skriptoch.
Skript event_listeners.js vyvoláva udalosti pri zmene veľkosti okna (je to preto, aby sme v kóde dokumentu nemuseli vyvolávať explicitné funkcie javascriptu). Samotný kód je v resolution.js a tam si musíte nastaviť vlastné hodnoty šírky pri ktorej sa prehodí CSS. Pozor na zhodu v parametri title alternatívneho štýlu!
V CSS súboroch si už píšte čo chcete a dokument bude v prehliadači reagovať podobne ako v prepínačoch vzhľadov akurát, že sa prepne sám podľa šírky viewportu (okna prehliadača). Takže ked posuniete v mojom príklade šírku nad 800 pixelov, tak sa zmenia farby a boxy sa presunú vedľa seba.
Príklad si môžete teda zobraziť vo svojom prehliadači. Pokiaľ budete meniť šírku, tak nad 800px budú boxy inej farby a pod túto šírku sa zasa zmení farba. To indikuje, že to funguje.
Kód knižníc a CSS:
* event_listeners.js – stiahnite a uložte do súboru s týmto menom (netreba nijako modifikovať),
* resolution.js – stiahnite a uložte do súboru s týmto menom a môžete upraviť podľa toho, čo ste uviedli v title alternatívneho štýlu a zmeňte si hraničnú hodnotu pre prepnutie štýlov,
* normal.css normalny CSS pre šírky do 800px,
* wide.css široký CSS pre šírky nad 800px.
Snáď vám invencia a fantázia dovolí rozpracovať ideu širšie ako je primitívum príkladu.
Pre niektoré layouty nie je nutné používať nič také: pokiaľ sa pohráte s boxami a vlastnosťou float, dosiahnete podobné efekty s rozkladaním boxov do voľnej šírky stránky.
Premisa: pokiaľ používate prepínadlá vzhľadu, tak môžete používať aj toto :-) Váš default pre profesionálnu prácu sa môže slobodne rozšíriť a k základom: media screen, media handheld, media print si pridajte metamedia widescreen a smallscreen :-)