Pokud pracujete déle na webovém projektu, dostanete se možná do situace, kdy začnete přemýšlet nad jeho lepší organizaci. Nemyslím tím organizaci na úrovni kódu, ale organizaci při návrhu jednotlivých stránek. Projekt by měl navenek působit konzistentně a jednotně. Pokud toho chcete docílit, je třeba nalézt společný komunikační kanál mezi designery, UX specialisty a frontend vývojáři. Tento společný „jazyk“ lze vyjádřit tzv. systémem designu (v angličtině pod názvem design system). Smashing Magazine vydal v září 2017 knihu Design Systems, která se tímto tématem zabývá. V následujícím textu bych chtěl přiblížit, co v knize najdete a proč se jí vyplatí přečíst.

Autorkou knihy je Alla Kholmatova, UX a interakční designerka s mnohaletou zkušeností v oblasti designu webů. Pravidelně přispívá do designových publikací (např. A List Apart), publikuje články na blogu, přednáší na konferencích a pořádá řadu workshopů.

Cílová skupina

Kniha cílí na malé a středně velké týmy, kteří se snaží integrovat systém designu do svého každodeního života. V podstatě kdokoliv, kdo se podílí na tvorbě daného produktu, může z této knihy profitovat. Na běžných projektech bych knihu doporučil přečíst převážně designerům, UX specialistům a frontend vývojářům.

Oblasti, kterým se kniha věnuje

Autorka má bohaté zkušenosti v oblasti interakčního designu. Nenajdete zde proto žádné ukázky kódu ani analýzy vhodných nástrojů. Postupně ale získáte přehled o tom, jaké jsou základní stavební bloky systému designu a jaké procesy by ho měly provázet. Vše, o čem se v knize dočtete, je vysvětleno na reálných ukázkách. Kniha se díky tomu snadno čte a texty by měly být snadno „stravitelné“ i pro méně zkušené čtenáře. Podíváte se pod pokličku službám jako Airbnb, Atlassian, Spotify, Smashing Magazine, Slack, TED a celé řadě dalších. A právě tyto pohledy na procesy skutečných produktů dávají knize velkou přidanou hodnotu.

Část I. Základy

První polovina knihy je zaměřena na popis návrhových vzorů. Dozvíte se, že se jedná o znovupoužitelné, opakující se části rozhraní a také proč je důležité tyto vzory co nejdříve rozpoznat. V knize je pak podrobněji rozebíráno rozdělení návrhových vzorů na funkční a pocitové. Funkční vzory si lze představit jako konkrétní komponenty (např. tlačítko, textové pole). Pocitové vzory reprezentují celkový styl produktu (ovlivněny např. používanými barvami, styly ikonek apod.).

V závěru první části se čtenář dozví o důležitosti správného pojmenovávání návrhových vzorů. Dobré názvy nesmějí být moc technické a členové v týmu by měli mít možnost do pojmenovávání promlouvat. Jedině tak budou mít všichni pocit, že přispívají ke společnému dílu a začnou systému desingu důvěřovat. V knize jsou pak ukázány konkrétní cesty, jak toho docílit.

Kapitoly první části se věnují následujícím tématům:

• Kapitola 1: Systémy designu
• Kapitola 2: Principy
• Kapitola 3: Funkční vzory
• Kapitola 4: Pocitové vzory
• Kapitola 5: Společný jazyk

Část II. Postupy

Systém designu se nedá vybudovat jen tak přes noc. Jeho vznik ovlivňuje mnoho faktorů: struktura vaší organizace, týmová kultura, typ samotného produktu a řada dalších věcí. Jedná se o složitý proces a Alla Kholmatova si toho byla při psaní vědoma. Hned první kapitola této části se snaží na příkladech (Airbnb vs. TED) ukázat, že systém designu nemusí být pokaždé provázený přísnými pravidly. Přišlo mně zajímavé tuto část knihy zde v recenzi vypíchnout. Mám totiž pocit, že systém designu bývá částo odmítán právě kvůli obavám z jeho náročnosti nebo případné ztráty kreativity. Tato kapitola se snaží podobné obavy vyvrátit.

Zbývající kapitoly se pak zaměřují na praktické kroky a techniky, pomocí kterých se dá vystavět a udržovat systém designu. Dozvíte se tak, jaké techniky pomáhají při jeho zavádění do organizace. Nemalá část textu je pak věnována ukázkám postupů při tvorbě návrhových vzorů – jak je správně najít, pojmenovat a určit jejich význam. V samotném závěru knihy najdete sekci věnovanou tvorbě knihovny návrhových vzorů (pattern library).

Kapitoly druhé části se věnují následujícím tématům:

• Kapitola 6: Parametry systému designu
• Kapitola 7: Plánování a praktické kroky
• Kapitola 8: Tvorba funkčních vzorů
• Kapitola 9: Tvorba pocitových vzorů
• Kapitola 10: Knihovny návrhových vzorů

Co nového vás kniha může naučit?

1. Jak získat podporu pro systém designu u vedení firmy.
2. Jak provést audit vašeho rozhraní.
3. Jak vybudovat sdílený jazyk designu uvnitř vašeho týmu.
4. Jak posunout myšlení celého týmu od designování jednotlivých stránek po designování produktu jako celku.
5. Jak co nejdříve rozpoznat jednotlivé vzory při návrhu produktu.
6. Jak nalézt rovnováhu mezi znovupoužitelností, konsistencí a přitom zachovat kreativitu.
7. Jak zamezit duplikování a nekonzistencím v návrhu.
8. Jak vybudovat knihovnu návrhových vzorů.
9. Jak efektivně vyvíjet a přidávat nové návrhové vzory.

Ukázková kapitola

Na webu Smashing Magazine je k dispozici ukázková kapitola v PDF (0.7MB). Autorka zde rozebírá výhody dobře navrženého systému designu. Můžete si tak udělat představu o tom, jakým stylem je kniha napsaná.

Co bylo pro mě největším přínosem?

Nové knihy od Smashing Magazine se snaží sledovat poslední trendy kolem vývoje webů. Když jsem se začal o systém designu zajímat já, neměl jsem po ruce žádný ucelený zdroj informací, ze kterého bych mohl čerpat. Jedinou možností bylo získávat informace z různých článků na internetu. Vydání této knihy mně osobně udělalo velkou radost a přišlo v pravý čas.

Pro mě byla kniha Design Systems hlavně zdrojem nových informací. I když jsem měl s designem systému už nějaké zkušenosti, lhal bych, kdybych tvrdil, že jsme měli na projektu vše ideálně nastavené. Proto jsem velice ocenil množství ukázek z jiných reálných produktů, kterými je kniha doslova nabitá. Díky nim se nám podařilo do projektu zanést řadu nových postupů.

Pár slov závěrem

Systém designu po mě znamenal velkou změnu. Než jsme ho s kolegy začlenili do našeho projektu, byl návrh designu a vývoj frontendu jako dva rozdílné světy. Byl jsem zvyklý, že spolupracují jen výjimečně. Nyní vzájemně kooperují a mám pocit, že je naše aplikace díky tomu snáze udržitelná. Znovupoužitelné části systému se snažíme tvořit společně a zároveň využíváme toho, co už je vytvořené. Pokud jste v podobné situaci a hledáte cestu, jak zlepšit spolupráci mezi designery a frontend vývojáři, mohu vám knihu jen doporučit. Design Systems je skvělý startovací bod plný kvalitních informací.

