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.

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.

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.

Běžný front-end vývojář musí čas od času použít barevné přechody u různých prvků na webové stránce. Typickým příkladem může být třeba barevné talčítko. Jenže rozhodneme-li se přidat k takovému tlačítku animaci, např. při najetí myši ho budeme chtít plynule zesvětlit, tak narazíme na problém, protože prohlížeč naší animaci jednoduše ignoruje. V dnešním článku bych rád ukázal zajímavou techniku jen za použití CSS, která problém animovaných přechodů do určité míry řeší.

Proč problém nastává?

Aby bylo možné si udělat představu, jak funguje původní neopravené řešení, tak jsem připravil malou ukázku:

Check out this Pen!

Důvod, proč nelze barevný přechod animovat, je jednoduchý. Podíváme-li se do specifikace, tak zde uvidíme celou řadu vlastností, na které lze animace použít. Barevné přechody musíme brát jako obrázky, které se renderují přímo v prohlížeči. A právě background-image není v seznamu podporovaných vlastností.

Jednoduchý trik pro jednoduché animace

Je sice pravda, že animaci nelze použít na vlastnost background-image, ale je zde stále řada jiných vlastností, které takové omezení nemají. Protože se jedná o jistý druh obrázku, tak máme k dispozici background-size a background-position. A právě background-position již animovat lze. Naleznete jí také v zmíněném seznamu.

Použijme tedy následující trik. Pozadí (barevný přechod) roztáhneme na výšku pomoci background-size na velikost rovnou dvojnásobku původní velikosti a po najetí myši posuneme celý obrázek o 100% nahoru (tzn. o celý původní rozměr). Zápis v CSS může vypadat následujícím způsobem:

.btn {
  background: linear-gradient(#ffce25,#ff9201);
  background-size: auto 200%;
  background-position: 0 100%;
  background-repeat: repeat;
}

Nezapomeňte dodržet pořadí zápisu a definovat barevný přechod před změnou jeho velikosti na 200%. Pak už jen zbývá přidat zmíněnou animaci a efekt, který nastane při přejetí myší:

.btn {
  transition-property: all;
  transition-duration: 0.25s;
  transition-timing-function: linear;
}

.btn:hover {
  background-position: 0 0;
}

Výsledek si můžete prohlédnout zde:

Check out this Pen!

Podpora běžných prohlížečů

Toto řešení je podporováno u těch prohlížečů, kde je již implementována podpora CSS vlastnosti linear-gradient:

• Chrome 4+
• Firefox 3.6+
• Opera 11.1+
• Safari 4+
• Internet Explorer 10+

Více informací naleznete zde http://caniuse.com/css-gradients.

I když v této ukázce nejsou podporovány starší verze prohlížečů Internet Explorer 8 a 9, tak nemusíme ještě házet flintu do žita. Toto řešení obsahuje jednoduchý fallback a při jejich použití se zobrazí se pouze čísté jednobarevné tlačítko s barvou definovanou u vlastnosti background. Přijdeme sice o animaci a barevný přechod, ale to je jediný rozdíl. Důležité je, že tlačítko neztratí rozměry a barevností zůstane také stejné.

Závěrem

Z ukázky lze vidět, že toto jednoduché řešení se hodí pouze na lineární tranformace. Nicméně tyto transformace bývají nejčastější a právě u prvků, jako jsou tlačítka, je využijeme nejvíce. Pokud však někdo z čtenářů objeví lepší a třeba i čistší řešení, budu velice rád, když se o něj podělí v komentářích.

Flexbox je nový a velmi mocný nástroj na tvorbu layoutů pomocí CSS. Navíc je zcela odlišný od způsobu, na který jsme tu zvyklý již řadu let. Většina online příruček se zaměřuje na detaily ze samotné specifikace, které bývají dlouhé, složité a těžko srozumitelné. Na druhou stranu je zde poměrně málo informací o tom, jak může být flexbox užitečný fron-end vývojářům při řešení každodenních problémů. Tento článek by měl být takovým úvodem a ukázat možnosti, které nám nabízí při tvorbě layoutu.

Flexbox nabízí v základu 3 vlastnosti, které jsou pro design webu podstatné, ale které bylo těžké dlouhou dobu nadefinovat pomocí CSS: zarovnání, rozmístění a pořadí prvků.

Než přistoupím ke konkrétním ukázkám, tak bych rád zmínil několik věcí, které je dobré znát:

• Flexbox prošel třemi vývojovými cykly, než byla stanovena současná definice, kterou nalezneme ve specifikaci. Každá z těchto iterací se vyznačovala odlišným názvem a také odlišným prefixem pro různé webové prohlížeče. V současnosti se vše ustálilo a nejnovější prohlížeče podporují jeden konečný název bez nutnosti používat prefix. Nicméně podrporovat na novém webu Flexbox pro starší prohlížeče není vůbec snadná věc. Proto při psaní kódu doporučuji nejprve vše napsat a otestovat pro nejnovější verze prohlížečů a s použitím finální verze Flexbox a až potom vše ladit pro starší prohlížeče.
• I když Flexbox dokáže spolupracovat s ostatními způsoby tvorby layoutů v CSS, tak je většinou vhodnější tyto původní a zaběhnuté postupy při tvorbě layoutů opustit. Jde totiž o to, že se nově jedná o odlišný způsob návrhu a práce.

Základní ukázky použití vlastnosti Flexbox

Mějme 3 jednoduché <div> elementy, které umístíme dovnitř jednoho společného:

<div id="item-container">
  <div class="circle"></div>
  <div class="square"></div>
  <div class="circle"></div>
</div>

V CSS nadefinujeme styl tak, aby každý z vnořených <div> elementů vypadal stejně jako název třídy, který nese. Vlastnost display: flex nastavíme na vnější společný <div>:

#item-container {
display: flex;
background-color: hsl(34,88%,90%);
}

