Přejít k navigační liště

Zdroják » Webdesign » Webdesignérův průvodce po CSS3: Media Queries

Webdesignérův průvodce po CSS3: Media Queries

Články Webdesign

V předchozích dvou dílech seriálu jsme se zabývali užitečnými drobnostmi, které mohou vylepšit váš design. Dnes se podíváme na Media Queries, které mají potenciál výrazně změnit způsob, jakým kódujeme. Umožňují totiž velmi specificky přizpůsobit vzhled stránky zařízení, na jakém bude zobrazena.

Co jsou Media Queries

Zjednodušeně řečeno je to způsob, jakým můžeme přes CSS zjistit, jaké schopnosti zobrazování má zařízení, kterému stránku posílám a poslat mu takový styl, jaký je pro něj vhodný.

Nejjednodušší Media Query, které jste určitě někdy všichni použili, je tiskový styl.

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

Všimněte si atributu „media“, ve kterém uvádíme, že daný styl se má aplikovat jen tehdy, když se bude stránka tisknout.

Tento jednoduchý princip Media Queries výrazně rozšiřují a tak můžeme jako hodnotu „media“ zadávat jaké má zařízení rozlišení, šířku viewportu, zda je položeno na šířku (landscape) či na výšku (portrait), atd.

Pojďme se podívat na pár ukázek.

<link rel="stylesheet" href="bigscreen.css" media="screen and (min-width: 1100px)">
<link rel="stylesheet" href="iphoneandandroid.css" media="screen and (max-device-width: 480px)">
<link rel="stylesheet" href="iphone4.css" media="only screen and (-webkit-min-device-pixel-ratio: 2)">

V jednotlivých stylopisech pak můžeme náš web ladit pro jednotlivá zařízení.

Pochopitelně Media Queries můžeme používat i samotném CSS:

@media screen and (min-width: 1100px) { magic happens here }
@media screen and (max-device-width: 480px) { magic for iPhone and Android here }
@media only screen and (-webkit-min-device-pixel-ratio: 2) { magic for iPhone 4 }

Co všechno lze cílit pomocí Media Queries shrnuje Opera v přehledné tabulce.

K čemu to použiji?

Pokud se podíváte na současný trh zařízení, které umí vlézt na internet, rychle zjistíte, že se něco děje. Do módy se dostala mobilní zařízení, které uživateli umožňují se poměrně pohodlně pohybovat po webových stránkách. Tablety, mobily, e-readery. Všechny nabízejí možnost zobrazit web, na každém je to ovšem odlišný zážitek. A od desktopu výrazně odlišný.

Pár čísel k mobilním zařízením

  • Na světě je 5 miliard mobilů, kupříkladu v Africe má více lidí mobil než přístup k elektřině.
  • Amazon vydělal 1 miliardu dolarů jen z nákupů přes mobilní zařízení.
  • Uživatelé Facebooku, kteří používají k přístupu také mobilní zařízení, jsou 2× aktivnější než ti ostatní (mimochodem z 500 milionů uživatelů FB používá mobilní přístup 150 milionů).
  • Celosvětově přistupuje k internetu přes mobilní zařízení 530 milionů uživatelů, což je zhruba čtvrtina z 1,9 miliardy uživatelů internetu.
  • A analytici ze společnosti Gartner předpovídají, že v roce 2013 bude více lidí používat internet přes mobilní zařízení než přes desktopový počítač. (Ten rok je pravděpodobně příliš ambiciózní, jiné odhady uvádí rok 2015.)

Jak dlouho vydrží váš web?

Když dnes spustíte webové stránky, je velká pravděpodobnost, že na webu dva roky zůstanou. (V ČR vydrží často i mnohem déle). Dělat speciální mobilní verzi je však velmi nákladné a v převážné většině situací i zbytečné. Media Queries nám umožňují jen mírně upravit styly a nabídnout uživatelům výrazně vylepšený zážitek z našich stránek.

Jak jsme na tom s podporou?

Teď se dostáváme na tenký led. Budou nás totiž zajímat hlavně mobilní prohlížeče. Ale podívejme se nejprve na ty desktopové.

Podporu nabízí Opera 7+, Mozilla (Firefox 3.5+) Webkit (Safari3+ & Chrome) a Internet Explorer 9.

U mobilních prohlížečů to je o něco zajímavější, protože – jak Petr Paul Koch uvedl na WebExpu – prohlížečů tam není pět, ale minimálně 15.

Každopádně podporu nabízí Opera Mobile, Opera Mini a mobilní Webkit (s drobnými odlišnostmi). Mnoho dalších však ještě podporu nemá.

Jak používat Media Queries?

Nabízí se nám dvě cesty – graceful degradation a progressive enhancement.

1. Graceful Degradation

