CSS2 – at rules aneb pravidla zavináče

19. prosince 2002

•

At rules jsou speciální příkazy CSS2 (v následujícím textu je budu nazývat @pravidla). Dovolují použití určitého stylu na cíl, který není v XHTML definovatelný, nebo představují výkonné příkazy. Začínají znakem @, následovaným samotným identifikátorem pravidla. V CSS2 můžeme použít tato @pravidla: @import, @media, @font-face, @page.

Import stylu

V původním CSS se vyskytovalo pouze jediné @pravidlo, @import, které přikazuje import stylu ze zadaného stylesheetu. Chceme-li např. použít stylesheet styl.css, můžeme ho importovat takto: @import url("styl.css"); nebo nám CSS2 povoluje i kratší variantu @import "styl.css";.

Při použití tohoto pravidla je důležité si uvědomit, že musí být uvedeno jako úplně první před jakýmikoliv jinými definicemi nebo @pravidly. Například v následujícím zápise bude druhé @import pravidlo ignorováno. Importován tedy bude pouze stylesheet styl1.css:

@import „styl1.css“;
p {color: red;}
@import „styl2.css“;

Podobně v tomto případě nedojde k vůbec žádnému importu!

p {color: red;}
@import „styl2.css“;

@pravidlo @import se dnes využívá především pro odříznutí starých verzí prohlížečů od stylesheetu (hlavně proklínaného NN 4.x), se kterým neumí správně pracovat. Zmiňované prohlížeče totiž tomuto @pravidlu nerozumí, a proto stránka na nich zůstane stylem nedotčena. Respektive můžeme také nadefinovat jeden stylesheet pro novější prohlížeče a druhý pro staré verze. Uděláme to následujícím způsobem:

<head>
…
<link href=“old.css“ rel=“stylesheet“ type=“text/css“ />
<style type=“text/css“>
@import „new.css“;
</style>
…
</head>
<body>
…
</body>

V příkladu používám dva stylesheety, old.css pro staré prohlížeče a new.css pro zbytek. Nejdříve pomocí elementu link přiřadím dokumentu styl old.css. Tomuto zápisu rozumí všechny prohlížeče včetně těch nejstarších (pokud CSS podporují). Následně použiji @pravidlo @import pro import stylesheetu new.css. Tomuto pravidlu ovšem staré prohlížeče nerozumí, a proto zůstanou u původního old.css. Nové prohlížeče díky kaskádovým pravidlům použijí definice z new.css. Takto lze velmi efektivně dosáhnout kompatibility i s prarodiči dnešních prohlížečů.

Styly vázané na médium

Možná jste někdy potřebovali upravit výstup například na tiskárnu. Asi jste museli udělat zvláštní stránku s jiným formátováním. Pomocí CSS2 stylů vázaných na médium však můžete definovat jedné stránce různé styly, které budou použity v závislosti na tom, kde je zrovna stránka „zobrazena“, jestli na monitoru nebo na tiskárně. Pro tyto účely bylo navrženo nové @pravidlo @media třída_média. Nejdříve si vyjmenujme třídy médií dle CSS2:

třída média	popis
all	všechna zařízení
screen	monitor počítače
print	tiskárna
handheld	malá obrazovka s limitovaným počtem barev
tv	zařízení televizního typu
tty	terminály (zařízení s fixní zobrazovací mřížkou)
projection	prezentace pro projekci
aural	syntezátory hlasu
braille, embossed	zařízení s výstupem v braillově písmu

Kompletní popis tříd médií můžete najít na stránce W3C. Momentálně asi největší uplatnění najdou třídy screen a print. Pomocí @pravidla @media jim příslušné stylové vlastnosti nadefinujeme následujícím způsobem.

@media screen {
/* stylové vlastnosti pro monitory */
}
@media print {
/* stylové vlastnosti pro tisk */
}

Tedy nejprve určíme, pro jaké zařízení chceme styl použít pomocí @media třída_zařízení, a následně do složených závorek napíšeme samotný styl. Pokud chceme přiřadit jeden styl více médiím, jednoduše za @media uvedeme seznam tříd oddělených čárkami @media print, screen {}. Můžeme třeba chtít, aby stránka na monitoru měla na pozadí obrázek back.gif a bílé písmo a naopak na tiskárně písmo černé a bez pozadí. Pomocí tohoto @pravidla je to snadné:

@media screen {
  body
  {color white;
  background-image: url(„back.gif“);}
}
@media print {
  body
  {color: black;
  background-image: none;}
}

Problém může nastat, pokud chceme importovat stylesheet pomocí @pravidla @import. Na první pohled se nabízí následující řešení:

@media screen {
@import „screen.css“
}
@media print {
@import „print.css“
}

Takto zapsaný kód je ale chybný! Jak jsem se zmínil, @import musí být uvedeno úplně jako první před jinými @pravidly nebo vlastnostmi. Proto k importu nedojde. Naštěstí nám CSS2 umožňuje docílit toho jinak. Za @pravidlo @import lze uvést třídu zařízení, pro kterou se má daný styl načíst:

@import „screen.css“ screen;
@import „print.css“ print;

Důležité je uvědomit si, že tento zápis snižuje množství přenášených dat, neboť stažen bude pouze stylesheet, který právě potřebujeme. Přiřadit styl určitému médiu můžeme i na úrovni XHTML v elementech style a link. Slouží k tomu nový atribut media, jehož hodnotu tvoří seznam tříd médií oddělených čárkami:

…
<link href=“print.css“ media=“print“ rel=“stylesheet“ type=“text/css“ />
…
<style media=“print, screen“ type=“text/css“>
/* styl pro tiskárnu a monitor */
</style>

Přiřazovat styly médiím už na úrovni XHTML ale nedoporučuji. Pokud prohlížeč nerozumí nějakému atributu, tak jej ignoruje. Což v tomto případě znamená, že starší prohlížeče sice nebudou rozumět atributu media, ale přesto daný styl použijí! Proto je lepší přiřazovat styly médiím pouze pomocí @pravidel.

Pravidlo stránky

Dalším @pravidlem v CSS2 je @page a reprezentuje tisknutelnou oblast stránkových médií (tiskárny). Vše o tomto @pravidlu stejně jako o stránkových médiích se dočtete v příštím článku.