Internet je plný zajímavých zdrojů. Představte si, že jste začínající frontend designer, nebo že jste člověk zkoumající nové možnosti pro sebevzdělávání. Pokud tyto informace pravidelně nevyhledáváte, bude složité se v současném světě frontendu zorientovat. Rozhodl jsem se proto pro malý experiment. Chtěl bych postupně vybudovat seznam zajímavých zdrojů, který by měl být užitečným rozcestníkem právě při podobném hledání.

Seznam má být určený pro všechny frontend designery, kteří se ptají, kde je možné sledovat nejnovější trendy a informace týkající se webových technologií. Chtěl bych v něm postupně popsat nejzajímavější internetové a knižní zdroje. Zmínku si určitě zaslouží i pravidelné srazy a zajímavé konference. Původně jsem se inspiroval dvěma zahraničními projekty podobného zaměření: GitHub: frontend-dev-resources a GitHub: frontend-resources. Nechci však tyto seznamy kopírovat. Část prostoru bych proto rád vyhradil i českým zdrojům. Myslím si totiž, že i v této malé zemi máme řadu zajímavých webů a publikací, ze kterých lze čerpat znalosti. V textu rize české zdroje zvýrazňuji českou vlaječkou.

Jako médium jsem vybral GitHub, protože návštěvníkům umožňuje přidávat vlastní návrhy na změny. Díky tomu mám možnost oslovit českou komunitu frontend designerů a společně se můžeme pokusit rozšířit seznam do obsáhlejší podoby.

Pokud budete hledat knihu zabývající se implementací a návrhem webů, brzo zjistíte, že nemáte pomalu z čeho vybírat. Podobných publikací je jako šafránu. Není se ale čemu divit. Věci spjaté s tvorbou moderních webů se rychle mění. Psát knihu o tématech, které mohou být za dva roky zastaralé, není vůbec snadné. Toto léto však vyšla nová kniha, která se do tohoto tématu pouští rovnou po hlavě. Dámy a pánové, chtěl bych vám představit Vzhůru do (responzivního) webdesignu.

Autorem knihy je Martin Michálek, významná osobnost české frontendové scény. Martin je specialista na CSS a responzivní design. Aktivně píše na svém blogu Vzhůru dolů, spoluzaložil a vede spolek Frontendisti.cz. Je také autorem e-booku Vzhůru do CSS3.

Cílová skupina

Martin hned v úvodu přiznává, že jeho původním záměrem bylo vytvořit technickou příručku pro kodéry. Záhy ale zjistil, že psát o technologiích a zamlčet jejich vazbu na design je v případě responzivního designu nemožné. Vypůjčím si jeho slova: HTML, CSS a design jsou zrátka spojené nádoby. Jsou to odvětví, která spolu úzce souvisí a musí se doplňovat.

Vznikla tak publikace, která na 272 stránkách nabízí množství praktických ukázek a rad. Oslovit by měla širokou škálu čtenářů. Primárně je psaná pro kodéry, kteří využíjí největší část knihy. Získají zde přehled o postupech a technologiích používaných pro tvorbu dnešních responzivních webů. Čerpat z knihy mohou však i designeři, grafici a marketéři. Pro ně jsou naopak určeny texty týkající se statistik, návrhu rozhraní a responzivních navigací.

Pokud občas čtete Martinův blog, jistě poznáte jeho rukopis. Martin si moc nepotrpí na košatá souvětí. Má rád jednoduché věty a přímá sdělení. Texty sem tam doplní svým osobitým humorem. To je přesně jeho styl. V podobném duchu je i celá tato kniha. Díky tomu, že jsou texty značně zjednodušené, měla by být kniha snadno stravitelná i pro začátečníky, kteří se k tvorbě webů dostali teprve nedávno. Pokročilejší čtenář může být zklamaný, když zjistí, že složitější techniky a nástroje nejsou v textu příliš rozebírány. Je to tak trochu daň za veliké zjednodušování. Na podrobnější zdroje je ale vždy odkazováno. Je ponecháno na čtenáři, zda si sám bude chtít nastudovat podrobnosti. Podle mého názoru to ničemu nevadí, ba naopak. Kniha se o to snadněji čte, lépe se v ní orientuje a každý čtenář si tak přijde na své.

Oblasti, kterým se kniha věnuje

Kniha se postupně dotýká celé řady témat, se kterými by měl přijít do styku každý dnešní web v průběhu svého vývoje. Obsah je rozdělen do následujících kapitol:

1. Úvod do tvorby webu
2. Dokument jako základ
3. Viewport na mobilech
4. Rychlost načítání
5. Obrázky a další média
6. Návrh rozhraní v éře mobilů
7. Design komponent rozhraní
8. Media queries a layout
9. Responzivní navigace
10. Testování responzivních webů

Kniha s vlastním dějem

Do knihy se podařilo dostat zajímavou dějovou linku. Martin zde popisuje, jak by budoval pomyslný eshop s outdoorovým vybavením ForestKid.cz. Jednotlivé kroky začíná návrhem uživatelského rozhraní. Čtenáři radí, jak se neunáhlit a neskočit rovnou na kódování jednotlivých částí. Společně tak procházíme jakousi výzkumnou fází projektu. V dalších kapitolách směřujeme k tvorbě samotného dokumentu a po částech budujeme produktovou stránku eshopu. Výzkumnou fázi tak postupně nahrazují praktické části. Texty jsou navíc doplněny o příklady umístěnými na CodePen. Ukázky je tak možné si vyzkoušet přímo v prohlížeči.

Designování v prohlížeči

V knize vás může překvapit, že při budování ukázkového eshopu nedochází k přípravě grafických souborů designerem a k jejich následnému oživení v prohlížeči. Postup, který je zde použit, se nazývá designování v prohlížeči. Vytváříme nejprve hrubou kostru aplikace, kterou v několika iteracích zpřesňujeme a vylaďujeme do finální podoby. Cílem je, dostat obsah co nejdříve do prohlížeče a odhalit včas případné problémy při návrhu. Martin je velkým propagátorem tohoto přístupu a hovořil o tom např. na WebExpo 2015. Jak však sám v knize uvádí: „Není dobrého nebo špatného pracovního postupu. Důležitý je vždy výsledek.“ Je zde ale zřejmé, že při designování přímo v prohlížeči se dobře vysvětlují principy responzivního designu.

Celkové dojmy

Ze Vzhůru do (responzivního) webdesignu jsem opravdu nadšený. Na řadě knih o webdesignu mi vadilo, že buď postrádají dostatek praktických ukázek nebo ukázky nepřináší nic nového. Opakují věci, které jsou zkušenějším kodérům známé. Martin jde o trochu dál. Jako bonus nabízí čtenářům vlastní know-how. Abyste pochopili, co tím myslím, zde je jeden příklad:

