CSS Grid v MSIE: Jde to. I s automatickým umísťováním do mřížky

CSS Grid je možné za pomoci Autoprefixeru v řadě případů použít i v Internet Exploreru. Podíváme se na problematickou oblast, kterou je automatické umísťování prvků do mřížky.

Text vyšel původně na webu autora.

„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. Ale do jaké míry je to pravda?

Možná víte, že něco z gridu v Exploreru funguje. A taky, ž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.

Na vědomí se tímto dává, že díky zásadním aktualizacímAutoprefixeru 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ší.

Jak fungují první dvě můžete prozkoumat v třísloupcovém demu na Codepen, podrobněji to najdete vysvětlené v článku CSS Grid v Internet Exploreru: Jde to! V tomto textu se podíváme na ono problematické automatické umísťování.

Autoplacement je důležitá vlastnost Gridu. A Explorer, který stále používá minimálně desetina českých uživatelů, ji nativně neumí.

Pojďme tradičně na příklad. Chceme layout 2 × 2. HTML kód vypadá takto:

<div class="container">
  <p class="box">Box</p>
  <p class="box">Box</p>
  <p class="box">Box</p>
  <p class="box">Box</p>
</div>

Díky automatickému umístění bude v moderních prohlížečích stačit definovat mřížku v CSS:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
}

Prvky se nám pěkně rozmístí. Jenže smůla, tohle nebude fungovat v Internet Exploreru.

Ale to je nepříjemné, automatické umístění v MSIE nefunguje.

Existuje záchrana – Autoprefixer. Pro MSIE 10 a 11, ve kterých nějaká verze CSS Gridu funguje, nám přidá pseudotřídy:

.container > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}

.container > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
}

…a tak dále.

Neřeší to všechno, ale máme tady o jeden silný důvod navíc použít CSS Grid.

Co potřebujete?

(Nastavení podpory MSIE jsem popsal podrobněji v základním článku, zde jen stručně.)

  • Automatizaci
    Gulp, Grunt, skripty v NPM nebo podobné nástroje, které umí využít Autoprefixer.
  • Zapnout podporu IE11
    V Browserslist, seznamu podporovaných prohlížečů, je nutné specifikovat také IE 11, případně i desátou verzi.
  • Zapnout Grid a auto-umístění
    Zavolat Autoprefixer s parametrem grid: 'autoplace', který zařídí podporu právě pro automatické umístění. Alternativa jsou komentáře přímo v CSS: /* autoprefixer grid: autoplace */.

Hotové a funkční nastavení je například v Gulpfile.js mého demonstračního repozitáře.

Mimochodem, řešení v NPM skriptu tam zatím nefunguje. Stejně tak se mi nedaří zařídit podporu autoplacementu v Codepenu. Nevím proč. Pokud vy ano, napište mi, prosím.

Pozor na výjimky

Autoplacement rozhodně nefunguje ve všech použitích mřížky. Následuje seznam možných problémů, ale bude jich více.

  • Nefunguje pro neznámý počet položek
    Je možné tedy automatizace použít jen pro explicitní mřížky definované pomocí grid-template-* vlastností, nikoliv grid-auto-*.
  • Pozor na zpětné nasazení na starých projektech
    Doporučení zní: Nechte grid vypnutý a pomocí CSS komentářů jej zapínejte pouze pro nové deklarace.
  • Neumí to repeat() v kombinaci a auto-fill, auto-fit
    I když IE funkci repeat() zvládá, klíčová slova auto-fill a auto-fitbohužel ne.
  • Vyberte si: Buď autoplacement nebo manuální umístění v gridu
    V moderních prohlížečích lze obojí kombinovat, v IE bohužel ne. Buď tedy budete všechny prvky gridu umísťovat ručně (použijte vlastnost grid-template-areas v definici gridu) nebo automaticky (bez *-areas).
  • Pozor na pseudoelementy
    ::before a ::after uvnitř Gridu vám v IE rozbijí mřížku, to se vsaďte.
  • V Media Qeuries nelze změnit jen grid-gap
    Namísto toho je Autoprefixeru potřeba znovu deklarovat explicitní mřížku pomocí vlastností grid-template-*.

Více najdete v dokumentaci Autoprefixeru.

Celkově vzato je tohle pseudo-automatické umísťování prvků do mřížky spolu s možností použít oblasti (areas) a mezery (gap) moc fajn posun vpřed. Určitě tedy Grid vyzkoušejte.

ebook-vdcss3-prebal-final

Kniha „Vzhůru do (responzivního) designu“

Kompletní průvodce návrhem a implementací responzivních uživatelských rozhraní v e-booku a knize. Více informací.

Komentáře: 3

Přehled komentářů

Ondřej Žára 2 sloupce?
Mlocik97 Re: 2 sloupce?
Martin Michálek Re: 2 sloupce?
Zdroj: https://www.zdrojak.cz/?p=23059