CSS3 – formátování dokumentu pro různá zařízení

7. září 2005

•

Doporučení CSS2 přineslo oproti svému předchůdci možnost cílit styl na zvolené médium (obrazovka, tiskárna a podobně) a také nové vlastnosti použitelné pouze na určitém zařízení. CSS3 v tomto pokračuje a přináší další možnosti, jak dodat alternativní vzhled v závislosti na médiu.

Přesnější popis zařízení

Pro výběr konkrétního média se v CSS2 dala použít pouze klíčová slova představující jednotlivá zařízení. Šlo tak například použít blok stylu pouze pro obrazovku (@media screen {}) nebo importovat daný předpis pouze v případě tisku na tiskárně (@import "print.css" print;). Jistým omezením byla nemožnost definovat dané zařízení přesněji než pomocí těchto klíčových slov.

To se v CSS3 změní, na scénu totiž přicházejí media queries definované ve stejnojmenném modulu Media Queries. Ten se nachází ve stavu kandidáta na doporučení a dá se tedy počítat s tím, že se již příliš měnit nebude. Situace je lehce nepřehledná v tom, že zároveň vzniká modul Media Queries 2, který by měl přinést některé nové možnosti pro popis zařízení. Tento dokument však zatím vůbec není k dispozici, proto v tomto článku budu čerpat pouze z původního modulu.

Dotazy na médium značně rozšiřují možnosti výběru zařízení tím, že berou v potaz i jeho parametry. Jak takový dotaz vypadá, to si ukážeme na následujícím příkladě:

@media screen and (min-width: 1024px)
{
/*styl pro obrazovky s rozlišením alespoň 1024px na šířku*/
}

Dotaz na médium je v tomto případě screen and (min-width: 1024px). Každý takový dotaz začíná typem média (screen) následovaným upřesňujícím výrazem v závorce, který má před sebou logický operátor and. Pokud chceme použít více dotazů na médium najednou, oddělíme je čárkou (která má tedy význam logického operátoru or). V následujícím příkladě bude styl použit pouze v tom případě, že jde o obrazovku širokou nejméně 640px a nejvýše 1024px, nebo o tiskárnu:

V rámci dotazů budeme moci například kontrolovat výšku a šířku zobrazovací plochy, respektive jejich poměr, schopnost zobrazovat barvy a jejich počet, rozlišení a některé jiné hodnoty. Navíc v již zmíněném modulu Media Queries 2 by měly být definovány další parametry.

Koncept dotazů na média se mi zdá správný. V dnešní době se webové stránky začínají zobrazovat na široké škále mobilních zařízení, které se často schovávají za stejným typem média, ačkoli se jedná o zařízení se značně rozdílnými parametry. I proto se přinejmenším dotaz na šířku a výšku zobrazovací plochy bude hodit. Na druhou stranu je smutnou skutečností, že spousta webdesignerů není schopna přidat ani jednoduchý tiskový předpis, který by z dokumentu osekal pro tisk nepotřebné prvky. Proto je otázka, zda si tito „vývojáři“ vůbec všimnou, že mají v rukou tak silný nástroj pro výběr zařízení.

Tisk v novém

Pro reprezentaci jedné stránky stránkového média se v kaskádových stylech používá takzvaný page box, který lze v předpisu vybrat pomocí pravidla @page zastávajícího zde funkci selektoru. V CSS3 je pro toto pravidlo vyhrazen zvláštní modul, Paged Media, nacházející se momentálně ve stavu kandidátského doporučení.

V druhé verzi stylů šlo tomuto boxu nastavit pouze vnější okraje (margin) s poznámkou, že v další verzi doporučení možná půjde nastavit i styl okraje (border) a vnitřní výplň (padding). Což se v třetí verzi stylů skutečně stalo a stránkový box se nyní blíží chováním ke standardním blokům tvořených pomocí blokových elementů.

Zajímavou novinkou je často žádaná možnost využití vnějšího okraje, například pro číslování, záhlaví nebo zápatí dokumentu. Problémem je zvolit mechanismus, který určí, kde přesně se má daná informace v okraji zobrazit. W3C se rozhodlo rozdělit vnější okraj na 16 částí:

Rozdělení vnějšího okraje na 16 částí

Na tyto části lze v rámci bloku @page {} odkazovat pomocí pravidel @top-left-corner, @top-left, @top-center, @top-right, @top-right-corner, @right-top, @right-middle a dalších. Následující styl vloží na každý konec stránky doprostřed její číslo:

@page
{
  counter-increment: pageNr;
  margin-bottom: 2cm;
  @bottom-center
  {
    content: counter(pageNr);
  }
}

Navíc lze nově použít implicitní počítadlo pages, které vždy obsahuje celkový počet stránek. Toto počítadlo je k dispozici na každém stránkovém médiu. V následujícím případě vložíme jako záhlaví název dokumentu společně s celkovým počtem stran a na konec stránky číslo konkrétní stránky. Nastavení se bude lišit pro levé a pravé strany:

@page
{
  counter-increment: pageNr;
  margin-top: 2cm;
  margin-botttom: 2cm;
}
@page :left
{
  @top-left
  {
    content: „název dokumentu (počet stran: “ counter(pages) „)“;
  }
  @bottom-left-corner
  {
    content: counter(pageNr);
  }
}
@page :right
{
  @top-right
  {
    content: „název dokumentu (počet stran: “ counter(pages) „)“;
  }
  @bottom-right-corner
  {
    content: counter(pageNr);
  }
}

Novinkou je také možnost definovat v rámci stránky místa, kam se budou umisťovat plovoucí elementy. Tato oblast se definuje pomocí pomocí pravidla @float-area následovaného jedním z klíčových slov (top, bottom, left, right). Plovoucí element s float: left je umístěn do oblasti @float-area left {}, element s float: top do @float-area top {} a vice versa.

Následující příklad reprezentuje vytvoření oblasti pro levé plovoucí boxy:

@page
{
  @float-area left
  {
    border-right: 1px dotted black;
    max-width: 25%;
  }
}

Na stránce vlevo se tak vytvoří pruh s maximálně čtvrtinovou šířkou, do kterého budou uloženy všechny vlevo plovoucí elementy. Od samotné stránky bude tento pruh oddělen tečkovanou čárou.

Ozvučujeme dokumenty

Konsorcium W3C nezapomnělo ani na vaše uši a hned tři moduly se zabývají zvukovou stránkou dokumentů.

Čtená reprezentace dokumentu

Doporučení CSS2 mimo jiné definovalo typ média aural pro mluvenou reprezentaci dokumentů. V CSS3 se tento typ média považuje za překonaný (deprecated) a je nahrazen typem speech, definovaným v modulu Speech Module (zatím je ve fázi pracovního návrhu).

Tento typ umožňuje nastavit podobné parametry čtení jako jeho předchůdce (druh hlasu, hlasitost, mezery před a za elementy a podobně). Hlavním důvodem, proč je toto nové médium vůbec definováno, je kompatibilita s dalším doporučením z dílny W3C, jazykem SSML (Speech Synthesis Markup Language).

Kombinovaná zařízení

Zcela novým typem média je reader. Jde o zařízení, které čte pomocí hlasového výstupu daný dokument a zároveň jej zobrazuje, ať již na monitoru nebo na jiném zařízení. Při takovém dvojím zpracování dokumentu se musí řešit problémy, kterým nemusíme čelit nikde jinde, jako například synchronizace čteného textu s mluveným, zvýrazňování právě čteného textu a podobně. Tento typ média je pouze hrubým konceptem, modul The CSS ‚Reader‘ Media Type je ve stavu pracovního návrhu.

Přiřazení zvuku elementům

Posledním okruhem, který bych chtěl zmínit, je používání zvukových podkladů na stránce. Sloužit by k tomu měly vlastnosti z modulu Audio, který ovšem zatím není k dispozici. Myšlenkou je přiřadit elementu zvuk, který se bude přehrávat při jeho prosté existenci v dokumentu, nebo jenom při určitém stavu (například při přejetí myší).

Přestože na první pohled jde o užitečné vlastnosti, které by nahradily nynější řešení (například použití flashové komponenty), nejsem si úplně jistý, jestli by současná armáda „takywebdesignerů“ měla do svých rukou dostat takovéto možnosti. Na druhou stranu je ale nutno podotknout, že zařazení těchto vlastností do CSS také znamená, že bude možno všechny zvuky na stránce jednoduše vypnout pomocí vlastního stylu.

Souhrn

V tomto článku jsem se snažil stručně popsat novinky na poli stylování pro různá zařízení. Jak už jsem si jednou v textu postěžoval, je škoda, že jsou některé možnosti (zvláště pak z oblasti upravování dokumentů pro tisk) tak málo využívány, přestože jejich podpora je již nyní relativně slušná. Doufejme tedy, že vylepšením těchto možností v CSS3 dojde i k jejich širšímu aplikování.