.square {
height: 200px;
width: 200px;
background-color: hsl(50,88%,50%);
}

.circle {
border-radius: 50%;
width: 150px;
height: 150px;
background-color: hsl(22,88%,50%);
}

Výsledek, který dostaneme, vypadá následujícím způsobem:

Je potřeba zmínit hned několik důležitých věcí:

• Nejběžnější vlastnosti „flex“ se používají na nadřazené elementy v HTML. Proto je také v naší ukázce použita definice u prvků s ID #item-container. Toto bývá často zdrojem nejasností, protože většina webových vývojářů je zvyklá pozicovat až konkrétní vnořené elementy.
• „Block“, „inline“, „float“ a „text-align“ nemají žádný význam mluvíme-li o jednotlivých položkách, na které aplikujeme flexbox zarovnání.
• Ve výchozím stavu jsou položky zarovnány k levému hornímu rohu nadřazeného elementu.

Další možnosti zarovnání prvků

Na dalším příkladě si ukážeme, jak změnit horizontální zarovnání jednotlivých položek. Výchozí zarovnání doleva je známo jako flex-start. Zarovnat prvky k pravému okraji můžeme provést následujícím způsobem:

#item-container { justify-content: flex-end; }

Určitě si můžete říkat, že se stále nejedná o nic přelomového. Pojďme si tedy ukázat další možnosti:

#item-container { justify-content: center; }

Toto je už elegantní řešení. Docílit podobného zarovnání použitím tradičního CSS by obvykle vyžadovalo navíc jeden HTML element a další doplňující CSS definice. Nicméně ještě nejsme v ukázkách u konce.

#item-container { justify-content: space-between; }

Můžeme vidět, že prostor mezi prvky se rovnoměrně rozproštřel. Toto nastane pouze v situaci, kdy to aplikujeme na dva a více prvků.

Ještě jednu definici zbývá ukázat:

#item-container { justify-content: space-around; }

Výsledek si lze představit podobně, jako kdyby bylo “margin: 0 auto použito na vše”. Jednotlivé položky jsou opět rovnoměrně rozprostřeny, ale každá zvlášť je navíc vycentrovaná uvnitř přiděleného prostoru.

Tyto ukázky řeší zatím jen horizontální zarovnání. Jaké ale máme možnosti u vertikálního zarovnání?

#item-container { justify-content: space-between; align-items: center; }

Prostřední prvek nemá kolem sebe žádný prostor navíc, protože je ze všech prvků nejvyšší. Zbývající menší prvky jsou rovnoměrně umístěny na středu vzniklého prostoru.

Další možnosti vertikálního zarovnání jsou následující:

• flex-start – výchozí nastavení, zarovnání k hornímu okraji obklopujícího HTML elementu
• flex-end – zarovnání k dolnímu okraji obklopujícího HTML elementu

