Kouzlo používání kaskádových stylů

Kaskádové styly (CSS) možná definitivně změní váš postoj k tvorbě webových stránek. Pomocí technologie CSS mů...


Kaskádové styly (CSS) možná definitivně změní váš postoj k tvorbě webových
stránek.

Pomocí technologie CSS můžete vytvořit opakovaně použitelný kód, ve kterém je
definován styl webové stránky. Obsahuje informace ohledně typografie a barev,
pozic objektů i jejich chování, a to všechno v jediném souboru. Formáty stylu
vám umožní řídit interpretaci webové stránky, aniž byste narušili její
strukturu. Totéž můžete do určité míry dělat s použitím jazyka HTML, ale CSS
jsou lepší, protože umožňují využít definici uchovanou v jediném souboru pro
celý Web veškeré změny jsou pak velmi jednoduché.
Zvykli jsme si na předpoklad, že struktura stránky včetně odstavců, seznamů,
tabulek a rámečků je závislá na zručnosti jejího tvůrce a jeho ochotě psát
komplexní (a často dlouhý) zdrojový text. Čím složitější je struktura stránky,
tím složitější je potřebný zdrojový kód. Mnoho webových stránek je pouhou
soustavou hluboko vnořených vrstev tabulek, tagů pro písma a oddělovačů řádků,
což se ovšem stává noční můrou v případě požadavku na změnu jejich designu.
Styly umožňují autorům webových stránek docílit stejného výsledku, aniž by
museli použít všechno to chaotické kódování HTML. Každý, kdo už někdy musel
řešit problém s kódem HTML, ví, jak obtížné může být vysledovat chybu.

Malé srovnání
Představte si tagy HTML potřebné k vytvoření záhlaví v úrovni 1 (H1), které
stanoví typ písma pro další pasáž textu a zároveň požaduje, aby text byl sytě
červený, psaný kurzivou a podtržený a aby spočíval na modrém pozadí s
opakujícím se horizontálním vzorem a navíc aby kolem všeho byl rámeček. A
přejete si mít okraj pouze nad horní lištou, na spodní liště nechcete žádný
okraj. K realizaci uvedených požadavků v HTML potřebujete tabulku, požadované
tagy pro ovládání barvy písma, vzhledu písma a podtržení. Ale parametry pro
výplň buněk mají stejnou platnost pro horní i spodní část buňky, takže na svoji
specifikaci okrajů můžete zapomenout.
Naopak CSS vám nabízí plnou kontrolu, bez tagů a bez potřeby zabalit celý
element do tabulky. Pro výše uvedený příklad zde uvádím, jak vypadá kód CSS: H1
{color: maroon; font: italic 1em Times, serif; text-decoration: underline;
background: blue url (titlebg.png) repeat-x; border: 1px solid red;
margin-bottom: 0; padding: 5px;}. Rozhodnete-li se, že se vám modré pozadí
nezamlouvá, můžete několika rychlými ťuknutími na příslušné klávesy změnit
pozadí na zelenou nebo žlutou barvu předpokládám, že už asi máte představu, jak
to funguje. Chcete zadat stejný styl do záhlaví v úrovni 2 ve stejné webové
stránce? Jednoduše změňte položku v prvním řádku na H1, H2. A teď si
představte, o kolik více psaní musí váš autor webové stránky zvládnout, aby
splnil stejnou úlohu v jazyce HTML.

Pozadí
Autory CSS jsou Hakon Wium Lie, ředitel zodpovědný za technologie ve firmě
Opera Software z Osla, a Bert Bos z World Wide Web Consortia ve Washingtonu.
Lie a Bos vybudovali CSS na předpokladu použitelnosti CSS na všech platformách
a použili jednoduché kódy, které jsou precizně popsány a obecně dostupné.
Díky technologii, kterou vytvořili, již nemusíte obcházet nedokonalosti tagů
HTML a využívat nejrůznějších způsobů nesprávného kódování k tomu, abyste
docílili požadovaných efektů. Celý postup je nyní jednoduše a efektivně řízen
na základě formátu stylu. Potřebujete změnit design všech stránek na vašem
Webu? Už nemusíte usilovně měnit jeden kód za druhým pro jednotlivé stránky;
stačí, abyste updatovali své formáty stylu, a zadané změny se replikací zavedou
na všechny požadované pozice vašeho Webu.
Flexibilita formátů stylu nabízí široké využití. Specifikace lze uložit ve
formátu dokumentu, proto je možné vyvolávat jednotlivé styly podle stránek, kde
jsou požadovány. Můžete mít jeden formát stylu volaný domovskou stránkou a
druhý formát stylu volaný všemi ostatními stránkami. Nebo můžete jednoduše
vnořit text CSS do domovské stránky a volat hlavní formát stylu pro všechny
ostatní stránky. Svou webovou prezentaci můžete snadno rozdělit do různých
formátů podle jednotlivých částí, aniž byste přitom narušili celou koncepci.

Několik mráčků
Použití stylů ovšem není odpovědí na všechny vaše problémy. Stále jsou zde
určitá omezení, především ve verzích, které vznikly před uvedením prohlížečů
pro CSS. První prohlížeče, které zkoušely podporovat CSS Netscape Navigator 4.x
a Microsoft Internet Explorer (IE) 3.x podávaly nelogické, nekompletní a někdy
i zcela protikladné výsledky. Řada těchto problémů byla odstraněna ve verzích
IE 4.x a 5.x, v enginu Netscape Gecko a v Opera 3.6. Např. Eric Meyer, autor
knihy Cascading Style Sheets (OReilly & Associates, 2000), používal při
vytváření screenshotů právě Gecko v kombinaci s IE 4.5 a 5.0 pro Macintosh. CSS
umožňuje autorům webových stránek vrátit se k používání HTML pro účely
vytvoření struktury, nikoli pro účely prezentace. Tato možnost, spolu s dalšími
výhodami, jako je vhodná struktura dokumentů pro přechod do prostředí XML, dělá
podle Meyera z CSS nepřekonatelnou technologii. Výhody naprosto jednoznačně
převažují nad nedostatky, které se podle něj časem navíc jistě eliminují.

Technologie CSS ve zkratce
Kaskádové styly CSS (Cascading Style Sheets) představují jednoduchý mechanismus
umožňující autorům webových stránek připojit k dokumentům HTML doplňující
informaci ohledně formátování (písmo, barvy, umístění apod.). Jazyk kaskádových
stylů je dobře srozumitelný a dobře se v něm píše pomocí běžné terminologie
používané v desktop publishingu. Ve srovnání s HTML tagy nabízejí tvůrcům
stránek podstatně širší možnosti designování a možnost snadno znovu využít již
jednou vytvořený kód.
1 0968 / pen









Komentáře
K tomuto článku není připojena žádná diskuze, nebo byla zakázána.