V knize je odkaz na žátěžový test typografie. Jedná se o připravený dokument obsahující všechny myslitelné i nemyslitelné HTML elementy, které mají různou délku a jsou do sebe různě zanořené. Jako kodér si ho můžete stáhnout, přidat k němu vlastní CSS a snadno tak otestovat, zda při tvorbě stylů na nic nezapomněl. Je to děsně jednoduché a ušetří to práci. I já jsem připravený dokument ve svém projektu už použil.

Ze začátku čtení jsem měl trochu obavu, aby celá kniha nepůsobila jako referenční příručka. V první půlce knihy je v textech často odkazováno na témata, která se teprve budou probírat v následujících kapitolách. Navíc zde nacházíme množství odkazů na články umístěné na blogu. Musím ale uznat, že jak jsem pokračoval ve čtení, přestal jsem toto naprosto vnímat. Jakmile jsem měl pocit, že bych si potřeboval víc nastudovat, použil jsem odkaz a přešel na blog Vzhůru dolů. Zde je krásně vidět, jak se Martinovi zúročuje jeho intenzivní psaní článků z posledních let, kterými pokrývá různá témata z oblasti webdesignu.

Přeci jen musím zmínit jednu oblast, která by podle mého názoru zasloužila větší pozornost. Jedná se o přístupnost při psaní dokumentu webu. V knize sice najdete zmínky o použití HTML5 tagů a WAI-ARIA atributů. Dočtete se, že dodávají sémantickou informace a můžou pomoci např. zrakově hendikepovaným v lepší orientaci na webu. Tím zde popis končí a čtenář je pro bližší informace odkázán na blogový článek. Nějaká drobná kapitola na toto téma by se hodila. Kdo ví, třeba se v budoucnu dočkáme dalšího pokračování.

Pár slov závěrem

Kniha se podle mě opravdu povedla. Snadno se čte a jedná se o cenný zdroj informací nejen pro kodéry, ale i další lidi figurující v procesu budování webu. Místo v mé knihovně zatím ještě nezabere. Ale jen z toho důvodu, že by se tam na ní zbytečně prášilo a tak jí nosím při sobě a v případě potřeby do ní nahlédnu. Pokud uvažujete o nějaké formě sebevzdělávání v oblasti webdesignu, mohu vám ji vřele doporučit.

Pokud se zabýváte novinkami kolem vývoje frontendu, nemohlo vám uniknout, že Smashing Magazine vydává každým rokem několik svých publikací. Letos v září byla výdána nová kniha s názvem Inclusive Design Patterns. Knihu jsem si objednal a musím říct, že se četla doslova sama. Rozhodl jsem se proto sepsat hlavní postřehy pro ty z vás, kteří možná ještě přemýšlí nad koupí nebo hledají možnost pro nové sebevzdělávání.

Autorem knihy je Heydon Pickering, známý jako UI designer, řečník a odborník na přístupnost na webu. Na Smashing Magazine je autorem několika zajímavých článků. Dále provozuje svůj blog HeydonWorks.

Zaměření knihy

Hlavním tématem knihy je tvorba snadno přístupných webů a webových rozhraní. Autor říká, že si možná ani tento problém neuvědomujeme, ale jako vývojáři vytváříme špatně přístupné webové stránky odjakživa. Problémem není nedostatek talentu nebo vědomostí. Problémem je způsob, jakým řešíme konkrétní úkoly.

Heydon si dal za cíl čtenářům ukázat, jak lze vytvořit přístupná rozhraní bez velkého úsilí. Chce všem sdělit, že je nutné nad návrhem komponent přemýšlet jiným způsobem. Je třeba navrhovat web inkluzivně.

Inkluzivní design – co to spojení znamená?

Inkluzivní návrh webu hovoří o tom, že je třeba při vývoji frontendu nahlížet na problém z různých perspektiv. Váš web si budou pravděpodobně prohlížet velice různí uživatelé. Musíme brát v potaz už jen to, že někteří z nich budou web prohlížet na svém notebooku a jiní na mobilu. Někteří můžou mít velice špatné internetové připojení. Jiní zas trpí zrakovou vadou a jsou odkázaní na své čtečky obrazovky s hlasovým výstupem. A to je jen drobný výčet možných situací. Inkluzivní návrh je takový návrh, který počítá s možnými problémy.

Vypůjčil jsem si jednoduchou ukázku z knihy.

HTML:

<div class="button"></div>

CSS:

.button {
  width: 200px;
  height: 70px;
  background: url('../images/button.png');
}

JavaScript:

button.addEventListener('click', function() {
  // the event fired on click
});

Takto navržené tlačítko nepočítá s rozdílným chováním uživatelů. Možných problémů je hned několik. Například:

• Tlačítko obsahuje PNG obrázek. Uživatel, který bude zoomovat na svém mobilu nebo uživatel s Retina obrazovkou, bude tlačítko vidět rozmazané.
• Pokud zakážeme načítání obrázků úplně, stane se takto navržené tlačítko neviditelné.
• Protože je použitý <div> element namísto <button>, nebude možné udělat na tlačítko focus pomocí TAB klávesy.
• Protože textový popisek tlačítka je umístěný přímo v obrázku, zrakově postižení lidé nemají možnost jak zjistit, který popisek tlačítko obsahuje. Jejich čtečky danou informaci v HTML kódu nenajdou. Navíc takové tlačítko nelze přeložit do jiných jazyků. Tudíž ani uživatelé ze zahraničí, kteří neznají náš jazyk, nebudou schopni daný web používat.

Na tvorbu tlačítka a možné problémy je třeba nahlížet z různých perspektiv. V knize je potřeba podobného uvažování neustále opakována. Vždy je vše vysvětleno na konkrétních praktických ukázkách.

Ať jsi začátečník nebo pokročilý kodér, určitě se dozvíš něco nového

Když jsem zvažoval, zda tuto knihu vůbec objednat, tak jsem prvně trochu váhal. Říkal jsem si: „Tvorbou webů se zabývám již deset let a za tu dobu člověk posbírá veliké množství zkušeností. Přinese mně tato kniha něco nového?“ Navíc se snažím pečlivěji vybírat, do čeho investuji svůj volný čas. Co jsem rozhodně něchtěl, je dokola pročítat základní teorii. To považuji za problém i u spousty článků nebo přednášek, na které na internetu narážím – málo konkrétních ukázek, spousta teorie a konceptů. Naopak zbožňuji a vyhledávám připadové studie – jdou přímo k věci a na konkrétních ukázkách se toho nejvíce naučím.

Potěšilo mě, když jsem zjistil, že kniha je doslova napěchována praktickými ukázkami. Obsahuje spoustu komponent a připravených ukázek kódu, které můžete rovnou použít v konkrétních situacích.

Nemusíte mít obavu, že se budete učit vytvářet pouze základní věci, jako tlačítka nebo odkazy. Na své si přijde jak začátečník, tak i pokročilý kodér. Kniha z kraje zmiňuje, jak zapisovat správně např. HTML dokument nebo titulek stránky. Důraz se klade opět na přístupnost. Pokročilý čtenář může tento text jen prolétnout a zpytovat své svědomí, zda skutečně daná doporučení dodržuje.

