Média pro CSS

Schopnosti jednotlivých WWW klientů (prohlížečů) se liší, a to někdy dost radikálně. Stačí si uvědomit, že stránky si můžete prohlížet na běžném PC, počítači do ruky s malinkatým displejem, tisknout na tiskárně, nebo je může předčítat čtečka s hlasovým výstupem.

Prostřednictvím médií můžete přizpůsobit prezentaci vlastnostem klienta a zajistit, že stejné stránky (a totožným HTML) kódem budou vypadat jinak na obrazovce a jinak třeba při tisku. Funguje to tak, že účinnost některých pravidel můžete omezit jen na vybraná média.

Volba médií

Pro omezení působnosti pravidel máte na výběr tři možné cesty:

1. Atribut media v prvku <link>. Například konstrukce

   <link rel="stylesheet"
         media="print" href="/css/protisk.css" />
   

   způsobí, že pravidla obsažená v souboru /css/protisk.css budou uplatněna jen při tisku dotyčné stránky.

2. Uvedení médií v pravidle @import. Toto pravidlo umožňuje vkládat do CSS předpisu pravidla z určeného souboru. Jestliže za adresou souboru uvedete médium, budou pravidla ze souboru uplatněna jen pro ně, stejně jako v předchozím případě. Podobného efektu jako výše bychom proto dosáhli pravidlem

   @import "/css/protisk.css" print;
   

   zapsaným uvnitř stylového předpisu.

3. Pravidlem @media ve stylovém předpisu. Veškerá pravidla obsažená uvnitř @media (je vymezeno složenými závorkami) budou uplatněna jen na média v něm uvedená. Například při tisku bývá obvyklé vypustit navigační prvky (menu a záhlaví). Toho by se dalo dosáhnout třeba následovně:

   @media print {
       header, nav { display: none; }
   }
   

Omezení na médium má pouze ten efekt, že pro jiná média nebudou tato pravidla brána v potaz. Samo o sobě jim nedává vyšší prioritu – pokud se ocitnou v konfliktu s jinými pravidly, bude rozhodnut obvyklým postupem. Z toho plyne, že byste měli při definici stylu nejprve stanovit obecná pravidla platná pro všechny a po nich pravidla specifická pro jednotlivá média (aby mohla přepsat dříve uvedené obecné nastavení).

Dostupná média

Původně byla definována poměrně široká nabídka médií, ovšem některá se prakticky nepoužívala. Proto později došlo ke zjednodušení a zůstala k dispozici následující média:

screen

Obrazovky počítačů, mobily, tablety, chytré televizory a podobně.

print

Výstup na tiskárnu. Podstatný rozdíl proti předchozímu je, že médium není souvislé, ale je rozděleno na stránky.

speech

Hlasová čtečka WWW stránek.

all

Všechna média. Tuto hodnotu můžete použít všude tam, kde se očekává médium. Nemá to ale valný smysl, protože pokud médium neuvedete vůbec, vztahují se pravidla na všechna média – čili efekt je stejný.

Závisí samozřejmě na klientovi, aby se chopil správných médií. Podle vlastností lze média rozdělit do několika skupin – například na souvislá a stránkovaná. Tyto skupiny jsou však čistě informativní a nelze je nějak používat přímo v předpisech. Rozdělení do skupin najdete v definici CSS.