CSS2: nové trendy v kaskádových stylech

Uplynulo o něco málo více než rok od doby, kdy byly kaskádové styly první úrovně (CSS1) přijaty jako doporučení W3...


Uplynulo o něco málo více než rok od doby, kdy byly kaskádové styly první
úrovně (CSS1) přijaty jako doporučení W3C konsorcia tedy de facto jako
standard. Poslední verze prohlížečů již podporují většinu vlastností CSS1.
I přesto se však se stránkami, které využívají možnosti stylů, setkáme na
Internetu poměrně zřídka. Je to tím, že ve starších prohlížečích bez podpory
stylů vypadají tyto Weby poněkud chudě. Efekty, kterých lze dosáhnout
jednoduchým a krátkým stylem, se proto do stránek ještě pořád vkládají jako
velké obrázky, jejichž přenos značně zatěžuje přenosovou kapacitu Internetu a
zpomaluje načítaní stránky.
Poněkud paradoxní pak někomu může připadat zveřejnění návrhu nové verze
kaskádových stylů v době, kdy kaskádové styly nemají příliš velkou podporu u
tvůrců stránek. Kaskádové styly druhé úrovně (CSS2) jsou však zcela zpětně
kompatibilní se starší verzí a standardizují nové vlastnosti, jejichž vznik si
již vyžádala praxe.
Než se podíváme na jednotlivé novinky, stručně si ještě připomeneme, co to
kaskádové styly jsou. Jedná se o způsob umožňující pro každý element na webové
stránce definovat mnoho jeho vizuálních atributů barvu, druh použitého písma,
způsob zarovnání apod. Při tvorbě stránek pak pomocí tagů vyznačujeme strukturu
dokumentu konkrétní vzhled jednotlivých elementů je však určen stylem. Kromě
výhod, které přináší oddělení struktury dokumentu od definice vzhledu, přináší
styly úsporu místa a umožňují snadnější modifikace vzhledu stránky nebo celých
skupin stránek dohromady.
Podpora více médií
Sami jistě víte, že obrazovka a tiskárna jsou 2 zcela odlišná výstupní
zařízení. Pokud něco vypadá pěkně a čitelně na obrazovce, nemusí to již tak
dobře dopadnout po vytištění. Příkladem je třeba správná volba řezu písma. Na
obrazovce jsou dobře čitelná bezpatková písma (Arial, Helvetica), pro tisk se
však mnohem lépe hodí patková písma (Times), protože patky přirozeným způsobem
vedou oko čtenáře po řádku z jednoho konce papíru na druhý.
CSS2 umožňují v jednom stylu definovat některé vlastnosti odlišně pro různá
výstupní zařízení. Podporovány jsou následující typy výstupních zařízení:
hlaso-vé syntetizátory, on-line zobrazovače Braillova písma, tiskárny Braillova
písma, malé obrazovky (PDA), tiskárny, slide pro zpětné projektory, obrazovky,
znakové terminály a televizní obrazovky.
Kromě nejběžnější potřeby odlišit způsob zobrazení na obrazovce od tisku je
kladen velký důraz na usnadnění výstupu pro uživatele s různými postiženími a
na podporu zařízení s menší rozlišovací schopností (např. WebTV).
Typ média nemusí být určen jen v kaskádovém stylu. Při připojování stylu k HTML
dokumentu nyní můžeme určit typ média, pro který je styl určen. Prohlížeč sám
zvolí vhodný styl podle toho, zda chceme dokument zobrazit na obrazovce nebo
např. vytisknout.
Podpora médií se stránkovaným výstupem
Při tisku HTML dokumentu musí prohlížeč rozdělit výstup do několika stránek.
Tento úkol vypadá na první pohled jednoduše, ale v praxi přináší mnoho obtíží.
Největším problémem je právě nalezení vhodného místa pro zalomení strany. Jistě
se vám stalo, že se při tisku webové stránky objevil stránkový zlom uprostřed
obrázku, tabulky nebo bezprostředně za nadpisem.
Některé z těchto problémů pomáhají prohlížeči vyřešit právě nové vlastnosti
přidané do CSS2. U každého elementu nyní můžeme specifikovat, zda se před či za
ním stránka musí, může nebo nesmí zalomit. Obvyklé je tedy takové nastavení,
které zakáže zalomení strany za všemi nadpisy a naopak jej před všemi nadpisy
umožní.
Dále můžeme nastavit minimální počet řádků jednoho odstavce na konci nebo na
začátku stránky. Tím lze zamezit vzniku tzv. sirotků a vdov při tisku.
Můžeme nastavit i velikost a orientaci papíru, oboustranný tisk, okraje zvlášť
pro první stranu a pro všechny levé a pravé strany. Stylem lze ovlivnit i tisk
ořezových a pasovacích značek.
Vlastnosti pro hlasové syntetizátory
Hlasové syntetizátory nejsou zatím zcela běžným doplňkem každého počítače, ale
CSS2 pro ně již nabízí celkem dobrou podporu. Pro každý element můžeme nastavit
mnoho vlastností. Vyberu jen některé z nich: velikost prodlev, sílu a tón
hlasu, druh hlasu (muž, žena, dítě), hlasitost, směr odkud hlas přichází atd.
Nastavit lze například i to, zda se bude obsah elementu číst nebo hláskovat. To
je velmi užitečné, zvlášť když v HTML 4.0 existují elementy právě pro označení
zkratek.
Vylepšená práce s fonty, download fontů
Předchozí verze stylů umožňovala poměrně přesně specifikovat druh písma, který
chceme použít pro zobrazení konkrétního elementu. Pokud však daný řez písma
nebyl v systému k dispozici, použil se v podstatě libovolný jiný řez písma.
CSS2 přinášejí v této oblasti mnohá zlepšení.
Pomocí selektoru @font-face lze definovat vlastní řezy písma. U každého řezu
můžeme definovat jednak název písma, pod kterým se bude řez hledat přímo v
systému. Kromě toho lze definovat URL adresu, z které se daný řez může
stáhnout. Protože se dnes používá několik formátů fontů, lze u URL určit
formát, ve kterém je písmo uloženo. Prohlížeč se pak nesnaží stahovat písma ve
formátech, kterým nerozumí.
Největší zajímavostí je však možnost zapsat u každého vlastního řezu základní
charakteristiku, která se skládá z určení rodiny, varianty, stylu, duktusu a
velikosti písma. V charakteristice můžeme navíc určit i sílu vertikálních a
horizontálních tahů písma, sklon a velikost jednotlivých dotažnic. Pokud
prohlížeč nemá k dispozici definovaný řez v systému a ani se mu nepodaří písmo
nahrát z Internetu, použije nainstalovaný font, který svými parametry nejlépe
odpovídá zadané charakteristice. Dosáhneme tak překvapivě dobré věrnosti
zobrazení, i pokud požadovaný font není přímo k dispozici.
Tabulky
CSS2 nově přidávají vlastnosti pro formátování tabulek. Tato část návrhu však
ještě není zdaleka ve finální podobě.
Vlastnosti pro řízení pozice
Vlastnosti pro řízení pozice umožňují pro každý element určit jeho přesnou
polohu na obrazovce. Tento rys již dnes podporují prohlížeče Netscape
Communicator a Internet Explorer, protože je to jeden ze základních kamenů
dynamického HTML.
Kromě pozice lze určit i pořadí elementů, které se překrývají, a tím ovlivňovat
jejich viditelnost.
Selektory
Selektor slouží v kaskádových stylech k určení elementů, na které se budou daná
pravidla stylu aplikovat. V nové verzi stylů byly možnosti selektorů podstatně
rozšířeny.
Již CSS1 umožňovaly použití kontextového selektoru X Y, který platnost pravidla
omezil na elementy Y obsažené v elementu X. Nyní můžeme použít i selektor X >
Y, který pravidlo aplikuje na elementy Y obsažené pouze přímo v elementu X.
Nový pseudoelement X:first-child aplikuje pravidlo pouze na první element
obsažený v elementu X.
Pokud chceme, aby se pravidlo aplikovalo na element Y, který bezprostředně
následuje za elementem X, můžeme použít nový selektor X + Y.
Novinkou jsou selektory, které pracují na základě obsahu atributů. Selektoru
X[z] vyhovují všechny elementy X, které mají na nějakou hodnotu nastaven
atribut z. Pokud chceme pravidlo aplikovat pouze pro určitou hodnotu w atributu
z, použijeme selektor X[z=w]. Poslední nová varianta selektoru má tvar X[z~=w].
Oproti předchozí variantě nyní stačí, aby hodnota atributu obsahovala slovo w.
Automatické číslování
Návrh počítá s tím, že ve stylu půjde definovat několik čítačů. Čítače pak
můžeme využít např. pro automatické číslovaní nadpisů, obrázků nebo tabulek.
Kromě samotného obsahu čítače můžeme před nebo za element připojit libovolný
text (např. "Tabulka č.").
Závěr
O tom, jak rychle se CSS2 stane běžně používanou technologií, rozhodne
především podpora prohlížečů. Již dnes jsou některé z novinek v CSS2
podporovány Netscape Communicatorem i Internet Explorerem.
Návrh CSS2 naleznete na adrese http://www.w3.org/TR/WD css2.
8 0829 / pah









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