Po několika základních kapitolách přicházejí na řadu pokročilejší techniky. Dozvíte se tak například:

• jak správně vytvářet přístupné navigace
• jak vytvářet SVG ikonky, které nesou sémantickou informaci
• jak vytvářet správně formuláře
• jak vytvářet jejich validační hlášky způsobem, abychom správně informovali i uživatele se zrakovým postižením použivající čtečku

Podobných oblastí, kterým se kniha věnuje, je monohem více.

Oblasti, kterým se kniha věnuje

Obsah knihy lze rozdělit do následujících kapitol:

1. Dokument
2. Odstavec
3. Jak tvořit blogové články?
4. Navigace
5. Menu tlačítko
6. Inkluzivní prototypování
7. Jak tvořit seznamy produktů?
8. Jak vytvářet přístupné filtry?
9. Registrační formuláře
10. Test-Driven-Development při tvorbě frontendu

Co bylo pro mě největším přínosem?

Nejvíce mě překvapilo, jak jsou jednotlivé příklady v knize dávány do spojitosti s použitelností pro zrakově postižené uživatele. Až díky jejich čtečkám obrazovky si dokážeme uvědomit, zda poskytujeme správné sémantické informace. Základní principy jsem znal. Nikdy mně ale nenapadlo, že je třeba použít speciálního přístupu např. při zobrazení validačních hlášek nebo v případě, že používáme „preloadery“. V této oblasti jsem získal řadu cenných informací.

V čase, kdy píšu tento článek, patří Inclusive Design Patterns mezi nejzajímavější knihy z oblasti frontendu, které jsou na trhu. K dispozici je na webu Smashing Magazine, kde je možné pořídit tištěnou nebo jen elektronickou verzi.

Outline je jednoduchý, ale mocný nástroj, který se využívá především pro lepší přístupnost elementů na webu. I přesto, že se snažím psát přístupné weby a webové aplikace, nevyhnu se občas situacím, kdy musím jeho nechtěné styly zrušit. V následujícím článku bych rád ukázal, jak se dá na nechtěný outline vyzrát.

Co představuje CSS outline?

Pěkná definice CSS vlastnostni outline je popsána na portálu CSS-Tricks. V kaskádových stylech používáme outline k vykreslení linky kolem vnějšího okraje elementu. Výsledek je hodně podobný použití klasického border kolem nějakého prvku. Je zde ale několik rozdílů:

1. Vždy vede kolem všech stran prvku. Nemůžeme tak definovat, že by měl outline vést pouze pod prvkem.
2. Není součástí box modelu, tudíž použití outline nemůže ovlivnit pozici samotného elementu nebo sousedních prvků. Co je to box model skvěle popisuje Martin Michálek na svém webu vzhurudolu.cz.

Mezi další věci, které stojí za zmínku, je např. nemožnost nadefinovat border-radius. Což je logické protože se nejedná o klasický border. Nemusí se také jednat vždy o klasický obdélníkový tvar. Pokud outline jde kolem prvku, který obsahuje různé velikosti fontů, můžeme dostat i nepravidelný rámeček. Ukázku nepravidelného outline je možné vidět na této ukázce. Stačí jen udělat :focus na daný odkaz.

Využití na webu

Díky tomu, že outline není součástí box modelu, neovlivní nám jeho používání už definované CSS styly. Pokud to srovnáme s klasickým rámečkem border, tak jeho použití nám může měnit výslednou šířku a výšku elementu. Pokud vezmeme čisté HTML bez jakýchkoliv CSS stylů, tak zde je vlastnost outline použita pro zlepšení přístupnosti na webu. Poskytuje vizuální zpětnou vazbu pro aktuálně vybraný prvek na stránce. Na následujícím obrázku je ukázka aktivního formulářového políčka:

Vybrat nějaký prvek na stránce lze velice snadno. Stačí použít pro pohyb klávesnici namísto myši. Klávesa TAB je ideálním příkladem. Nemusí se vždy jednat jen o klasickou klávesnici vašeho PC. Při prohlížení webu na moderních TV, budeme pravděpodobně používat místo klávesnice dálkový ovladač. Ve všech těchto situacích potřebujeme vědět, který prvek je vybraný pro případné další interakce (psaní, kliknutí, přehrání videa, …).

V CSS lze na podobné prvky cílit pomocí tzv. :focus selektoru. Tento selektor je dostupný na každém HTML elementu, který může přijímat vstupy z klávesnice nebo jakékoli další vstupy od uživatele. Jedná se tedy o všechny odkazy, tlačítka, formulářové položky apod. Pokud se nám klasická „outline záře“ nelíbí, můžeme ji následujícím zápisem zrušit:

:focus {
  outline: 0;
}

Pokud toto ale uděláme, je třeba mít na paměti, že namísto outline musíme použít například border rámeček nebo jiný způsob zvýraznění. Nikdy nerušte styly pro :focus úplně! Dobrou přístupnost vaši uživatelé ocení. Pro více informací doporučuji doporučení přímo od W3C.org.

Proč mnoho webdesignerů ruší outline?

Důvody bývají často jednoduché – ješitnost designera, časový pres nebo úplná neznalost přístupnosti na webu. Nehezká modrá záře, kterou vydává outline, často nezapadá do budoucí vize. Bývá proto „jednoduší“ outline odstranit úplně. Alternativní zvýraznění se poté už designer neřeší a dodaný design pak s něčím takovým nepočítá.

Nutno dodat, že odebraní outline nemuselo být vždy záměrem frontendisty. Dnes již zastaralý Reset CSS od Erica Meyerse rušil zvýraznění aktivních prvků úplně. V kódu byla sice poznámka /* remember to define focus styles! */, jenže ne každý si toho všiml. Novější řešení jako Normalize.css nebo Reboot tímto neduhem už netrpí.

Proč já ruším outline?

Napřipadám si jako ješitný designer, i znám základy dobré přístupnosti na webu. Poslední léta se soustředím převážně na vývoj webových aplikací a zde (možná ještě více než na webu) nastávají situace, kdy uživatel střídá myš i klávesnici. Ať chcete nebo ne, dříve nebo později se dostanete do situace, kdy potřebujete zrušit nechtěný outline, který občas někde vyskočí. Chtěl bych vám ukázat jednoduchý trik, jak lze zrušit outline pouze v některých případech a neohrozit přitom přistupnost samotného webu.

Rešení jsem našel v drobné JS knihovně What Input?, která sleduje všechny vstupy uživatele na webu. Na základě toho přidává k HTML tagu <head> další atributy a neustále mění jejich hodnoty, podle toho, co uživatel na webu momentálně dělá. Výsledek pak vypadá nějak takto:

<!doctype html>
<html class="whatinput-types-initial whatinput-types-mouse whatinput-types-keyboard" lang="en" data-whatinput="keyboard" data-whatintent="mouse">
<head>

Za zmínku stojí tyto přidané atributy:

• data-whatinput - hodnota tohoto atributu se mění v závislosti na přímých vstupech od uživatele. Může nabývat hodnot mouse, keyboard a touch.
• data-whatintent – hodnota tohoto se mění v závislosti na nepřímých vstupech od uživatele.

