Media Queries

Z Multimediaexpo.cz

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

Obsah

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

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

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


Citováno z „http://www.multimediaexpo.cz/mmecz/index.php/Media_Queries“