Flexboty a gridboty: Podpora flexboxu, gridu a vícesloupcového layoutu v prohlížečích

„Nové systémy layoutu v CSS jsou tak úžasné, že to jistě musí mít nějaký háček“, mohl by si někdo myslet.

Autorovi téhle myšlenky bychom museli přiznat jistou dávku zdravého skepticismu. Nebo dokonce nemalou životní zkušenost s vývojem webů.

Je to tak, milé čtenářky a milí čtenáři, určitá „ale“ zde jsou. Musíme ovšem s úlevou prohlásit, že oproti dřívějšímu stavu je přítomnost chyb spojených s flexboxem nebo gridem v prohlížečích minimální.

Jediným větším a hůře odstranitelným problémem je slabá podpora CSS gridu ze strany Internet Exploreru 11, i to se ale dá částečně řešit Autoprefixerem.

V textu vezmeme nové systémy layoutu jeden po druhém a k jejich podpoře v prohlížečích si něco povíme.

Flexbox a „flexboty“ v IE11

Když jsem začal flexbox před lety používat, bylo to trochu jako procházka minovým polem.

Za každým řádkem kódu mohla číhat nekompatibilita v některém prohlížeči. Člověk potřeboval detektor min a tím se stala stránka „Flexbugs“ od Philipa Waltona. Jde o seznam 17 chyb v prohlížečích, které tehdy potřeboval znát každý, kdo pokouší osud psaním flexboxového kódu. github.com/philipwalton/flexbugs

Znalost některých chyb byla tak zásadní, že jsem je svého času musel učit na svých školeních. A při té příležitosti jsem jim začal říkal česky: flexboty. Boty, které zanechali výrobci prohlížečů při implementaci flexboxu.

Když jsem ale u příležitosti psaní tohoto textu srovnával současný stav s tím dřívějším, došel jsem k radostnému poznání.

Je to tak. Takřka všechny chyby v moderních prohlížečích jsou opravené. Zůstaly jen ty navázané na Internet Explorer 11.

Dnes už tedy můžete psát flexboxový kód, aniž byste se museli bát. Stačí se vyhnout určitým zápisům a bude to vše dobře fungovat i v Internet Exploreru 11.

Stačí se vyhnout

Když jsem se vývojářů ptal na jejich mentální zkratky, Daniel Střelec napsal jednu, se kterou se ztotožňuji:

U flexboxu jsem se naučil definovat vždy kompletní zápis, tedy flex: 1 1 auto (nespoléhat na default) a pokud to jde, tak používat width místo flex-basis nebo obojí.

Stačí málo a všechno to dobře funguje.

Podpora flexboxu je prakticky plná

Pojďme říct důležitou věc – fungování flexboxu napříč prohlížeči, včetně posledního Exploreru, je konzistentní a podporu považuji za takřka plnou.

U chyb, které v následujícím textu uvádím, se jedná o boty menší velikosti. Ale když už si o flexboxu povídáme takto detailně, je potřeba se o nich zmínit.

Flexboty v moderních prohlížečích

Moderní prohlížeče, tedy všechny kromě Internet Exploreru, byly zodpovědné za 5 chyb ze seznamu Philipa Waltona.

To už ale dávno neplatí, dle mých testů zůstaly jen dvě málo důležité chyby.