Když uživatel píše text do formulářového políčka, budou mít oba atributy hodnotu keyboard. Jakmile však pohneme myší bez kliknutí, změní se hodnota atributu data-whatintent na mouse. A to je celé. Na tyto atributy můžeme pak reagovat v CSS stylech.

/* výchozí :focus styl před tím než se načte knihovna WhatInput */
:focus {

}

/* výchozí styl po spuštění WhatInput, ale před jakoukoliv jinou interakcí */
[data-whatinput="initial"] :focus {
  outline: 2px dotted black;
}

/* focus pomocí myši */
[data-whatinput="mouse"] :focus {
  outline-color: red;
}

/* focus pomocí klávesnice */
[data-whatinput="keyboard"] :focus {
  outline-color: green;
}

/* focus pomocí dotykového zařízení */
[data-whatinput="touch"] :focus {
  outline-color: blue;
}

Pokud se knihovna WhatInput z nějakého důvodu nenačte, máme stále jistotu, že výchozí zvýraznění aktivních prvků je k dispozici.

Nejvíce mi většinou vadí nechtěný outline vznikající při použití myši. Při využití knihovny WhatInput, se ho zbavím velice snadno:

[data-whatintent="mouse"] .prvek:focus {
  outline: 0;
}

Nyní mám jistotu, že se mi nechtěný outline neobjeví při pohybu myši. Jakmile použiji k pohybu po webu například TAB klávesu, změní se hodnota atributu na data-whatintent="keyboard" a potřebný outline pro lepší přístupnost je zpět.

V SASS jsem si definici podobného stylu zjednodušil použitím mixinu:

@mixin disable-mouse-outline {
  [data-whatintent='mouse'] & {
    outline: 0;
  }
}

/* použití u konkrétních problematických prvků */
.prvek:focus {
  @include disable-mouse-outline;
}

Pár slov závěrem

Zvýraznění aktivních prvků je na webu velice důležité. Designer znalý dobré přístupnosti na webu by nikdy neměl dopustit, že nepoznáme aktivní element. Osobně si myslím, že není nutné všude používát defaultní outline. Například u formulářových políček dávám často přednost border rámečku. Dá to jen více práce nachystat potřebné styly. Naopak pro klasické odkazy považuji použití výchozího outline za ideální řešení.

CSS vlastnost z-index určuje prioritu při překrývání HTML elementů. Jedná se vlastně o výšku prvku na ose z. Definice se provádí pomocí celého čísla a čím větší číslo prvek dostane, tím více v popředí se bude nacházet. Ať chceme nebo ne, použití vlastnosti z-index se u větších projektů časem nevyhneme. Asi si dokážete představit, že pokud takových definic budeme mít v kódu více, je rázem těžší udržovat správné pořadí. Nehledě na to, že jakákoliv změna pořadí v budoucnu je poměrně pracná a náchylnější na vznik chyb. V tomto článku bych chtěl ukázat jednoduchý trik, jak lze zkrotit definici z-index v jazyce SASS.

Celé kouzlo spočívá v tom, že všechny výskyty z-index definujeme pouze na jednom místě v kódu. V SASS k tomuto účelu můžeme použít tzv. mapy. Jedná se o asociativní datový typ, který nám dovoluje definovat více hodnot v rámci jedné proměnné. Každá hodnota má svůj unikátní klíč. Například takto:

$colors: (
  primary: #FFBB00,
  secondary: #0969A2,
);

Podobně si uložíme do jedné proměnné všechny hodnoty z-index, které na projektu používáme:

/**
 * Global definitions for all z-indexes on the web
 */

$layer: (
  disabled-element: 20,
  panel: 950,
  form-bubble: 985,
  header-dropdown: 1100,
  page-sidebar: 1200,
  date-range-picker: 1500,
  modal: 2000,
);

Konkrétní hodnotu lze v SASS získat pomocí funkce map-get, které předáme jako parametr právě námi definovanou mapu $layer a požadovaný klíč.

.modal {
  z-index: map-get($layer, modal);
}

Já si celý zápis ještě více zjednodušuji pomocí vhodně definované funkce:

/**
 * Function for better work with z-indexes;
 */

@function layer($name) {
  @if map-has-key($layer, $name) {
    @return map-get($layer, $name);
  }

  @warn "The key '#{$name}' is not in the map '$layer'";
  @return null;
};

Výhodou použítí této funkce je, že si nemusím pamatovat název proměnné, ve které mám uložené hodnoty z-index. V kódu pak použiji pouze jednoduchý zápis:

.modal {
  z-index: layer(modal);
}

Díky tomu, že mám všechny hodnoty uložené na jednom místě, se výrazně zjednoduší a zpřehlední všechny budoucí úpravy. Například takové přečíslování hodnot z-index je rázem velice jednoduchý úkon a není třeba pracně procházet celý kód. Upravíme pouze jednu proměnou.

Zamýšleli jste se někdy nad tím, jak veliké mají být dotykové prvky, které máte umístěny na webu? Totiž ne každý element, který vytvoříte, je snadno dostupný pro všechny uživatele. Kurzor myši je velice přesný a dokážete s ním zaměřit i poměrně malé oblasti. Situace se však změní, když použijete jiné zařízení a zkusíte web ovládat pomocí prstu na tabletu nebo na mobilním telefonu. Pojďme se společně podívat na doporučení, které nám dávají společnosti Google, Apple a Microsoft.

Proč ale dát na rady zrovna těchto společností? Google stojí za vznikem operačního systému Android, Apple je tvůrcem iOS a Microsoft má svůj Windows (Phone). Jeden z těchto tří operačních systémů tvoří základ dnešních chytrých telefonů. Aby byla zajištěna dobrá použitelnost webů i na mobilních zařízeních, vydávají tyto společnosti doporučení, jak by měla vypadat ideální velikost dotykových oblastí.

Dotykové oblasti podle Google

Specifikace Google doporučuje volit rozměry jednotlivých dotykových oblastí alespoň 48 × 48 dp pro zachování ideální použitelnosti na dotykových zařízeních. Zároveň by měl být dodržen rozestup mezi více dotykovými prvky nejméně 8 dp. Rozměr 48 dp lze přirovnat fyzickému rozměru 9 mm v závisloti na typu displeje.

Jednotka dp je zkratkou pro Density-independent pixel – tzv. pixel nezávislý na hustotě displeje. Setkáme se s ní na zařízeních s operačním systémem Android a využijí ji především vývojáři Android aplikaci. Používá se pro jednotné zobrazení elementů na obrázovkách s rozdílnou hustotou. Pokud však jako frontendista píšete čistě jen CSS, nemusíte si s dp vůbec lámat hlavu. Rovnout můžete místo jednotky dp uváděd px.

Na následujícím obrázku můžete vidět postupně avatar, ikonku a tlačítko. Dotykové oblasti jsou ve všech případech vysoké 48 dp. I v situaci, kdy je tlačítko nadesignované na výšku pouhých 36 dp, měla by být velikost dotykové oblasti podle doporučení Google vysoká alespoň těch zmíněných 48 dp.

