|
...příklad pro jedenáctou část...
Ruku v ruce s masivním rozšiřováním Webu kráčí prohlubování rozporů mezi dvěma
různými pohledy na HTML. První z nich je pohled tradiční, kdy HTML je chápán
jako jazyk pro vyjadřování struktury dokumentů. Proti němu stojí novější
přístup, pohlížející na HTML jako na nástroj pro grafickou úpravu dokumentů,
tedy v podstatě typografický systém.
Pravdu mají samozřejmě oba tábory a stanoviska obou jsou navíc podpořena
praktickými potřebami. Typografické hledisko ocení miliony uživatelů Internetu,
kteří vyžadují pohledné stránky. Naproti tomu jakékoli automatizované
zpracování dokumentů (které provozují třeba populární vyhledávací servery)
vyžaduje strukturální přístup.
Kaskádové definice stylů (Cascading Style Sheets - CSS), navržené a propagované
WWW konsorciem, se snaží překlenout propast mezi oběma tábory. Měly by umožnit
oddělení struktury dokumentu od jeho vzhledu. S jeho pomocí budou vznikat dobře
strukturované dokumenty, u kterých bude mít autor zároveň značné možnosti pro
ovlivnění vzhledu.
V CSS se stránka rozloží na dvě části - vlastní HTML kód vyjadřující její
strukturu a definici stylu. Ta předepisuje, jak mají jednotlivé prvky struktury
vypadat. Tyto dvě části mohou být uloženy společně nebo být rozloženy do dvou
či více souborů. Osobně dávám přednost druhému způsobu. Při vkládání definice
stylu přímo do stránky vznikají problémy s jejich vynecháváním u klientů, kteří
nerozumí CSS, a nevynecháváním u těch ostatních.
Základem definice stylu jsou pravidla ve tvaru
selektor { vlastnost: hodnota;
vlastnost: hodnota; ... }
Selektor určuje, kterého prvku stránky se pravidlo týká. Může být
velmi obecný (např. pro všechny odkazy) i označovat jeden zcela konkrétní
prvek. Seznam vlastností a jejich hodnot pak ovlivní vzhled
prvků, na které se vztahuje selektor. Sortiment vlastností je dán definicí CSS
a budeme se mu věnovat podrobněji v příštím díle seriálu. S každou z nich je
spojen seznam přípustných hodnot a jejich význam. Nastavení určité vlastnosti v
pravidle se označuje pojmem deklarace.
Nejběžnějším a nejjednodušším selektorem je libovolná značka jazyka HTML.
Definované vlastnosti se pak týkají těla zmíněné značky. V definici stylu se
její jméno zapisuje bez obklopujících symbolů < a >. Například
P { text-indent: 10% }
způsobí odsazení textu odstavců o 10% šířky řádku od levého okraje. Chcete-li
předepsat implicitní vlastnosti pro celou stránku, můžete jako selektor použít
značku <BODY> nebo dokonce <HTML>. Bílé pozadí
bychom stránce přiřadili konstrukcí
BODY { background-color: #FFFFFF }
V řadě případů je třeba ovlivnit vzhled prvku jen pokud se vyskytuje v určitém
kontextu, tedy pokud je obklopen jistou značkou. Například se rozhodnete, že
odkazy, které se vyskytnou uvnitř <BLOCKQUOTE> budou mít žluté
pozadí
BLOCKQUOTE A { background-color: #FFFF99 }
V selektoru uveďte sérii značek v tom pořadí, ve kterém mají být vnořeny.
Našemu selektoru vyhoví značka <A>, která se ocitne mezi
<BLOCKQUOTE> a </BLOCKQUOTE>. Klient posuzuje
kontextový selektor tak, že si vytvoří posloupnost značek, které jsou v daném
místě aktivní. Pokud v ní najde všechny prvky selektoru ve správném pořadí,
nastaví požadované vlastnosti. Jestliže budeme mít stránku s následujícím
zdrojovým textem (vynechávám nezajímavé prvky)
<HTML>
<BODY>
<BLOCKQUOTE>
Toto je <STRONG>citace z <A HREF=...>*jiného
textu</A></STRONG>.
</BLOCKQUOTE>
S pozdravem <A HREF=...>**Pavel Satrapa</A>
</BODY>
</HTML>
je v místě označeném hvězdičkou posloupnost aktivních značek následující
HTML - BODY - BLOCKQUOTE - STRONG - A
Jelikož se v ní vyskytuje BLOCKQUOTE a na konci A, pravidlo
bude použito a odkaz bude zobrazen na žlutém pozadí. Nevadí, že mezi požadované
dvě značky se vloudil navíc STRONG. Naproti tomu v místě označeném
dvojicí hvězdiček v posloupnosti chybí BLOCKQUOTE a STRONG.
Pravidlo proto nemá na tento text žádný vliv.
Pokud chcete nastavit stejné vlastnosti několika značkám zároveň, můžete v
selektoru uvést jejich seznam. Typickými kandidáty na skupinové nastavení jsou
nadpisy - značky <H1> až <H6>. Chcete-li je mít
vyvedeny v modré barvě, použijte
H1, H2, H3, H4, H5, H6 { color: blue }
Dosavadní selektory platí vždy pro celou stránku. V praxi ale často
potřebujeme, aby některé její části měly specifické vlastnosti. Například
typické zarovnání textu je na prapor vlevo, avšak podpis potřebujeme zarovnat
na prapor vpravo (tedy k pravému okraji). K řešení tohoto problému slouží v CSS
třídy. Pomocí atributu CLASS, který lze přidat k libovolné značce,
zařadíte její obsah do dané třídy. V CSS selektorech se k názvu značky připojí
tečkou oddělené jméno třídy. Pravidlo se pak vztahuje jen k prvkům uvedené
třídy. Pro náš podpis bychom zavedli třídu "podpis". Na stránku vložíme
<P CLASS=podpis>Pavel Satrapa
a do CSS zařadíme pravidlo
P.podpis { text-align: right; font-style: italic }
Druhou možností, jak odlišit určitý prvek stránky od ostatních, je přiřadit mu
identifikátor. K tomu slouží atribut ID, který opět lze připojit k
libovolné značce. Jeho hodnotou může být libovolný řetězec, pouze musíte
zajistit jeho jednoznačnost v rámci dané stránky. Tentokrát se v CSS selektoru
neobjeví žádná značka - stačí samotný identifikátor. V definici stylu se před
jeho jménem zapisuje křížek (#), aby se jména identifikátorů odlišila
od značek. Stejného efektu jako výše bychom dosáhli pomocí
<P ID=podpis>Pavel Satrapa
a
#podpis { text-align: rigth; font-style:italic }
Doporučuje se individuální identifikátory pokud možno nepoužívat. Myšlence
CSS lépe odpovídají třídy, protože vytvářejí logické kategorie textu a jim
přiřazují určité chování. Kdykoli pak zařadíte část textu do dané třídy, budou
na něj aplikována odpovídající pravidla. V našem případě jsme prostřednictvím
třídy "podpis" popsali, jak má vypadat podpis. Nic nám nebrání, aby se na
stránce objevilo několik textů, spadajících do této kategorie a všechny pak
budou sdílet stejné vlastnosti. Naproti tomu identifikátor říká pouze "tento
text zarovnat na prapor vpravo a zobrazit kurzívou". Chybí v něm jakákoli
logická informace.
Specialitou CSS jsou pseudotřídy a pseudoprvky. Týkají se pouze značek
<A> a <P>. Umožňují popsat prvky, které se
dosavadním mechanismům vymykají. Pro značku <A> zavádí CSS
pseudotřídy link, visited a active. Jejich
prostřednictvím lze definovat odlišné vlastnosti pro odkazy dosud nenavštívené,
již navštívené a pro odkaz právě aktivovaný. Tyto tři kategorie bývají odlišeny
barvou - můžeme použít například
A:link { color: #FF0000 }
A:visited { color: #990000 }
A:active { color: #FFFF00 }
Jak vidíte, na rozdíl od běžných tříd jsou názvy pseudotříd odděleny
dvojtečkou. Pro značku <P> jsou definovány dva pseudoprvky -
first-letter označuje první písmeno a first-line první řádek
odstavce.
Spolupráce stránky a stylu má dvě složky. Tou první je samotný mechanismus
získání definice stylu - jak se WWW klient dostane k pravidlům. Druhou složku
jsme nakousli již v předchozích odstavcích. Zabývá se mechanismy, jak aplikovat
na určitý konkrétní prvek stránky určitý styl.
Je-li definice stylu uložena v samostatném souboru, musí být na stránce
ohlášena. Zajistí to značka <LINK> umístěná v záhlaví stránky
(tedy mezi <HEAD> a </HEAD>). Aby klient poznal,
že se jedná o soubor CSS definic, musí příslušná značka nést atribut
REL=StyleSheet - například takto:
<LINK REL=StyleSheet HREF="/css/color24.css"
TYPE="text/css" TITLE="Styl pro True Color monitory">
HREF jako obvykle obsahuje lokátor souboru. Další parametry jsou nepovinné.
TYPE našuškává MIME typ a TITLE obsahuje slovní popis daného
stylu. Tento způsob je samozřejmě ideální pro styly, které jsou společné více
stránkám - například jednotný styl pro všechny stránky serveru. Klient si jej
uloží do vyrovnávací paměti a při přechodu na jinou stránku má definici stylu
rovnou po ruce. Z příkladu zároveň vidíte, že WWW server by měl definice stylů
odesílat s označením typu text/css.
Druhou možností je zapsat styl přímo do záhlaví stránky jako tělo značky
<STYLE>. Ovšem klient neznající CSS je povinen značku ignorovat
a její tělo (tedy definici stylu) pak zobrazí jako normální text. Proto se
doporučuje uzavřít obsah <STYLE> do komentářových "závorek"
<!-- a -->:
<STYLE TYPE="text/css">
<!--
BODY { background-color: #FFFFFF }
-->
</STYLE>
Ovšem pak začnou někteří CSS znalí klienti pravidla ignorovat (zcela konkrétně
jsem tuto zkušenost utržil s programem Amaya). Jinými slovy se značkou
<STYLE> jsou potíže. Jako vhodnější se mi jeví vysunout definici
do samostatného souboru.
Kromě toho můžete styl předepsat přímo jako součást značky. CSS pro tento
případ zavádí atribut STYLE. Opět jej lze přidat k libovolné značce -
například
<P STYLE="color: red">Pozor!
Jeho hodnotou je pravá strana pravidla - seznam vlastností a jim přiřazených
hodnot. Obdobně jako individuální identifikátory je tato konstrukce spíše
trpěnou než žádoucí součástí CSS a doporučuje se raději se jí vyhýbat.
V některých případech potřebujete aplikovat styl pro část stránky, která není
tělem jediné značky. Abyste nemuseli opakovat tentýž atribut CLASS
například u tří po sobě jdoucích odstavců, přichází CSS se dvěma novými
značkami. Mají jedinou úlohu: slouží k vymezení části stránky, na niž pak lze
použít určitý styl. Liší se svým dosahem. Poměrně známá je značka
<DIV>, která byla přijata do HTML verze 3.2. Typicky v sobě
obsahuje několik HTML prvků - například nadpis a několik odstavců. Je to tedy
značka, stojící z hlediska použití zhruba na úrovni
<BLOCKQUOTE>. Jejím protipólem je <SPAN>, u které
se předpokládá, že její tělo bude součástí odstavce. Bude používána v podobných
případech, jako značky pro změnu písma (<EM>,
<STRONG> a podobně).
Ošidné rozhodování nastane, pokud se na stejný prvek vztahuje několik pravidel.
ta navíc mohou pocházet z různých zdrojů - některá stanovil autor stránky,
některá si nastavil uživatel ve svém klientovi. Pravidla kaskádování určují,
které z konfliktních pravidel se uplatní.
Jeho důležitou složkou je direktiva !important. Pokud je hodnota
některé vlastnosti doprovázena tímto slovem, má vyšší prioritu. Při posuzování
pravidel pak klient postupuje následovně:
- Vyhledá všechny deklarace použitelné pro daný prvek.
- Deklarace s direktivou !important mají přednost před obyčejnými.
- Deklarace na stránce mají přednost před deklaracemi v nastavení klienta.
- Konkrétní deklarace mají přednost před obecnými. Konkrétnost se přitom měří
podle počtu identifikátorů, tříd a značek v selektoru. Nejkonkrétnější jsou
identifikátory. Mají-li obě deklarace stejný počet identifikátorů, posoudí
se počet tříd atd.
- Nerozhodne-li žádné z předchozích kritérií, vítězí pozdější pravidlo.
Mám-li stručně shrnou úroveň podpory CSS v současných WWW klientech, vystačím s
dvěma slovy: nic moc. Pravdou je, že oba nejvýznamnější klienti se dnes již ke
kaskádovým stylům hlásí. V Netscape Communicatoru se jedná o horkou novinku,
která se objevila v jeho třetí betaverzi v březnu 1997. Naproti tomu MS
Internet Explorer zná CSS již od své třetí verze, která se objevila v loňském
roce. Oba programy však mají v implementaci CSS citelné nedostatky.
Svědectvím budiž dnešní příklad. Přikládáme jeho podobu v Netscape
Communicatoru 4.0 beta 3 (obrázek 1) i v
Microsoft Internet Exploreru 3.02 (obrázek 2).
Jak vidíte, MSIE nezná vlastnost background-color. Podporuje sice
obecnější background, ovšem tu si nenechá vnutit ze vkládaného stylu.
Musíte ji zapsat přímo na stránku do značky <STYLE> aby začala
fungovat. NC pro změnu obsah <SPAN> zobrazuje jako samostatný
blok a vkládá před něj i za něj konec řádku. Velmi špatně se také vyrovnává s
ukončováním odstavců. Při použití CSS se vyplácí používat značku
<P> jako párovou, jinak se klient začíná chovat nevyzpytatelně.
Kromě zmíněných dvou největších rivalů na klientském trhu podporují CSS ještě
někteří další. Doufejme, že se v co nejbližší budoucnosti dočkáme kvalitní
implementace kaskádových stylů v co největším počtu klientů, aby se tento
užitečný nástroj prosadil do praxe.
|
