CSS Media Queries: co jsou a k čemu slouží

Včera dospěla specifikace W3C s názvem Media Queries do stavu Candidate Recommendation. Pojďme si povědět, k čemu Media Queries slouží. Seznámíme se s tím, jakým způsobem Media Queries rozšiřují syntaxi CSS2.1 a jak je můžete snadno použít.

Než přistoupíme k popisu Media Queries (přeložit bychom to mohli opisem jako dotazování se na výstupní médium), připomeneme si, jak kaskádové styly pracují s výstupními médii, protože opakování = matka moudrosti.

Kaskádové styly byly od začátky navrženy jako medium agnostic, tj. nezávislé na výstupním médiu. Kaskádové styly úrovně 2.1 počítají s celou řadou výstupních médií, z nichž jen několik málo se dnes běžně používá (zvedněte ruku, kdo použil i jiné médium než screen, print, handheld a projection).

Jelikož jeden dokument je možné zobrazit na více výstupních zařízeních, existuje možnost, jak jednotlivé stylopisy podmínit pouze pro určitá média:

<link rel="stylesheet" media="screen" href="screen.css">

Nebo analogicky pomocí syntaxe CSS:

@import url("screen.css") screen;

Podmínit můžete nejen celé stylopisy, ale i jednotlivá pravidla:

@media screen {
    body { font-family: sans-serif }
  }

Ačkoliv jste možná všechny tři varianty nepoužili, pravděpodobně je dávno znáte. S nástupem media queries se práce s médii v kaskádových stylech o něco rozšiřuje. Výše uvedené příklady zůstávají stále platné (zpětná kompatibilita je tedy udržena), ovšem nově jsou zavedeny některé další užitečné konstrukce a ty si dnes popíšeme.

Co jsou Media Queries

Formálně řečeno se jedná o specifikaci W3C, která je vyvíjena již od roku 2001 (jako většině designerských specifikací jí příchod na svět trvá poněkud dlouho), a přesně včera se dostala do stavu Candidate Recommendation.

Candidate Recommendation

Stav Candidate Recommendation je pro takovou specifikaci poměrně vážná věc. Jedná se o první stupeň na cestě k finální specifikaci (W3C Recommendation). Zatímco do té doby byla specifikace ve stádiu pracovního návrhu (Working Draft) a mohla obsahovat „téměř cokoliv“ (včetně vážných nekonzistencí a chyb), jakmile dostane nálepku Candidate Recommendation, tak již lidově řečeno přestává všechna legrace. V názvu je Candidate čili kandidát na výslednou specifikaci, do výsledné specifikace jí chybí urazit ještě několik kroků (které mohou trvat třeba rok nebo i déle), každopádně specifikaci lze brát již „téměř vážně“, a to uděláme i my.

Abych vás nevodil za nos, je nutné přiznat, že situace se může vyvinout i zcela opačně, např. zrovna Media Queries se před sedmi lety již jednou do stavu Candidate Recommendation dostaly, aby se později vrátily do stavu pracovního návrhu a byly trochu upraveny. Ale tím si přece nebudeme kazit jinak pěkný článek.

Media Queries mají již několik implementací (a sice ve stávající Opeře, Webkitu a připravovaném Firefoxu 3.5), za což se možná zasloužil i test Acid3, který jejich kontrolu obsahuje (konkrétně v podtestu číslo 46). Proto se vyplatí minimálně vědět, že něco takového existuje a že to můžeme za jistých podmínek použít. Media Queries jsou zpětně kompatibilní, takže absence podpory v dalších prohlížečích nám web nezboří, jen na ni nesmíme zapomenout.

Když rozdělení na média nestačí

Původní podpora médií v kaskádových stylech byla prostá. Tiskový výstup vyžaduje jiná pravidla než zobrazení dokumentu na obrazovce prohlížeče, a to opět vyžaduje jiná pravidla pro zobrazení než při promítání na plátno nebo zobrazení v mobilním zařízení apod.

To jistě bude fungovat, jenže co když to nestačí? Co když náš design jednou chceme tisknout na šířku papíru a podruhé na výšku? Prohlížeč se vždy pokusí tisk „nějak“ vypočítat, ale co když bychom chtěli zasáhnout? A co takové mobilní zařízení? To může mít velikost obrazovky 120×160px anebo také 320×480px. Vystačí si v každém případě se stejným předpisem? A co když nebude výstupní obrazovka barevná, ale černobílá? Nebude to vadit?

Pokud vás takové otázky někdy trápí, pak oceníte Media Queries. Ty vám totiž v případech zmíněných výše pomůžou. Media queries neboli „dotazování na výstupní média“ vám totiž poskytnou jemnější rozdělení médií, než nabízí typy médií definované v CSS2.1.