Dotykové oblasti podle Apple

Apple doporučuje volit minimální rozměr dotykových oblástí o velikostech 44 × 44 bodů. Původně byl tento údaj uváděn v pixelech. Rozměr 44 × 44 pixelů je navržen tak, aby odpovídal ideální velikosti dotykové oblasti na starších iPhone s displejem 3.5“ o rozlišení 320 × 480 px (164ppi). Jakmile však přišel Retina displej, který má dvojnásobnou hustotu (326ppi), upravil Apple zároveň své specifikace a uvádí všude body namísto pixelů. I zde však platí pravidlo, že pokud kódujete pouze CSS styly, můžete všude automaticky uvádět pixely.

Dotykové oblasti podle Microsoftu

Specifikace Microsoftu doporučuje volit minimální rozměr dotykových oblastí o velikostech 9 mm nebo větší. To odpovídá rozměru 48 x 48 pixelů (na displeji s hustotou pixelů 133ppi). Vyloženě pak upozorňuje, ať se vyvarujete používání oblastí menších než 7 mm. Pokud máte více dotykových prvků vedle sebe, měl by být dodržen rozestup alespoň 2 mm.

Má cenu řešit až takové detaily?

Velikost dotykových oblastí se v dnešní době opravdu nevyplácí podceňovat. Malá tlačítka nejvíce překvapí uživatele přistupujícího z mobilního zařízení. Není nic otravnějšího než zkoušet třikrát kliknout na položku v menu a až na třetí pokus se dostat na požadovanou stránku. Jiný problém může nastat v případě, kdy se budete snažit vměstnat více dotykových oblastí vedle sebe. Trefit se pak do správného místa, nemusí být zrovna snadné.

Závěrem bych možná jen zmínil, že když jsem velikosti dotykových oblastí testoval na svých zařízeních, začínal jsem mít znatelné problémy až u rozměrů pod 40 pixelů. Proto bych nedoporučoval volit rozměry menší. Větší oblasti rozhodně přispějí jen k lepší použitelnosti a to ocení především budoucí návštěvníci webu.

Zdroje

• Google Design – Metrics & keylines
• iOS Developer Library – Adaptivity and Layout
• Microsoft – Guidelines for targeting

Nedávno jsem se začal více zaměřovat na práci s SVG souborama a také na tvorbu SVG animací. Specializuju se převážně na UI a nepoužívám žádné složité Javascript frameworky. Dá se říct, že ke spokojenému životu front-end vývojáře si vystačím pouze s běžnou knihovnou jQuery. Před nedávnem jsem narazil na zajímavý problém. Potřeboval jsem po kliknutí přidat třídu do SVG elementu na stránce, abych mohl nechat proběhnout CSS3 animaci. Všechny knihovny jsem měl načtené. Nicméně po zavolání $('#js-svg-element').toggleClass('element--animated'); se nestalo vůbec nic.

Přiznám se, že jsem nad tím strávil dost času, než mně došlo, že bude zakopaný pes někde jinde. Stále jsem si myslel, že chyba musí být ukrytá v mém kódu. Nakonec jsem však našel vysvětelní. Manipulace s třídami v jQuery nefunguje na SVG elementech, protože jQuery k tomuto účelu používá vlastnost className. O konkrétní volání v jQuery se stará tato část kódu attributes/classes.js

cur = elem.nodeType === 1 && ( elem.className ?
    ( " " + elem.className + " " ).replace( rclass, " " ) :
    " "
);

Toto volání funguje na běžných HTML elementech. Avšak vlastnost className se na SVG elementu chová trochu jinak. Nevrací totiž běžný string, ale instanci SVGAnimatedString.

Autoři jQuery o tomto problému ví, nicméně mají tento problém umístěný na seznamu požadavků, které nechtějí řešit. Naštěstí existuje jednoduchý trik, s kterým se dá tento problém obejít:

jQuery .attr()

Asi nejjednodušším řešením je použití jQuery metody .attr():

/**
 * Místo volání metody .addClass('element--animated')
 */
$('#js-svg-element').attr('class', 'element--animated');

/**
 * Místo volání metody .removeClass('element--animated')
 */
$('#js-svg-element').attr('class', '');

Volání metody .attr() nahradí celý atribut class, takže pokud již máte na vybraném elementu nějakou třídu a nechcete o ní přijít, budete muset zápis trochu rozšířit:

/**
 * Místo volání metody .addClass('element--animated')
 */
var element = $('#js-svg-element');
var classes = element.attr('class');
element.attr('class', classes + ' element--animated');

classList

Druhým řešením, které jsem našel, je použít classList dostupný ve Web API Interface. classList je považován jako alternativa k běžnému volání, které vrací string tříd oddělených mezerami. Pro manipulaci s třídami nabízí tři metody: .add, .remove a .toggle.

// div je objekt, který ukazuje na element <div class="foo bar"></div>
div.classList.remove("foo");
div.classList.add("anotherclass");

// Pokud je třída visible dostupná, tak ji odebere.
// V opačném případě ji přidá.
div.classList.toggle("visible");

Bohužel Microsoft tuto možnost podporuje ve svých prohlížečích velice slabě. Pokud budeme chtít toto volání podporovat pro Internet Explorer 9, je třeba své stránky rozšířit o Javascrit Shim, který nám zajístí potřebnou dostupnost pro IE9 a Opera Mini.

Závěrem

Na první pohled je druhé řešení mnohem elegantnější a dovolí nám mnohem kratší zápis. Ale řekněme si na rovinu, že v dnešní době je stále nutné zajišťovat podporu pro prohlížeče Internet Explorer 9. Osobně zastávám názor, že přidávání dalších knihoven (jako Javascript Shim) do projektu mně za tu snahu nestojí. Snažím se totiž držet počet pluginů a závislostí na možném minimu. První řešení pomocí jQuery .attr() je za mě jasným vítězem.

Zdroje

• http://stackoverflow.com/a/29525743
• jQuery Won’t Fix
• Článek na blogu Martin Wolf
• Learn and Master jQuery

K napsání tohoto článku mě vedla dřívější diskuze, kterou jsem otevřel ve skupině Frontedisti.cz na Facebooku. Když jsem se tehdy o danou problematiku zajímal, tak jsem chtěl zjistit, jak přistupují jiní kolegové z oboru k designovnání klasických formulářových selectboxů. Pokud jste frontendista, tak se s tímto problémem dříve nebo později setkáte. A záhy zjistíte, že je k dispozici veliké množství různých knihoven, které tento problém řeší. Nicméně pokud chcete být opravdu precizní a postihnout různé případy používání, tak se váš výběr poměrně zužuje. Rád bych v následujícím textu zmínil několik bodů, na které je třeba podle mého názoru pamatovat.

Začínáme

Na začátku práce obrží frontendista grafický návrh. Když se zaměřím pouze na selecboxy, tak může být naším cílem vytvořit třeba něco takového:

Přičemž rozbalená nabídka by měla vypadat následujícím způsobem:

