Media Queries

Media Queries je CSS3 modul umožňující adaptabilní vykreslování webových stránek podle různých činitelů jako rozlišení obrazovky, či velikost obrazovky (např. obrazovka smartphone vs. monitor u PC). Poprvé byly použity již v roce 2001 W3C a staly se doporučeným standardem v červnu 2012. Je to základní stavební kámen pro responzivní web design. Díky tomu lze jen jednoduše upravit styly a výrazně tak zlepšit uživatelům UX při prohlížení.

Media Queries se považují za poslední úroveň responzivní web designu. Jsou to pravidla, díky kterým lze měnit stylování dokumentu v závislosti na šířce obrazovky zobrazovaného zařízení. +more Následující stylování (červené pozadí celého dokumentu) bude uplatněno pouze tehdy, pokud šířka prohlížeče na použitém zařízení bude v rozsahu od 660px do 780px.

@media (max-width: 780px) and (min-width: 660px){ body{ background-color: red; } }

Dějiny

Mediální dotazy byly poprvé načrtnuty v původním návrhu CSS Håkon Wium Lie v roce 1994, ale nestaly se součástí CSS 1. Doporučení HTML4 z roku 1997 ukazuje příklad toho, jak by bylo možné v budoucnu přidat dotazy na média. +more V roce 2000 W3C začalo pracovat na dotazech na média a také na dalším schématu podpory různých zařízení: CC/PP. Oba řeší stejný problém, ale CC/PP je zaměřený na server, zatímco dotazy na média jsou zaměřené na prohlížeč. První veřejný pracovní návrh pro dotazy na média byl zveřejněn v roce 2001 a specifikace se stala doporučením W3C v roce 2012 poté, co prohlížeče přidaly podporu.

Mobilní zařízení

Hlavní důvod, proč Media Queries používat, je stoupající počet mobilních zařízení na trhu. Mobilní zařízení mají již standardně v systému internetový prohlížeč a wi-fi, ať už se jedná o smartphony, tablety, či e-čtečky knih. +more Uživatelova zkušenost s webem je na mobilních zařízeních velice odlišná a musí se dbát na použitelnost.

V číslech

Na světě je v oběhu přes 6 miliard telefonů * Apple od představení iPadu prodal přes 84 milionů kusů * Přes čtvrtinu všech přístupů na internet je skrze mobilní zařízení * Přes třetinu všech uživatelů facebooku přistupuje ke svému účtu právě z mobilních zařízení

Podpora

Internet Explorer 9+ * Opera 9.5+ ** Opera Mini 5+ ** Opera Mobile 10+ * Mozilla Firefox 3.5+ ** Firefox Android 15+ * Safari 3+ ** iOS Safari 3.2+ * Chrome 4+ ** Chrome Android 18+

Základní principy

Dvě cesty vedou k dosažení stejného cíle. První je násilná a mnohdy zvaná "šroubovací" a druhá je zcela nový pohled na tvorbu webu. +more Obecně vychází Media Queries již z CSS2, kde byly uvedeny media types - konkrétně funkce print. CSS3 tuto funkci rozšiřuje a posouvá o něco dál. Sledují základní vlastnosti zařízení, z kterého uživatel ke stránkám přistupuje:.

* šířka a výška prohlížeče * šířka a výška zařízení * orientace zařízení(na výšku nebo na šířku) * rozlišení

Pro uživatele mobilních zařízení je zcela přirozené tzv. "scrollování" nahoru a dolu, spíše než doleva/doprava. +more Je tedy běžným zvykem "linearizovat" layout do jednoho sloupce. Právě díky vlastnostem CSS jsme schopni definovat a přepsat veškerá pravidla definované pro větší webové browsery.

@media only screen and (max-device-width: 480px) { div#wrapper { width: 400px; }

div#header { background-image: url(media-queries-phone.jpg); height: 93px; position: relative; }

div#header h1 { font-size: 140%; }

#content { float: none; width: 100%; }

#navigation { float:none; width: auto; } }

Pro prolinkování separátního stylesheetu pak stačí

Graceful Degradation

Neboli "ladná degradace". Slouží těm, kteří mají již hotový web a chtějí ho pouze vylepšit o kompatibilitu s mobilním zařízením - tedy při návrhu postupovali od největšího k nejmenšímu. +more Začíná se od komplexního řešení a pro účely menšího zařízení se funkcionalita oseká.

Kdy používat * Při absenci času na návrh nové verze * Stránka má vysoký traffic a její změna by byla příliš nákladná * Stránka je natolik závislá na skriptech, že její vylepšení není lepším krokem (např. E-mailový klient)

Progressive Enhancement

Neboli "progresivní vylepšování". Slouží těm, kteří web začínají navrhovat. +more Jedná se o základní princip navrhování moderní responzivní webové prezentace - tedy při návrhu se postupuje od nejmenšího k největšímu. Začíná se s prostým designem, který lze zobrazit na všech zařízeních stejně a postupně se zvětšující se obrazovkou nabalují funkce.

Kdy používat * Při navrhování zcela nové webové prezentace ** Při rozšíření prohlížeče o novou verzi(není třeba měnit originální verzi, stačí stávající vylepšit) * Pro dosažení cíle, ne pro "nutnost" dosažení cíle

Reference

[url=http://www. w3. +moreorg/TR/css3-mediaqueries/]W3C - Media Queries recommendation 19 June 2012[/url] * [url=http://www. w3. org/Style/CSS/specs#mediaqueries]W3C - CSS specs > Media Queries[/url] * [url=http://mediaqueri. es/]Examples of Media Queries usage[/url] * [url=http://reference. sitepoint. com/css/mediaqueries]Sitepoint - Media Queries[/url] * [url=http://www. zdrojak. cz/clanky/webdesigneruv-pruvodce-po-css3-media-queries]Zdroják[/url] * [url=http://caniuse. com/css-mediaqueries]Statistika prohlížečů[/url] * [url=https://web. archive. org/web/20150204123920/http://www. marekneufus. cz/media-queries/]Responzivní design pomoci Media Queries[/url].

Kategorie:Webdesign