CSS Media Queries Level 4

Prohlížení webu je něčím, co již dávno není omezené na pouze obrazovky osobních počítačů. Paleta zařízení schopných vykreslovat web se rok od roku rozšiřuje o nové technologie, a web developeři a designeři na ně musí reagovat. Pokud jste někdy přišli do styku s webem, zřejmě jste slyšeli pojem CSS, neboli kaskádové styly. Ty jsou hlavním prostředkem, kterým je určeno, jak webová stránka či aplikace vypadá. A tak musí reagovat na nezastavující se vývoj v oblasti zobrazovacích zařízení.

Slibnou novinkou v této oblasti jsou CSS Media Queries Level 4, které se blíží svému schválení jako Candidate Recommendation W3C (World Wide Web Consortium), neboli fáze, kdy návrh je považován za technicky přijatelný a lze začíst s jeho ranými implementacemi a sběrem zkušeností „v terénu“.

Pokud jste někdy „přičichli“ k tvorbě moderních webových stránek, zřejmě si říkáte, že jste pojem media queries již někdy slyšeli, a že to přeci není žádná novinka. Částečně máte pravdu, media queries jsou něčím, co je součástí vývoje již dlouhou dobu, a jde o „jádro pudla“ při tvorbě rezponzivních prezentací. Co tedy Level 4 přináší nového?

Minoritní novinkou je nová syntax, neboli způsob zápisu kódu, který ulehčí práci vývojářům. Odpadne nutnost komplikovaně spojovat, kdy se mají jednotlivé media queries aplikovat, a to díky přidání relačních operátorů a rozsahu, neboli hezky česky řečeno, znamének větší a menší. Podobně je součástí návrhu zrušení nutnosti vnořovat podmínky a nahrazení tohoto systému prvky běžné boolovské logiky. Tato novinka povede k mnohem snadněji čitelnějšímu a snáze udržovatelnému kódu.

Inovativní Media Queries Level 4

Hlavní novinkou Media Queries Level 4 je ovšem řešení problému se stále se rozrůstající nabídkou zobrazovacích zařízení. Současné rozdělení zařízení podporované v media queries (viz následující tabulka) totiž pochází z dob, kdy věci jako tablety ovládané prsty nebo ovladač od herní konzole byly ve spojení s webem něčím nepředstavitelným.

Schválně si pokuste na chvíli představit, pod jakou z těchto kategorii by spadala zařízení v posledním řádku. Jak zjistíte, není to tak úplně jednoduché, a řada věcí se může i překrývat, což už samo o sobě je značný prohřešek proti specifikaci, protože prohlížeč by se vždy měl hlásit jenom jako jeden typ zařízení. Ale i když budeme předpokládat, že tato specifikace bude porušena, narazíme na problém, že vlastně nevíme, podle čeho se bude web zobrazovat.

V současnosti se tento problém „řeší“ tím, že většina zařízení neměla jinou možnost, než se hlásit jako „screen“ nebo „print“ (čímž je celé rozdělení zcela zbytečné), a spoléhá se v podstatě pouze na velikost obrazovky. Ovšem i tento přístup přináší určité problémy, kdy například notebookům s malou obrazovkou je zbytečně předáno zobrazení určené pro tablet, a stále větší tablety se potýkají s tím, že prstem není snadné kliknout na přesné místo. A právě řešení tohoto nešvaru slibují přinést Media Queries Level 4 a jejich Media Features.

Media Features

Media Features mají v aktuální podobě návrhu několik nových parametrů. Mezi ty hlavní, které nejvíce určují, o jaký typ média se jedná, jsou „pointer“, „hover“, „update“, „overflow-block“ a „scripting“, které odpovídají následujícím otázkám ohledně daného typu zobrazení:

Pointer – jak přesný je ukazatel?

Hover – jde pomocí ukazatele najet na prvek bez kliknutí?

Update – jak rychle se na aktualizuje obsah?

Overflow-block – jak se obsah chová pokud je delší, než výška zobrazení?

Scripting – podporuje zobrazení skripty?

Nyní se vrátíme k obrázku výše v článku, a podíváme se, jak některá z těchto zařízení (a některá další běžná) odpovídají těmto parametrům:

Z porovnání lze vidět, že Media Features přináší mnohem granulovanější a přesnější stylizaci webů podle zařízení, než je dnes používaná šířka obrazovky. Například je možné pro tablety připravit mnohem větší tlačítka, na které půjde pomocí (oproti myši nepřesnému) prstu snáze kliknout, a není zapotřebí jim definovat vzhled při najetí, protože tato situace nemůže nikdy nastat. Nebo je možné lépe rozlišit mezi tiskárnou a čtečkou, a zobrazení obsahu podle toho upravit.

Ale to není všechno

Součástí návrhu pro Level 4 jsou i další parametry, z nichž nejvíce zajímavým je „light-level“, který slibuje schopnost stránky reagovat na světelné podmínky v okolí zařízení (pokud zařízení podporuje snímání světla, pochopitelně). Každý se zřejmě někdy setkal s tím, jak je čtení webu na telefonu za jasného dne komplikované. Pomocí parametru „light-level“ by tak bylo možné čtenáři předložit více kontrastní verzi stránky, nebo upravit barvy pro lepší čitelnost.

Jak vidíte, CSS Media Queries Level 4 mají potenciál přinést zásadní změnu v tom, jak probíhá tvorba webů pro stále rozšiřující se paletu zařízení. Před reálným posunutím do stavu Doporučení, které se většina hlavních prohlížečů snaží dodržovat, a jejich samotnou implementací, je však ještě dlouhá cesta.