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ů.

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