Přejít k navigační liště

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

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

Články Webdesign

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

Subscribe
Upozornit na
guest
3 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
Ondřej Žára

Ahoj,

ukázka používá deklaraci grid-template-columns: 1fr 1fr;, ale obrázek Moderní prohlížeče má tři sloupce… přijde mi, že tu něco nehraje.

Mlocik97

to je ilustračný obrázok… jde o princíp nie počet stĺpcov

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.

Pocta C64

Za prvopočátek své programátorské kariéry vděčím počítači Commodore 64. Tehdy jsem genialitu návrhu nemohl docenit. Dnes dokážu lehce nahlédnout pod pokličku. Chtěl bych se o to s vámi podělit a vzdát mu hold.