---

Jak připojit CSS - typy médií

Dnes jsem se trošku rozepsal a zamíříme hned do další podvědomé části Aplikace kaskádových stylů a povíme si něco o typech médií, tedy o nastavení jakému softwaru se mají naše CSS styly zobrazovat.

Typy médií

Existuje hned několik typů médií, kterým můžeme poslat specifická CSS. Zde je seznam typů médií podle specifikace CSS 2.1 konsorcia W3C.

all

Vhodné pro všechny typy média.

braille

Určeno pro Braillova hmatová zařízení.

embossed

Určeno pro braillovy vícestránkové tiskárny.

handheld

Určeno pro příruční zařízení (typicky s malou obrazovkou a omezenou šířkou pásma).

print

Určeno pro vícestránkový materiál a pro dokumenty zobrazené na obrazovce v předtiskovém náhledu před tiskem.

projection

Určeno pro promítané prezentace - např. pomocí zpětných projektprů.

screen

Určeno primárně pro barevné počítačové obrazovky.

speech

Určeno pro syntezátory hlasů. Poznámka: CSS2 má k tomuto účelu ještě jeden podobný typ média zvaný aural.

tty

Určeno pro média používající mřížku s pevnou roztečí (např. dálnopisy, počítačové terminály nebo přenosná zařízení s omezenou zobrazovací kapacitou). V rámci tohoto typu není vhodné používat pixely.

tv

Určeno pro zařízení typu televize (nízké rozlišení, omezený počet barev, omezená možnost posouvání obrazovky, možnost produkce zvuku).

Více informací získáte na stránkách W3C www.w3.org/TR/CSS21/media.html.

Nastavení typu média u <style>

<style type="text/css">
<![CDATA [
@media screen {
/* deklarace pravidel stylu pro obrazovky pocitace */
}
] ]>
</style>
</head>

Pravidlo @media bychom také mohli vložit i do externího souboru seznamu stylů, na který odkážeme prvkem <link> .

Nastavení typu média u <link>

<rel="stylesheet" type="text/css" media="screen" href="styl/screen.css" />

Hodnotou screen v atributu media specifikujeme pro soubor screen.css , aby platil pouze pro obrazovky počítačů.

Více typů médií

Pokud chcete k souboru nastavit více typů médií, můžete to udělat jednoduše takto:

<rel="stylesheet" type="text/css" media="screen,print" href="styl/screenaprint.css" />

Pokud chcete mít dva různé CSS soubory a každý pro jiný typ média, použijte tento kód:

<rel="stylesheet" type="text/css" media="screen" href="styl/screen.css" />
<rel="stylesheet" type="text/css" media="print" href="styl/print.css" />

Nastavení typu média u @import

<style type="text/css">
<![CDATA [
@import url("styl/screen.css")screen;
] ]>
</style>
</head>

Pravidlo @import bychom také mohli vložit i do externího souboru seznamu stylů, na který odkážeme prvkem <link> .

Více typů médií

Pokud chcete k souboru nastavit více typů médií, můžete to udělat jednoduše takto:

<style type="text/css">
<![CDATA [
@import url("styl/screenaprint.css")screen,print;
] ]>
</style>
</head>

Problém s prohlížečem Internet Explorer

Při určování typu média u metody @import nastává problém, že některé verze prohlížeče IE toto nepodporují. To je velice nepříjemné, protože tento prohlížeč je zatím nejrozšírěnější a naše styly pro tisk by nám v něm byly na nic.

Výchozí hodnota?

Výchozí hodnota při určování typu média je screen , ale typicky jsou rozeznány všechny typy médií, není-li žádný určen. To znamená, že ve výchozím nastavení je CSS určeno pro všechna zařízení - obrazovky, příruční počítače, projektory, čtečky obrazovky atd.

Podpora?

Je důležité poznamenat, že podpora všech typů médií je neúplná. Jelikož standardy ještě nejsou tak daleko a zatím se drží především prohlížečů, ne každé zařízení bude podporovat svůj odpovídající typ médií. Proto je nejdůležitější zaměřit se především na typy screen a print .

20.7.2005