Flexbox je navíc historicky prvním systémem na tvorbu layoutů, který umožňil definovat pořadí jednotlivých prvků. Pojďme si to ukázat na jednoduchém přikladě: umístíme čtverec před první kruh z naší ukázky:

.square { order: -1; }

Výsledek je úžasný. Flexbox ruší pevně definované pořadí jednotlivých prvků na našich stránkách. Obvykle by totiž pořadí jednotlivých prvků bylo určeno jejich umístěním ve zdrojovém HTML kódu. Dříve by této změny šlo dosáhnout pouze pomocí JavaScriptu. Je důležité si tedy uvědomit, že váš zdrojový HTML kód zůstává nezměněn. Snadno si to můžete ověřit pomocí volby Zobrazit zdrojový kód ve vašem internetovém prohlížeči.

Flexbox nám nabízí mnohem víc možností při tvorbě designu webových stránek. V tomto článku jsem se snažil na několika jednoduchých ukázkách demonstrovat sílu tohoto nástroje při zarovnávání, které bylo ještě do nedávna nemožné čistě jen za použití CSS.

Zdroje

• A Designer’s Guide to Flexbox

V tomto příspěvku bych se rád rozepsal o metodice, která je v angličtině popisovaná jako block formatting context. Jednoduše řečeno, jedná se sérii CSS pravidel, které ovlivňují způsob obtékání kolem plovoucích prvků.

Trocha specifikace na začátek

Když jsem poprvé četl o této metodice, tak se ke mně nejprve dostala oficiální definice:

 

Pro běžné čtenáře může být tento zápis poměrně nepřehledný a zmatený. Zvažoval jsem tedy, že zde uvedu český přepis, ale díky složitému zápisu by to do celé věci nevneslo moc pořádku. Block formatting context se týká způsobu vykreslování a obtékání prvků na stránce. Vyvoláno bývá jednou z následujících CSS vlastností:

• float: left/right
• overflow: hidden/auto/scroll
• display: table-cell/table-caption
• display: inline-block
• position: absolute/fixed
• display: flex/inline-flex

Zkusme si raději celou definici přepsat do lidštější podoby a ukázat na několika příkladech.

Příklad 1: Jak zabránit zalamování textu?

Pokud vytváříme webové stránky, tak se nám často stává, že nechceme zalamovat text kolem plovoucího prvku. Typickým příkladem může být vytváření kratičkých sloupců.

Ná následujícím obrázku můžete vidět jednoduché použití vlastnosti float: left. Lze vidět, že pokud je text delší, tak začně obtékat šedý boxík kolem dokola.

Co když ale nechceme, aby se text nám zalamoval pod šedým boxíkem? Řešení je velmi jednoduché. Zkusme naše CSS definice mírně upravit

Všimněte si, že stačilo přidat žulté oblasti vlastnost display: table-cell. V mém přehledu nahoře v textu jsem tuto definici uvedl jako vlastnost, která vyvolává block formatting context. Šírku celé oblasti (v tomto případě 10000px) nastavíme jako šířku celé modré oblasti na obrázku.

Živou ukázku tohoto příkladu si můžete prohlédnout zde.

Příklad 2: Vytváření šablony stránky

Můžeme jít v našem uvažování o trochu dál a využít předchozího příkladu při vytváření celých stránek. Často se stává, že layout připravované stránky počítá s použitím levého či pravého sloupce.

Hlavní textová část má v CSS definovanou šířku, které odpovídá celé šířce stránky. Navíc přidáme vlastnost display: table-cell. Toto nám dovolí přidávat flexibilní sloupce podle vlastního uvážení. V naší ukázce je vidět sloupec o šířce 300px.  Technika block formatting context je natolik šikovná, že pokud se rozhodneme změnit šírku sloupce např. z 300px na 400px, tak se nemusíme obávat nutnosti přepočítávat ostatní rozměry. Jednoduše změníme šířku levého sloupce a hlavní oblast se nám automaticky přizpůsobí.

Není to jednoduché? Navíc vše funguje i v situacích, kdy se rozhodneme na stránce mít levý i pravý sloupec. Hlavní oblast se nám automaticky přizpůsobí. Ukázku použití tří sloupců si můžete prohlédnout zde.

Zdroje

• Fiona Chan – The secrets of block formatting context
• W3C definice