Cílem práce frontendisty bude, aby takovýto selectbox vypadal ve všech prohlížečích stejně. A to nehledě na to, jestli si budoucí web budeme prohlížet na stolním počítači a nebo na svém mobilu ve vlaku.

Dnešní doba si (možná) žádá čisté CSS řešení

Jedním z přístupů by mohlo být překreslení pouze za pomocí kaskádových stylů. U běžných HTML elementů by s tím nebyl problém. Bohužel selecbox se řadí do kategorie tzv. systémových elementů (podobně jako checkbox nebo radio list). Pro nás to znamená, že na takovéto elementy budeme těžko aplikovat vlastní design. Prohlížeč totiž tyto prvky vykresluje podle svých zvyklostí, které jsou dány operačním systémem, na kterém se nacházíte. Situace se sice poslední dobou začíná měnit k lepšímu a frontendistům se otvírá více možností jak stylovat jen za pomocí CSS. Nicméně stále žijeme v době, kdy je třeba pamatovat na starší prohlížeče jako jsou Internet Explorer 9 (případně i verze 8) a další. A každý z nich si tyto prvky vykresluje stále po svém. Firefox nám třeba neumožní překreslit šipku symbolizující možnost rozbalení nabídky a dostaneme následujcí rozbitý výsledek:

S čistým CSS řešením si tedy nevystačíme.

Pomožme si Javascriptem

Ať chcete nebo ne, pokud je třeba sladit selectboxy se zbytkem webu, musíte ještě v dnešní době sáhnout po Javascriptové knihovně. V praxi tyto knihovny fungují tak, že samotný selectbox skryjí a místo něho vytvoří vlastní část HTML kódu, kterou lze pak snadno ostylovat. Pokud si vyberete něco z rozbalovací nabídky nově vzniklého elementu, tak příslušný Javascript změní vybranou hodnotu i ve skrytém selectboxu. Samotný formulář nic nepozná. Při stisknutí potvrzovacího tlačítka se odešlou vždy správné hodnoty. Vše funguje správně jak na stolním počitači, tak na tabletu nebo mobilu.

V čem je tedy zakopaný pes?

Problém nastane až v situaci, kdy začneme více přemýšlet nad použitelností na dotykových zařízeních. V případě, že použijeme zmíněné „obyčejné“ Javascriptové řešení, bude rozbalená nabídka selectboxu vypadat všude stejně. Jak na stolním počítačí, tak i na mobilu. V případě našeho ukázkového řešení dostaneme tedy následující výsledek:

Pokud na chvilku zapomeneme na náš grafický cíl, kterého chceme dosáhnout, tak základní neostylovaný selectbox reaguje i na mobilních zařízeních různým způsobem. Na iPhone telefonu bude výběr hodnoty zobrazen pomocí „rolovátka“:

Když budeme chtít vybrat hodnotu na zařízeních s Androidem, uvidíme úplně jiný způsob výběru:

Lze si všimnout, že každý operační systém i napříč mobilními zařízeními, zobrazuje nabídky selectboxů po svém. Výhodou ale je, že takovýto seznam je snadno čitelný a rychlé se ovládá. Vždy je optimálně přizpůsoben zvyklostem na daném zařízení.

Uživatele je zbytečné „okrádat“ o tento způsob výběru hodnot, na který je zvyklý na svém zařízení. Nejlepší řešením, které můžete na dotykovém zařízení zvolit, je ostylovat pouze tělo selectboxu, aby zapadalo do vašeho grafického návrhu a rozbalovací nabídku ponechat systémovou. Budeme-li se bavit o mobilu, tak si to můžeme dovolit. Vzhledem k trvanlivosti samotného telefonu má většina uživatelů chytrých telefonů už zařízení, které podporují moderní standardy. Troufnu si říct, že díky tomu na mobilním telefonu netrpíme obdobným problémem jako u klasických prohlížečů.

Ozkoušel jsem si, že není problém přestylovat selectbox pouze pomocí CSS. Pro ostylování naší ukázky postačí něco takového:

select {
  box-sizing: border-box;
  display: block;
  padding:  0.375rem 0.4375rem;
  margin:  0 0 0.9375rem 0;
  height: 2.25rem;
  width: 100%;
  max-width: 355px;

  font-family: inherit;
  font-size: 1rem;
  line-height: 1.3125rem;

  appearance: none !important;
  background-color: #fff;
  background-repeat: no-repeat;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAsCAYAAACdQGM6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjVBNTA4NjlEOUQ1MTFFMzhCQkQ4NTYxQjFCRjUyNkUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjVBNTA4NkFEOUQ1MTFFMzhCQkQ4NTYxQjFCRjUyNkUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCNUE1MDg2N0Q5RDUxMUUzOEJCRDg1NjFCMUJGNTI2RSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCNUE1MDg2OEQ5RDUxMUUzOEJCRDg1NjFCMUJGNTI2RSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PnaZgBgAAACiSURBVHja7NfLCcQgEAbgUQIePVqBBViBBQh24smCbMeDFQniZveUQxKISZCFf8CTI9/4BKmU0tegGY3TxAAOHDhw4MCBA/9ffLmSnHPuKaXTHOccee/Z4zM3xpDW+rBfKUXW2neWXQjBQgi7BXzhGCNJKdlre75XwAg8fOC2BYzCv7jzaWit9Vrr8Pjl1j3lnK0Njwxw4MCBAwcOfE58BBgAnE/QLQwhc+sAAAAASUVORK5CYII=);
  background-position: right center;
  color: #333;
  border: 1px solid #ccc;
  border-radius: 5px;
}

Pojďme oba přistupy zkombinovat

Co jsem zjistil, lze shrnout do dvou bodů:

1. V běžném prohlížeči si s čistým CSS řešením zatím v dnešní době nevystačíme. Je třeba sáhnout po Javascriptové knihovně, která nám zajistí to, že přestyluju jak samotný selectbox, tak i jeho rozbalovací nabídku.
2. Na mobilním zařízení by byla škoda zobrazovat přestylovanou rozbalovací nabídku. Z hlediska použitelnosti plně postačí přestylovat pouze tělo selectboxu. A rozbalovací nabídku použít nativní. Na tu je uživatel na daném zařízení zvyklý.

A jde to vůbec oba přísupy zkombinovat? Já tvrdím, že určitě ano. Možností je hned několik.

Pro ty z vás, kteří využívají Boostrap, můžete vyzkoušet třeba oblíbenou knihovnu Select2. Jediný rozdíl bude v tom, že ji nenačtete pokaždé, ale musíte prvně detekovat přístup z mobilního zařízení. A pokud se na takovém zařízení nacházíte, tak nenačtete Select2, ale ponecháte čístý CSS styl. Pro účely detekce postačí následující jednoduchá Javascriptová podmínka:

if (window.navigator.appName === "Microsoft Internet Explorer") {
  return document.documentMode >= 8;
}
if (/iP(od|hone|ad)/i.test(window.navigator.userAgent)) {
  return false;
}
if (/Android/i.test(window.navigator.userAgent)) {
  if (/Mobile/i.test(window.navigator.userAgent)) {
    return false;
  }
}
return true;

