Seznámení s Media Queries v CSS 3

V době, kdy webové technologie ještě nebyly rozvinuté a existovalo jen málo prohlížečů, se v zásadě dařilo vytvářet stránky, které vypadaly a fungovaly všude stejně. Postupem času však webové technologie pronikaly na další a další platformy, důsledkem čehož nelze webovým stránkám zajistit všude naprosto stejnou funkcionalitu a vzhled.

Co si v této situaci počít? Nabízejí se dvě odlišné cesty:

1. Předestřený fakt ignorovat a nadále se soustředit na jedinou platformu – grafické desktopové prohlížeče. To je nejjednodušší, leč nikoliv nejefektivnější. Weby takto vytvořené nemusí být ideální pro tisk nebo se z nich v nevizuálních interpretech vytratí informace prezentované grafickou formou atd.
2. Přizpůsobovat weby zvlášť pro každou platformu. To je sice flexibilní a z principu správný přístup, ale kdyby měl být uplatňovaný opravdu důsledně, bylo by to velmi náročné vzhledem ke stále větší segmentaci.

Nás bude dál zajímat b. Abychom mohli poskytnout každému zařízení optimální podobu webové stránky, je nutné tato zařízení nejprve nějak rozlišit. Pro potřeby CSS k tomuto rozlišení výborně poslouží selektor média, který lze uplatnit už na úrovni značkovacích jazyků.

XML:

<?xml-stylesheet rel="stylesheet" media="print" href="tisk.css" ?>

XHTML:

<link rel="stylesheet" type="text/css" media="print" href="tisk.css" />

HTML:

<link rel="stylesheet" type="text/css" media="print" href="tisk.css">

Kompletní seznam mediálních selektorů pro HTML 4 je: all, aural, braille, handheld, print, projection, screen, tty, tv. CSS 2 definuje v podstatě tytéž mediální selektory, pouze vynechává aural a přidává embossed a speech. Novější normy mohou opět selektovat jiné nebo další typy médií. Specifikace Media Queries, která je momentálně ve stádiu Candidate Recommendation, čili již velmi blízko ke schválení, tyto jednoduché selektory výrazně sofistikuje – přidává k nim operátory a výrazy. Na tuto specifikaci se odkazuje i připravovaný HTML 5.

Selektor média lze využít i uvnitř CSS a to buď při připojení externího stylopisu (IE 6 ani 7 však nepodporuje pravidlo @import!):

@import „display.css“ handheld;

nebo u pravidla @media:

@media screen, projection, tv {…}

Při takto selektivně utvářeném stylování se vyplatí řadit jednotlivé mediální selektory od nejobecnějších směrem ke konkrétnějším.

Nejobecnějším selektorem je nepochybně all. Sada stylů s tímto selektorem by měla být proto uvedena nejdřív, aby její konfliktní deklarace mohly být snadněji „přebity“ deklaracemi v následujících sadách stylů.

O selektoru screen se asi nedá hovořit jako o obecném selektoru, faktem však zůstává, že jej reflektuje mnoho zařízení, což ze sady stylů s tímto selektorem dělá kandidáta na druhé místo.

Další místa by měla patřit sadám stylů s hromadnými mediálními selektory (tj. selektory pro více médií, jednotlivá média se od sebe oddělují čárkou, viz předchozí příklad). Teprve pak je vhodná chvíle na sady stylů s nejkonkrétnějšími selektory. Jak by celý takový stylopis mohl vypadat, nastiňuje následující příklad.

@media all {
/* styly pro všechna zařízení */ }
@media screen {
/* styly pro obrazovku */ }
@media projection, tv {
/* styly pro projekci a televizi */ }
@media projection {
/* styly pro projekci */ }
@media print {
/* styly pro tisk */ }
@media only handheld and (max-width: 25em) {
/* styly pro zařízení s malým displayem */ }

Syntaxe

Mediální selektor je vlastně dotazem na typ interpreta (odtud jeho standardní název media query), který může být ještě upřesněn pomocí libovolného počtu výrazů. Výraz (expression) v terminologii Media Queries znamená požadavek na určité parametry interpreta, např. rozlišení, šířku, škálu barevnosti, orientaci apod. Výrazy jsou uzavřeny do kulatých závorek a oddělené operátorem AND. Operátor NOT (negace), nebo ONLY (vždy maximálně jen jeden z nich!) musí stát na začátku! Operátor ONLY slouží jako nárazník proti interpretům, kteří neznají výrazy podmíněné mediální selektory a kteří by z nich teoreticky mohli vyhodnocovat pouze typ média. Pro názornost je zde pár příkladů s logickými operátory:

@media screen, not handheld, only tv {
/* styly pro obrazovku, potažmo i televizi */ }
@media only print and (min-resolution: 300dpi) and (min-color-index: 256) {
/* styly pro barevnou tiskárnu s kvalitním tiskem */ }

Media features

Media features jsou součástí výrazů. Syntakticky připomínají CSS vlastnosti (properties): mají svá jména a akceptují určité hodnoty. Zásadně se však od nich liší svým účelem. S pomocí CSS vlastností se prvkům deklaruje zamýšlený styl, s pomocí features se konkretizuje dotaz na výstupní zařízení.

V následující tabulce jsou seřazeny všechny navržené features. Druhý sloupec udává, zda je možné danou feature použít s prefixem min nebo max. Proměnné x, y ve třetím sloupci reprezentují čísla.

Tipy

Místo prefixů min či max lze používat porovnávací operátory < a >. Např.:

(resolution > 300dpi).

Zápis výrazů lze zkrátit o hodnoty. Pár příkladů:

@media print and (color) /* pro barevnou tiskárnu */ { … }
@media print and (monochrome) /* pro černobílou tiskárnu */ { … }

Není pravidlem, aby se rozměry obrazovky shodovaly s rozměry okna prohlížeče. Okno nemusí být maximalizované z řady důvodů, např. když je stránka otevřena do nového okna; v systému Mac OS X se maximalizace okna ani moc nepoužívá, panuje zde poněkud jiná filosofie práce s okny než ve Windows a preferuje se optimální šířka okna. Na features device-width, device-height a device-height je proto lepší raději nespoléhat a upřednostňovat width, height, aspect-ratio.

Podpora

Podpora Media Queries je zatím sporadická a chabá, což by však nikoho od používání pokročilých mediálních selektorů nemělo odrazovat. Media Queries podporuje už Opera a Firefox 3.5.

Aktualizace 18. 10. 2010: Media Queries již podporují všechny významnější webové prohlížeče na mobilní i desktopové platformě. Opera 7+, Firefox 3.5, Safari 3+, Chrome, Internet Explorer 9+.