• Některé elementy nemohou být flex-kontejnerem. (Flexbug #9)
  Dříve to platilo i pro <fieldset> a <button> ve všech prohlížečích, což je naštěstí opravené. Zůstává jen málo nepříjemné omezení použití flexboxu na prvku <summary> v prohlížeči Safari. V tomto případě stačí použít vložený <div> jako kontejner pro rozvržení flexboxem.
• Zalamované elementy na inline flexboxu přetékají z rodiče (Flexbug #14)
  Jde o kombinaci použití flex-flow:column wrap a display:inline-flex, takže poměrně vzácný scénář. Vnitřní prvky pak ve všech prohlížečích „vylezou“ z velikosti rodiče, i když by neměly. Je možné to obejít například pomocí nastavení flex-direction:row a změnou směru vykreslení zápisem vlastnosti writing-mode.

V CodePenu se můžete podívat na řešení druhé uvedené flexboty.

A co náš dědeček mezi prohlížeči?

Flexboty v IE11

Tohle je zajímavější. Internet Explorer byl sice první prohlížeč, který moderní layouty naimplementoval, ale stejně jako všechny ostatní „prvoimplementace“ šlo o pokus plný chyb.

Problémem IE tedy není množství chyb, chyby dělají všichni programátoři prohlížečů, ale způsob aktualizace. Kdysi tak populární prohlížeč od Microsoftu vycházel v nových verzích z dnešního pohledu velmi pomalu, po letech, nikoliv měsících. A navíc – jedenáctá verze Exploreru je poslední a nikdo ji už aktualizovat nebude. Jenže vysvětlete to některým uživatelům. Ještě chvíli se s ním prostě budeme setkávat.

Pojďme na ty chyby, ať tu nepříjemnost máme za sebou.

1. Vlastnost flex-basis nezohledňuje box-sizing:border-box (flexbug #7).
2. Vlastnost flex s nulovou flex-basis neplatí (flexbug #4).
3. Vlastnost flex-basis neumí funkci calc() (flexbug #8).
4. Položky flexboxu nemohou být display:inline (flexbug #12).
5. Položky flexboxu se špatně zarovnají, když se užívá max-width (flexbug #17).
6. Položky flexboxu lezou z kontejneru, který má align-items:center (flexbug #2).
7. Vlastnost min-height na flex kontejneru nefunguje (flexbug #3).
8. Pložky flexboxu neudržují poměr stran (flexbug #5).
9. Položky flexboxu neumí zarovnání pomocí margin:auto na příčné ose (flexbug #15).

Máte přečteno? A máte z toho depresi? Chvilku počkejte.

Tyhle chyby detailně znát nemusíte. Většinu vaší práce s flexboxem neohrozí. Stačí jen vědět, že si v případě podivného chování IE11 u flexboxu musíte vzpomenout na existenci stránky Flexbugs nebo tohoto textu.

Řešení chyb v IE? Zkuste vynechat flex-basis

Ani se tady nebudu pokoušet chyby vysvětlovat nebo nastiňovat možná řešení. Spíše nabídnu svůj postup, který jsem si vypracoval v době, kdy pracoval na projektech, vyžadujících podporu posledního Exploreru.

1. Během práce v hlavním prohlížeči průběžně testuji také v dalších prohlížečích, včetně IE11. Pokud jej na počítači nemáte, zvažte Browserstack nebo podobná řešení.
2. Velká část chyb v IE11 je navázaná na vlastnost flex-basis, proto se jí snažím vyhnout a používám namísto ní width nebo height.
3. Pokud narazím na jiný problém, zkonzultuji Flexbugs, kde pravděpodobně naleznu snadné řešení.
4. Profit!

Věřte mi. Nic komplikovaného na tom není a používat flexbox i s podporou IE11 je úplně v pohodě.

A co další chyby?

Pokud jste počítali, do celkového počtu 17 chyb stále tři chybí. Ano, máte pravdu a vyhráváte… pobyt v Muzeu historie webových prohlížečů.

Zbývající 3 boty má na svědomí Internet Explorer 10. To je ale prohlížeč, který má i v českých luzích a pod slovenskými horami prakticky nulovou přítomnost na zařízeních našich uživatelů.

Nebudeme si proto kazit den chybami historických prohlížečů a ty tři chyby prostě zamlčíme.

Pokud by vás opravdu hodně zajímaly, podívejte se na tu svého času slavnou stránku Philipa Waltona. Flexbugs: github.com/philipwalton/flexbugs

Více informací o podpoře je na Can I Use. caniuse.com/flexbox

Grid

V případě gridu se – daleko silněji než u flexboxu – musíme rozdělit na dvě skupiny vývojářek a vývojářů.

Na ty, kteří nemusí Internet Explorer 11 podporovat.

A pak na ty, kteří mají trochu smůlu.

Když jsem si na Twitteru dělal průzkum mezi vývojáři, vyšlo mi, že významná většina dává přednost flexboxu. Obávám se, že za to může komplikace jménem podpora gridu v IE.

Je potřeba říct, že i tenhle prohlížeč grid podporuje a nepodporuje toho z něj vůbec málo: implicitní mřížku, funkci repeat(), funkci minmax() nebo klíčová slova min-content a max-content.

Na druhou stranu – jde jen o menší podmnožinu současné šíře toho čemu říkáme CSS Grid Layout, navíc často jinak implementovanou.

Máme zde sice Autoprefixer, který „současný grid“ umí překládat do podoby „IE gridu“, ale jen částečně a navíc to vyžaduje další znalosti a schopnost tento nástroj bezchybně nastavit.

Prostě to s gridem v IE je složité a já se vůbec nedivím lidem, kteří říkají „skoro na všechno mě stačí flexbox“, i když pak flexbox používají pro situace, kde by byl výhodnější grid.

Jo, to když Explorer podporovat nemusíte, to je jiná písnička…

Odkážu vás ještě na plnohodnotný text o řešení gridu v Internet Exploreru a pojďme dál.

Gridbugs, boty v mřížce

Podobně jako první implementace flexboxu, také první napsané enginy pro vykreslování gridu byly v prohlížečích plné chyb.

A tak se známá propagátorka moderních rozvržení v CSS, Rachel Andrew, nechala inspirovat stránkou Flexbugs a vytvořila svého času její obdobu pro mřížku. Vznikly Gridbugs. github.com/rachelandrew/gridbugs

Asi jste si všimli, že o té stránce píšu v minulém čase, a to jste si všimli dobře. Ke dni psaní zde vidím poslední commit ze září 2017. Podobně jako u flexboxu, také u gridu postupně prohlížeče chyby odstranily.

Během přípravy pro psaní tohoto textu jsem poctivě prošel všech 14 chyb a podle všeho zůstává aktivní jen jedna bota, gridbug #3 – chybějící podpora fragmentace.

Jde o to, že prohlížeče v layoutu dělaném gridem špatně implementují vlastnosti jako break-*, kterými můžeme vynucovat konec stránky například v tiskové verzi.

Všechny ostatní chyby jsou, zdá se, opravené. Takže, když nebereme v úvahu Internet Explorer (jak úlevné!), CanIUse nás zaplaví zelenou barvou jako louka na jaře. caniuse.com/css-grid

Vícesloupcové rozvržení, CSS Multiple Columns

Multicolumn layout v CSS, takže sada specifikovaná kolem vlastnosti column, je na tom s podporou v prohlížečích poměrně dobře.

Zajímavé je, že tuto specifikaci trápí spíše nedodělky v moderních prohlížečích. Implementace v Exploreru je vlastně výborná.

Chyby v Chrome a Firefoxu zde zůstávají už léta hlavně proto, že sloupcový systém rozvržení v CSS není právě často používaný a tudíž tlak na programátory prohlížečů není tak velký.

Jsou to chyby spíše menšího kalibru, ale je jich poměrně dost.

Asi nejznámějším bugem je špatná podpora zalamování pomocí vlastností typu break-* v prohlížeči Chrome a všech, které z něj vycházejí.

Pokud bychom se ale dnes mohli bavit o nějakém „zabugovaném“ systému layoutu, nebyl byl to grid ani flexbox. Černého Petra bohužel vyhrává vícesloupcové rozvržení.

Více informací najdete na našem oblíbeném webu. caniuse.com/multicolumn

A co zarovnávání, CSS Box Align?

Čtvrtou specifikací z party systémů rozvržení v CSS je zarovnání boxů.

Tenhle systém layoutu bohužel samostatný záznam na CanIUse nemá. Je to proto, že původně šlo o součást specifikace flexboxu, kde také na webu sledujícím podporu v prohlížečích vlastnosti ze specifikace CSS Box Alignment zůstaly.

Najdete je zde jako jednotlivé vlastnosti, když budete hledat text align- nebo justify-.

Tabulky podpory CSS Box Align v Internet Exploreru

Podpora v moderních prohlížečích je zde vynikající, ale je potřeba zmínit, že i v tomto případě je Internet Explorer problematický. Opět hlavně v kombinaci s gridem.

Jak je vidno, v moderních prohlížečích je to v pořádku.

Nepodpora vlastností justify-items i justify-self v IE je vlastnost, nikoliv bug. Tyto vlastnosti s flexboxem bohužel nelze kombinovat v žádném prohlížeči.

V případě, že podporujete IE to je u gridu celkově složitější, viz následující pojednání o tom.

Explorer také nepodporuje novější hodnoty některých vlastností: baseline a stretch vlastností align-self a justify-content nebo také space-evenly u justify-content.

Na layout typu masonry zatím čekáme

align-tracks, justify-tracks a další části layoutu typu masonry v CSS zatím žádný prohlížeč nepodporuje.

Layouty typu Masonry v CSS zatím tedy sledujte, ale pro praktické nasazení využijte jinou cestu.

Shrnutí podpory

Jak sami vidíte, o různých problémech systémů rozvržení v CSS v různých prohlížečích se dá popsat hodně papíru. A to jsem leccos vynechal.

Nicméně, důležitý je celkový dojem. Pokusím se to shrnout takto:

• Flexbox je víceméně bezproblémový. Při použití ve Exploreru raději nahraďte flex-basis za width nebo height.
• Grid je v Exploreru problémový, musíte mít zvláštní znalosti. V moderních prohlížečích skoro úplně bez potíží.
• Vícesloupcový layout umí zkomplikovat život menšími chybami, ale je jich dost.
• Zarovnání boxů je v případě flexboxu skoro bez zádrhelů všude, v případě gridu je to s IE opět složitější.