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í. 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. 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. 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. 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. 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čí

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" />

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. 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. 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