Kdyby náhodou váše mobilní zařízení i tak podmínkou prošlo, tak nemusíte zoufat. Načte se vám přestylovaný selectbox pomocí Select2 a i nadále bude vše funkční.

Já jsem naštěstí objevil knihovnu, která moje požadavky splňuje na maximum. Jmenuje se Chosen jQuery plugin. A v podstatě je to knihovna, kterou bych považoval v současnosti za vítěze mého hledání. Výše zmíněnou detekci má již v sobě. Jediné co tedy stačí splnit, je několik základních kroků potřebných k instalaci. V balíčku, kteří autoři nabízí ke stažení, naleznete základní kaskádové styly v CSS a také verzi pro SASS. Pokud však používáte LESS či Stylus, tak přepsání kaskádových stylů nezabere mnoho času. Syntax není vůbec složitá.

Pár slov závěřem

Rád bych závěrem zmínil, že ve výsledku nezáleží ani tak na použité knihovně. Každému projektu totiž vyhovují jiné nástroje. Já jsem se v tomto článku pokusil vypíchnou několik základních bodů, na které se podle mého názoru v České republice zapomíná. Z mobilních zařízení prohlíží vaše weby stále větší množství lidí. Letos jsem se dokonce stetkal s prvním projektem, kde přístupy lidí z mobílních zařízení mírně přesahují 50% celkové návštěvnosti. A takových webů bude nadále přibývat. Proto prosím nepodceňujte použitelnost vašich selectboxů.

Na začátku minulého roku jsem si říkal, že 2013 bude ve znamení optimalizací. Řada firem totiž vytvářela „responsivní“ webové stránky, které šlo zobrazit na mobilních zařízeních, ale ve finále byl uživatel stejně nucen stahovat megabajty dat, aby si mohl výsledný web prohlédnout. Rok poté vidíme, že situace stále není ideální, ale určitá osvěta v tomhle směru už zafungovala. Nicméně objevil se tu ještě jeden problém. Větší poptávka po responsivních webech opět o něco zesložitila vývojářům psaní kaskádových stylů. Minulý rok se tak začalo více hovořit o používání standardů jako jsou OOCSS, SMACSS a BEM, které mají za cíl zlepšit strukturu psaní CSS. Ve své praxi se mně zatím nejvíce osvědčila metodika BEM. Proto bych rád tento článek věnoval jejím základům a položil tak úvod pro další zajímavé články do budoucna.

Jak tato metodika vznikla?

Metodika Block Element Modifier, zkráceně BEM, byla poprvé použita ve společnosti Yandex při vývoji robustního interního systému. Na počátku bylo potřeba dosáhnout několika cílů:

• Najít postup pro rychlý vývoj komponent, které přežijí uvnitř rozrůstajícího se projektu
• Znovu použitelnost kódu
• Snadná a rychlá pochopitelnost pro nové členy v týmu

BEM se tak postupně zformovala po několika letech práce na projektu. Výsledkem je poměrně přísný, ale na druhou stranu velice přehledný způsob pojmenovávání CSS tříd. To dělá tuto metodiku ideální pro vývoj projektů, které bude třeba udržovat i několik let.

BEM nepoužívá ID selektory

BEM nepočítá s používáním #ID selektoru v CSS. Já s tímto přístupem naprosto souhlasím a hned vysvětlím proč.

První nevýhodou totiž je, že takovéto elementy není možné znovu použít v kódu. Obečně totiž platí, že na vykreslené HTML stránce musí být každá ID použita pouze jednou. Můžeme sice říct, že naše kaskádové styly se aplikují i v případě, že bude konkrétní ID použito několikrát na stránce. Problém však nastává u JavaScriptu, kde se zohledňuje pouze první výskyt daného ID a dál už se nehledá. To je také důvod, proč použití ID je pro JavaScript rychlejší. Pokud se ale vyhneme tvorbě zbytečně složitých webů, bude tento rozdíl nepatrný.

Druhou větší nevýhodou, je priorita ID selektoru. Důležitější selektor „přebíjí“ méně důležitý. A právě ID selektory mají vyšší prioritu než běžné třídy u HTML elementů. To je taky důvod proč vznikl v CSS zápis !important. Naštěstí všechno, co dokážeme vyjádřit pomocí ID selektoru, můžeme hezky popsat pomocí běžných tříd. Navíc získáme znovupoužitelné komponenty a právě to je pro tuto metodiku podstatná vlastnost.

BLOCK, ELEMENT, MODIFIER

Základem je blok

Jednotlivé části webové stránky lze rozdělit do ucelených komponent - bloků. Jeden blok tak představuje skupinu prvků sdílejících společné vlastnosti. Příkladem může být například hlavička, patička, hlavní menu, produkt, filtr produktů atd. Ukažme si vše na bloku znázorňujícím hlavičku webové stránky, kterou označíme následující třídou.

.header {}

Blok může mít své části

Samotné bloky se můžou skládat z více součástí – elementů. Aby bylo zřejmé, že tyto části patří k naší komponentě, označíme je pomocí vzoru:

.block__element {}

V zápisu používáme k odlišení bloku a elementu dvojí podtržítko. Naše ukázková hlavička může obsahovat např. logo, navigaci, vyhledávání.

.header__logo {}
.header__nav {}
.header__searchbar {}

Specifické elementy

Může se stát, že takto vytvořené bloky a elementy budeme potřebovat ještě v určitých situacích modifikovat. K těmto účelům slouží v BEM takzvané modifikátory. V zápisu používáme k odlišení dvojí pomlčku:

.block--modifier {}
.block__element--modifier {}

Pokud si vezmeme náš ukázkový příklad, může být takovým modifikátorem třeba třída, která z naší navigace udělá navigaci fixní:

.header__nav--sticky {}

Nebo hlavičku roztáhneme na 100% šířky stránky:

.header--fullscreen {}

Jak na zápis v HTML?

Jednotlivé komponenty se můžou dále navzájem prolínat. Náš ukázkový příklad s hlavičkou z předchozího odstavce obohatíme ještě o blok .main-nav, který ponese styly pro hlavní navigaci na webu. Výsledný zápis může vypadat v HTML třeba takto:

<header class="header header--fullscreen">
  <a href="/" class="header__logo"><img src="logo.png" alt="Logo webu" title="Velké logo" /></a>
  <nav class="header__nav main-nav">
    <ul>
      <li class="main-nav__link"><a href="/str1.html">Stránka 1</a></li>
      <li class="main-nav__link main-nav__link--active"><a href="/str2.html">Stránka 2</a></li>
    </ul>
  </nav>
  <form class="header__searchbar" action="process.php">
    <input type="text" name="searchtext" />
    <input type="submit" value="Hledat" />
  </form>
</header>

Závěrem

Pokud jste metodiku BEM ještě nepoužili v praxi, může vám připadat podobný zápis tříd poměrně upovídaný. Ano, názvy tříd jsou o něco delší, nicméně je potřeba se přes to trochu přenést. Až si BEM více osvojíte, tak zjistíte, že vám do vaší práce vnese pořádek a nestane se vám, že byste si začali jednotlivé definice kaskádových stylů mezi sebou omylem přepisovat.