CSS Grid: Autoplacement v IE (a poslední kurzy Webové kodéřiny)
Vítám vás v prvním newsletteru roku 2019!
Autoplacement gridu v Internet Exploreru
Pokud Vzhůru dolů čtete pravidelně, už víte, že CSS Grid je možné v řadě případů použít i v Internet Exploreru.
Vděčíme za to nedávným změnám v Autoprefixeru, který se naučil generovat kód tak, abychom mohli používat i vlastnosti jako grid-gap (mezera mezi buňkami) nebo grid-template-areas (pojmenované oblasti).
O čem jsem ale zatím nepsal, jsou nové možnosti automatického umísťování prvků v mřížce. Autoplacement je další důležitá vlastnost Gridu. A Explorer, který stále používá kolem desetiny českých uživatelů, ji nativně neumí.
Vezměme 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.
Pro něj nám ale Autoprefixer 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.
Téma budu dále rozebírat na blogu, takže jej sledujte. Prakticky vyzkoušet jej můžete na jednom z mých kurzů. Teď trochu o něm.
Poslední termíny kurzu kodéřiny
Tímto vás zvu na poslední dva termíny kurzu Dnešní webová kodéřina. V Praze proběhne už 5. února a úplně poslední termín připravujeme do Brna na 1. dubna. Ne, není to apríl, děkuji za optání.
„Kodéřinu“ vedu, jako školení novinek a best-practice kolem HTML a CSS, pod různými názvy už asi 9 let, takže budu muset zamáčknout slzu. Ale je čas posunout se více směrem k mé aktuální hlavní specializaci – rychlosti webů.
Obsah kurzu ale rozhodně devět let starý není. V aktuálním vydání se můžete těšit právě na CSS Grid, Flexbox, základy automatizace pomocí NPM skripů, Gulpu a Gruntu. Také na tipy k přístupnosti, CSS vlastnostem, SVG a tak dále.
Kurz je myslím skvělý pro juniornější kodéry nebo backendové vývojáře, kteří si chtějí udržet přehled o aktuálním vývoji CSS a HTML.
Více o kurzu
Proč jít na školení ze Vzhůru dolů
Konec hlášení. Podívejme se teď spolu ještě na sedm odkazů, které stojí za přečtení.
Novinky a články, které by vám neměly uniknout
- CSS Tricks: 2018 Staff Favorites
- Vzhůru dolů: Breakpointy v responzivním designu: Detailně a do hloubky
- 24 Ways: Dynamic Social Sharing Images
- Vzhůru dolů: HTTP/2: S nasazením na nic nečekejte
- Performance Calendar: Getting started with web performance: 2019 beginner’s guide
- Podcast ze Vzhůru dolů: Frontendové technologie roku 2018
- Lipsurf: Control the browser with your voice.
A to je vše, milé čtenářky a milí čtenáři. Přeji vám fajn rok 2019!
Martin Michálek
vzhurudolu.cz/martin
|