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