Ukázky použití

Ukažme si několik příkladů. Pokud bychom chtěli definovat stylopis platný pouze pro barevné obrazovky, použijeme zápis:

<link rel="stylesheet" media="screen and (color)" href="barevny.css" />

Analogicky bychom mohli použít i následující varianty:

@import url(barevny.css) screen and (color);
@media screen and (color) {
    ...
  }

Zápis je jednoduchý, pouze ke stávající gramatice, která povolovala seznam médii oddělený čárkou, přibyly podmínky. A když podmínky, tak nemusíme zůstat jen u operátoru and, můžeme klidně použít i takovou negaci. Negací předchozího výrazu dostaneme pouze černobílé obrazovky (pozn.: klíčové slovo not neguje celý za ním následující výraz):

<link rel="stylesheet" media="not screen and (color)" href="cernobily.css" />

Specialitou je klíčové slovo only. To bude prohlížeč znalý Media Queries ignorovat (ostatně každý zápis médií obsahuje implicitně pomyslné „only“). Můžete ho použít, abyste se ujistili, že starší prohlížeče budou tento stylopis ignorovat (narazí na neznámé slovo „only“ a stylopis přeskočí). V opačném případě není vyloučeno, že by některý prohlížeč spatřil na začátku screen a zbytek směle ignoroval. Pokud tedy chceme starší prohlížeče s jistotou odfiltrovat, použijeme:

<link rel="stylesheet" media="only screen and (color)" href="barevny.css" />

Podmínky lze i řetězit (pouze operátorem and, jiný pro ten účel nemáme), takže můžeme vytvořit stylopis pro barevné obrazovky se šířkou 800px:

<link rel="stylesheet" media="screen and (color) and (device-width: 800px)" href="s8.css" />

Případně vytvořit podmínku pro více médií:

<link rel="stylesheet" media="screen and (color), presentation and (color)" href="sp.css" />

Pokud jste pochopili výše uvedené, pochopili jste celou podstatu Media Queries. (Je to prosté milý Watsone.) Snadno již pochopíte i další příklady ve specifikaci, ať již se bude jednat o vytvoření tiskového stylu pro tisk na šířku nebo o zařízení s maximální zobrazitelní šířkou 480px (čímž můžete nabídnout speciální stylesheet např. pro iPhone).

A k čemu to?

Media Queries nám nabízí nové možnosti, ale musíme zvážit, kdy je skutečně výhodné je využít. Můžeme pomocí nich sice vytvořit zvláštní stylopis pro každé myslitelné rozlišení obrazovky, ale pravděpodobně to nebude ta správná cesta (a když, tak leda to pekel). Uvažujte o Media Queries jako o pomocníkovi na úlohy, které jsou pomocí kaskádových stylů neřešitelné nebo nesnadno řešitelné (a proto při nich saháte po jiných prostředcích, např. JavaScriptu).

Navštěvují váš web uživatelé s iPhone a jeho zobrazení není úplně ideální? Vylepšete ho pravidly podmíněnými:

only screen and (max-device-width: 480px)

Připadá vám, že je váš web špatně čitelný, když ho tisknete na šířku? Dolaďte si to. Media Queries se hodí všude tam, kde potřebujeme vyrovnat nekonzistenci výstupních zařízení (přímo se nabízí těm, kdo z nějakého důvodu potřebují ladit weby pro různá mobilní zařízení). A hlavně pamatujte, že jediné rozumné použití Media Queries je dnes jen ve spojení s technikami graceful degradation nebo progressive enhancement, jelikož na podporu ve většině prohlížečů si nějaký čas počkáme, je nutné vždy přemýšlet, jak se zachovají prohlížeče Media Queries neznalé.

Závěr

Další příklady použití vás určitě napadnou. A pokud ne, tak se tím netrapte. Je možné, že se bez Media Queries klidně obejdete. A kdybyste jednoho dne přeci jen náhodou zjistili, že se vám Media Queries hodí pro řešení vašeho problému, určitě si vzpomenete na tenhle článek.

Používáte Media Queries?

Vystudoval jsem biochemii. Vymyslel a založil Zdroják. Aktuálně ho vedu. Nejsem váš hodný tatínek, který vás bude brát za ručičku, ale zlý moderátor diskusí. Smiřte se s tím!

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Komentáře: 3

Přehled komentářů

deda.jabko RE: CSS Media Queries: co jsou a k čemu slouží
leo
Martin Hassman Re:
Zdroj: https://www.zdrojak.cz/?p=2996