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

Jiří Kosek ml.

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 -- a 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 stránky poněkud chudě. Efekty, které 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řipomene, co to jsou kaskádové styly. Kaskádové styly umožňují pro každý element na webovské 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 zcela odlišná výstupní zařízení. Pokud něco vypadá pěkně a čitelně na obrazovce, nemusí to již tak dobře dopadnou 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í: hlasové 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 problémů. 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 webovské 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 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é: 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.

CSS1 umožňovaly použití kontextové 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 č.).

Kaskádové styly a XML

Zatímco CSS1 byly úzce svázány s jazykem HTML, nyní můžeme CSS2 použít i jako stylový jazyk pro XML (eXtensible Markup Language). Hlavně kvůli XML byly do CSS2 přidány selektory, které umožňují reagovat na obsah atributů.

V blízké době bude velice zajímavé sledovat oblast stylových jazyků pro XML. Dnes totiž existují nejméně tři stylové jazyky, které je možno společně s XML použít. Kromě CSS2 se jedná o DSSSL a XSL.

DSSSL (Document Style Semantics and Specification Language) je poměrně složitý stylový jazyk a proto se asi neuplatní v Internetových aplikacích XML. Jeho výsadní postavení však bude v oblastech s vysokými nároky na typografickou úroveň výstupu. Za pár let se s ním tedy nejspíše setkáme v různých publikačních systémech založených na XML. Na Internetu se může uplatnit jeho podmnožina DSSSL On-line speciálně zjednodušená právě pro potřeby elektronických dokumentů.

Novinkou je XSL (eXtensible Stylesheet Language) stylový jazyk navržený speciálně pro potřeby XML. Vytvořila jej firma Microsoft společně s několika dalšími společnostmi, které se zabývají elektronickým publikováním (např. ArborText). Nyní se čeká na to, jak se k návrhu vyjádří ostatní členové W3C konsorcia.

XSL vychází z DSSSL, ale vše přizpůsobeno potřebám Internetu. Samotný styl XSL se zapisuje v jazyce XML. Zajímavé je, že v XSL lze používat skripty zapsaná v jazyce ECMAScript, což je standardizovaná verze JavaScriptu. Je to o to zajímavější, když si uvědomíme, že Microsoft jinak protlačuje Visual Basic kam to jen jde.

Přestože je XSL teprve v plenkách, již nyní existuje několik programů, které jej podporují. Jednak je to ActiveX komponenta od Microsoftu, která umožňuje zobrazení XML dokumentů zformátovaných podle XSL. Dalším příkladem může být XML Styler od ArborTextu, který umožňuje vytváření XSL stylů bez znalosti syntaxe tohoto jazyka.

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 Communicatorem i Internet Explorerem.

Návrh CSS2 naleznete na adrese http://www.w3.org/TR/WD-css2.

Specifikace CSS2 je mnohem srozumitelnější než její předchůdce CSS1. Pomáhá tomu i velké množství ilustrativních obrázků.