Media Queries

Z Wikipedie, otevřené encyklopedie
Skočit na navigaci Skočit na vyhledávání

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;
	}
}

Mobilní zařízení[editovat | editovat zdroj]

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[editovat | editovat zdroj]

  • 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[editovat | editovat zdroj]

  • 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[editovat | editovat zdroj]

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[editovat | editovat zdroj]

Nebo-li "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[editovat | editovat zdroj]

Nebo-li "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[editovat | editovat zdroj]