Pokud mám již hotový web a chci vylepšit jeho použitelnost na mobilních zařízeních typu iPhone či Android, přidám jednoduché Media Query a speciální stylopis právě pro ně. Jednoduché, prosté a účinné. Za půl hodinky mohu mít dobře použitelnou mobilní verzi stránek.

<link rel=„stylesheet“ href=„iphonean­dandroid.css“ media=„screen and (max-device-width: 480px)“>

Podrobný návod nabízí Rachel Andrew na Smashing Magazine: How To Use CSS3 Media Queries To Create a Mobile Version of Your Website.

Pozn. aut.: Osobně této metodě říkám „quick & dirty“, protože umožňuje snadné a rychlé uzpůsobení stránek tak, jak chceme. Spoustu mobilních zařízení s ní však vynechám, protože Media Queries nepodporují a také tahám mnoho zbytečných obrázků, které na mobilu třeba vůbec nechci zobrazit.

2. Progressive Enhancement

Pojďme to vzít obráceně. Udělejme nejprve jen naprosto základní styl, který se zobrazí na jakémkoli zařízení. Texty pěkně pod sebou, jednoduchá barva na pozadí, trošku obarvit písmo a pohrát si s typografií, aby se naše texty skvěle četly.

Desktopové prohlížeče nabízejí velmi solidní podporu, takže toho využijme a cílujme je. Řekněme, že všechno co má šířku viewportu větší než 590px už je pro nás desktop.

<link rel="stylesheet" href="dekstop.css" media="screen and (min-width: 590px)">

A teprve do „desktop.css“ nakóduji plnohodnotný vzhled stránek.

Všimněte si, že jsme vůbec nemuseli řešit mobilní zařízení, ta si automaticky vezmou náš základní styl. Najednou mám mobilní web a nenatahuji zbytečné obrázky, protože styl pro desktop si mobily vůbec nevezmou.

Jenže co s IE?

Jistě vás napadlo, že Internet Explorer nepodporuje Media Queries a klient nebude nadšen ze základního vzhledu webu. Snadná pomoc, máme přece IE podmíněné komentáře.

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="desktop.css">
<![endif]-->

Pozn. aut.: Dle mého názoru je rozumné servírovat styl jen pro IE 7 a 8 a IE6 a nižší nechat s tím základním. IE9 už rozpozná Media Queries, takže to uvádět nemusíme.

<!--[if IE 7]><link rel="stylesheet" type="text/css" href="desktop.css"><![endif]-->
<!--[if IE 8]><link rel="stylesheet" type="text/css" href="desktop.css"><![endif]-->

iPhone a Android

Aby media queries rozumně fungovaly na zařízeních typu iPhone a Andorid, je potřeba zařízením říci, že mají používat svůj reálný viewport a ne ten, který simulují pro běžné stránky na internetu. Je to naštěstí jednoduché. Stačí vložit <meta name="viewport" content="width=device-width"> do hlavičky HTML.

Responsive Web Design

Ať se vám to líbí nebo ne, Media Queries budou za pár let naprosto běžná věc. Zatím o nich svět sotva ví, a už s nimi mnozí lidé dokážou neuvěřitelné a skvělé věci.

Každá věc, která má na webu něco změnit, potřebuje chytlavé jméno. Používání Media Queries tímto způsobem se začalo říkat Responsive Web Design. Termín vymyslel Ethan Marcotte a do češtiny byste ho mohli přeložit jako „design, který reaguje“. Ethan do tohoto termínu schovává ještě mnoho dalších technik, jako jsou flexibilní obrázky atd. Základ jsou ale Media Queries. Vše se ostatně dozvíte v článku, který pojem definoval na A List Apart.

Dále čtěte k tématu

Příště

Příště nás čekají hlavně selektory v CSS3 a pár drobností.

Komentáře

Subscribe
Upozornit na
guest
2 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
juraj

Myslím, že je veľmi zlé odporúčať použitie media queries plus podmienené komentáre pre IE. Na ľudí napríklad s Firefoxom 3.0 nikto nemyslí? Omnoho lepšie je naservírovať štýl bez media queries pre všetky prehliadače a nechať tieto pravidlá prepísať pravidlami z media queries v prehliadačoch, ktoré ich podporujú.
Takisto nechať bielu stránku pre ľudí s IE6, no to je bohovský nápad. Zrejme autor nikdy web na zakázku nerobil.

Madla Fakla

Někde se píše, že stačí jeden CSS stylopis a jinde zas, že se stylopisy načítaj dle aktuálního rozlišení. No jo, ale jak to teda je, když chci, aby se mi měnilo rozložení stránky, když „tahám“ za okraje prohlížeče? To přece nemůže fungovat tak, že při každý změně velikosti okna prohlížeče se natáhne příslušný styl? Logicky mělo by to být opačně: natáhnout jeden styl obsahující všechny navržené varianty rozložení. Informace k tomuto hledám už třetí den, ale NIKDE jsem se nedopátral relevantní odpovědi, jak se s Media Queries vůbec pracuje…

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.