„Neumí to Explorer“ je na prvních devíti místech z 10 důvodů, proč lidé ještě na začátku roku 2019 nepoužívají CSS Grid.
Obsah článku
- Proč se tím zabývat?
- Podpora Gridu
- Demo
- Autoprefixer: na co nezapomenout?
- Autoprefixer: podporované vlastnosti
Asi už víte, že něco z gridu v Exploreru funguje. Ale taky asi víte, že náš „nejoblíbenější“ prohlížeč nepodporuje důležité vlastnosti jako je grid-gap
(mezera mezi buňkami), grid-template-areas
(pojmenované oblasti) nebo třeba automatické umísťování prvků do mřížky.
Související
Na vědomí se tímto dává, že díky zásadním aktualizacím v Autoprefixeru je možné první dvě vcelku pokojně začít používat ve všech prohlížečích. A automatické umísťování? Tak trochu jde taky. Ale to je složitější, však uvidíte v dalším textu.
Proč se tím zabývat?
FAQ pro nedůvěřivé frontendové občany a občanky:
„Na Explorer se můžu víte co.“ — Pravděpodobně nemůžete. IE 10 už asi všude zmizel v prachu dějin, na většině projektů má ale velmi silné zastoupení jedenáctá verze Exploreru. V průměru to může být mezi 10-15 procenty uživatelů.
„Explorer to neumí.“ – Umí. Byl to první prohlížeč, který CSS Grid naimplementoval.
„Explorer toho z Gridu umí děsně málo.“ – Teď už ne, čtete dál.
„Udělám to flexboxem a hotovo.“ – Ano, spoustu situací vyřešíte flexboxem. Jenže flexbox nefunguje dobře u rozvržení, u nichž potřebujete prvkům vnutit jednotnou mřížku a neohlížet se na jejich obsah. CSS Grid vám často ušetří drbání levou rukou za pravým uchem. Prostě napíšete méně kódu. A možnosti jeho využití se teď díky Autoprefixeru rozšířily.
Pojďme dát Gridu novou šanci.
Podpora Gridu: Internet Explorer versus zbytek světa
Grid aktuálně podporují úplně všechny v Česku používané prohlížeče.
Ale ano, jisté rozdíly mezi IE a ostatními zde jsou. Z těch důležitých například napráskejme, že Internet Explorer nativně neumí:
- automatické umísťování prvků do mřížky („auto-placement“),
- pojmenovávání oblastí mřížky (vlastnosti jako
grid-template-areas
), - mezery mezi buňkami mřížky (např.
grid-gap
).
Velká část uvedeného pro vás ale přečtením tohodle dlouhého textu přestane platit.
Naopak se málo ví, že stařičký IE nativně podporuje:
- nějakou formu implicitní (nepředdefinované) mřížky,
- funkci
repeat()
, jen jinak:repeat(12, 1fr 20px)
zapisuje jako(1fr 20px)[12]
, - další skvělou funkci –
minmax()
, - klíčová slova
min-content
amax-content
.
To myslím není zlé. Více je v textu CSS Grid in IE: Debunking Common IE Grid Misconceptions na CSS-Tricks.
Jen připomínám, že rozdíly nevznikly v nějakém microsoftím „týmu pro vytáčení webařů“. Jejich příčinou je rychlá implementace Gridu v ranné fázi specifikace. Ta se ovšem časem změnila, ale Grid v Exploreru zůstal v původní variantě.
Třísloupcové demo aneb „Jak to kurnikšopa funguje?“
Podívejme se na jednoduchý layout, u kterého si ukážeme jak přesně Autoprefixer zařídí fungování Gridu v Internet Exploreru.
Jde o rozvržení definované následujícím způsobem:
.container {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-column-gap: 0.5em;
grid-template-areas: "a b c";
}
Pro zájemce polopaticky:
display: grid
asi vysvětlovat nemusím. Definujeme prostě kontejner mřížky.grid-template-columns: 1fr 3fr 1fr
specifikuje samotnou mřížku. O jednotcefr
píšu v jiném textu.grid-column-gap: 0.5em
je zápis pro mezeru mezi sloupci layoutu.grid-template-areas
je šablona pojmenování oblastí pro následné využití v CSS.
Teď to nejlepší. Tenhle kód nám Autoprefixer přeloží tak, aby v pohodě fungoval v Internet Exploreru 11. Včetně mezer (-gap
) a pojmenovaných oblastí (-areas
). Tedy vlastností, které tenhle pravěký prohlížeč neumí.
Proč takhle složitě? Protože Autoprefixer
Vy znalejší jste si jistě všimli, že pro takto jednoduchý layout by bylo zbytečné definovat šablonu pojmenování oblastí – grid-template-areas
. To je ale oběť na oltář podpory v Internet Exploreru.
Dalším kódem už jen umístíme sloupečky do pojmenovaných oblastí:
.side-1 {
grid-area: a;
}
.content {
grid-area: b;
}
.side-2 {
grid-area: c;
}
A šup! V další fázi se můžeme kochat kódem, který vypotí Autoprefixer.
Kód produkovaný Autoprefixerem
Nejprve rodič layoutu:
.container {
display: -ms-grid;
-ms-grid-columns: 1fr 0.5em 3fr 0.5em 1fr;
}
Následuje samozřejmě výše uvedený kód pro moderní prohlížeče. Ten pro zjednodušení vynechávám. Opět ale oba řádky vysvětlím:
display: -ms-grid
– prefixovaný zapínač Gridu v Exploreru.-ms-grid-columns: 1fr 0.5em 3fr 0.5em 1fr
– magie. Autoprefixer spojil definici mřížky s definicí mezer (grid-column-gap
), abychom ty (sakramentsky návykové) díry v layoutu mohli využívat i v Exploreru, který žádnou z „gap vlastností“ nepodporuje.
Kód prvků layoutu, jež Autoprefixer vyrobí pro potřeby Exploreru, vypadá takhle:
.side-1 {
-ms-grid-row: 1;
-ms-grid-column: 1;
}
.content {
-ms-grid-row: 1;
-ms-grid-column: 3;
}
.side-2 {
-ms-grid-row: 1;
-ms-grid-column: 5;
}
Ano, IE totiž neumí ani žádnou z „area vlastností“. Autoprefixer tak „ručně“ spočítá umístění do patřičných sloupečků.
Pokud vám nesedí počty sloupců u vlastnosti -ms-grid-column
, pak raději zopakuji, že Autoprefixer uměle přidává sloupečky, abychom mohli používat mezery -gap
.
Demo jsme snad rozebrali do posledního kamínku. Tady je ještě v celé kráse: cdpn.io/e/BvJjdz.
Autoprefixer: Na co nesmíte zapomenout
Nejprve se ujistěte, zda vaše deklarace podpory prohlížečů (Browserslist) zahrnuje IE 11 nebo případně také desátou verzi.
V Autoprefixeru si povolte generování prefixů pro mřížku – grid: true
.
V mém demu na Githubu to mám například pro Gulp takto:
gulp.task('autoprefixer', () =>
{
return gulp.src('src/css/*.css')
.pipe(autoprefixer({
grid: true
}))
.pipe(gulp.dest('dist/css'));
}
);
V samotném CSS kódu pak:
- Definujte grid vždy kromě sloupců (
grid-template-columns
) nebo řádků také pojmenované oblasti:grid-template-areas
. - Používejte vlastnost
grid-template
, nikoliv zkratkugrid
. - Vyhněte se pojmenovávání jmen řádků gridu.
Pokud na něco z toho zapomenete, Autoprefixer vás asi řádně potrápí, protože žádné prefixy nepřidá.
Pozor také na správné verze používaných nástrojů:
- PostCSS verze 6 a novější
- Autoprefixer 9.3 a novější
Zapnutí a vypnutí Autoprefixer
Občas se může hodit vypnutí generování prefixů v konkrétním místě kódu.
Pro ten účel použijte řídící komentáře /* autoprefixer: off */
nebo /* autoprefixer: ignore next */
či /* autoprefixer grid */
.
Více je v dokumentaci: github.com/postcss/autoprefixer.
Co Autoprefixer umí?
Následuje sumář aktuálně podporovaných a nepodporovaných vlastností Gridu.
Dobrá zpráva: Těch druhých je poměrně málo.
Umí: Definování šablony mřížky
grid-template-columns
se přeloží do-ms-grid-columns
.grid-template-rows
se přeloží do-ms-grid-rows
.grid-template-areas
slouží k tomu, aby Autoprefixer pochopil, jak vypadá váš layout. Žádný kód ale negeneruje.grid-template
je jen zkratka progrid-template-columns
,grid-template-rows
agrid-template-areas
. Přeloží se tedy do nich.
Umí: Zarovnávání
align-self
se přeloží do-ms-grid-row-align
.justify-self
se přeloží do-ms-grid-column-align
.
Částečně umí: Umístění položky do mřížky
Překlad následujících vlastností funguje, ale nesmíte v nich použít záporná čísla:
grid-row-start
se přeloží do-ms-grid-row
. Pokud chcete použítspan
, musíte definovatgrid-row-end
.grid-column-start
se přeloží do-ms-grid-column
. Pokud chcete použítspan
, musíte definovatgrid-row-end
.grid-row-end
. Musíte ale definovatgrid-row-start
.grid-column-end
. Musíte ale definovatgrid-row-start
.grid-row
se přeloží do-ms-grid-row
.grid-column
se přeloží do-ms-grid-column
.
Částečně umí: Definice pojmenovaných oblastí
Následující vlastnost funguje, ale každý potomek gridu musí mít unikátní jméno oblasti:
grid-area
- Autoprefixer z oblastí udělá explicitní zápis pomocígrid-row-end
agrid-column-end
.
Částečně umí: Definice mezer
grid-gap
a explicitní vlastnostigrid-row-gap
nebogrid-column-gap
Autoprefixer namísto -gap
vygeneruje extra řádky nebo sloupečky. Fajn řešení, ne? Je ale důležité, abyste grid zapsali pomocí grid-template-areas
a zároveň grid-template-columns
.
Neumí vůbec: Vlastnost grid a automatické umístění
Tady máte zatím smůlu:
grid
je zkratka progrid-template-rows
,grid-template-columns
agrid-template-areas
. Doporučuje se namísto ní použígrid-template
.- Automatické umístění:
grid-auto-columns
,grid-auto-rows
nebogrid-auto-flow
.
Automatické umísťování ale u jednodušších layoutů udělat jde.
Tak co? Dáte Gridu novou šanci?
Komentáře
Váš názor? Vaše zkušenosti? Našli jste chybu?