Poznate zaujimave weblogy?
Zostavuje sa slovenska bloggerska elita pre rok 2008
Minuly rok Vas zaujala, co nove bude teraz?
4. apríl 2006 08.30 WEB
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 :-)
pošli do vybrali.sme.skKomentáre k obsahu príspevku:
Chcete napísať nesúhlasný komentár? Prosím, zvážte nasledovné: je šanca, aby niekto zmenil Váš názor alebo chcete iba trvať na svojom? V prvom prípade sú Vaše slová vítané.
Chcete urážať? Nepíšte sem urážky a invektívy. Každý, kto na týchto stránkach publikuje je automaticky (doplňte vhodný výraz). Takže už to všetci vopred vieme, čo si myslíte a preto sa neopakujte.
-
- A tvoj názor?
