Používáte CSS Grid?

-

Hodně záleží na typu projektu. Osobně Grid používám tehdy, kdy to má smysl a IE se řeší tak, že je pro něj speciální CSS napsané. Díky tomu jen lehce poladím a jedeme dál.

Co se detekce týká, mám tohle:

Kód:

<script>function detectIE(){var e=window.navigator.userAgent;if(0<e.indexOf("MSIE "))return!0;if(0<e.indexOf("Trident/")){e.indexOf("rv:");return!0}return 0<e.indexOf("Edge/")}function hasClass(e,s){return!!e.className.match(new RegExp("(\\s|^)"+s+"(\\s|$)"))}function addClass(e,s){hasClass(e,s)||(e.className+=" "+s)}function removeClass(e,s){if(hasClass(e,s)){var n=new RegExp("(\\s|^)"+s+"(\\s|$)");e.className=e.className.replace(n," ")}}document.documentElement.className=document.documentElement.className.replace("no-js","js"),detectIE()&&(document.documentElement.className=document.documentElement.className.replace("no-ie","fucking-ie"));</script>

Má to 2 funkce:
- nahradit "no-js" za "js" třídu když tam je zapnutý javascript
- nahradit "no-ie" za "fucking-ie" když je detekovaný IE

Kod je vložený navrchu v hlavičce, aby se provedl co nejdříve. Pak už se s tím hraje lehce. Lze načíst navíc speciální CSS čistě pro IE, nebo jen mít už vše v CSS. Opět záleží na daném webu.

Grid - za mě super věc. Řeší mi hrozně věcí poměrně snadno. Chci používat do budoucna víc a víc.

Optimalizace - obecně dělám IE 11 automaticky, protože ta je stále dostupná na W10, co se týká IE 10, tak tam většina věcí funguje a občas jsou potřeba nějaké úpravy. Ale obecně ty optimalizace mi moc nezaberou času. Pro JS mám Babel z ES6 na starší verzi (Gulp rozšíření) a druhak prefixer pro nastavený dle potřeb pro IE.

@Doctore97
"Co se detekce týká, mám tohle:"

Jestli tu třídu potřebujete pro označení CSS zvlášť pro IE, tak to mi přijde lepší použít media query (je jich více takových, lze dohledat):

Kód:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     /* IE10+ CSS styles go here */
}

Jestli používáte nějaký preprocessor/Post-CSS, tak si to určitě můžete dát do nějaké "proměnné", ať to má lépe srozumitelné jméno.

@streetcz
"Používám převážně flex-box s CSS Gridem, ale jak víme CSS Grid nepodporuje IE. Řešíte to nějakým hackem, detekcí prohlížeče a případným zobrazením obsahu, který je s IE kompatibilní?"

Jedna strategie, která může být častokrát více než dostačující, je obsah nastylovat/rozložit pomocí flexu jednodimenzionálně a potom, pokud je podporován Grid, jej rozložit dvoudimenzionálně. Ve většině případů by to mělo být triviální, prostě bude IE "jako na mobilu".

Super vlakno! :)

Obavam se, ze IE neni jen o starsich lidech. Pouziva se v mnoha korporatech z duvodu, ze to neni open source a uz je soucasti windows.

A pak je zuzo labuzo delat intranet appku ciste pro ne :)

@streetcz
"Jsou projekty, které mají 0% uživatelů používajících IE, ale jsou i projekty, kde stále nějaké to % je (1-3%). Můj názor je takový, že pokud chceme používat moderní technologie, tak se musíme naučit přestat používat staré, nepodporované prohlížeče."

Toto mi připomnělo moment, který mě vždycky pobaví.

Jednou na mě přiletěl dotaz na to, jestli by šlo udělat jisté frontend komponenty(!), které jsou sdílené na X webech a aplikacích tazajícího, modulárně, tak aby se nemusel obtížně updatovat/manažerovat kód a bylo nějaké jednotné UI. Jistěže by šlo. Web komponenty/Custom elements by na toto byly ideální (možností je více, ale toto by byla dle mého názoru ta nejlepší). Jenže jakmile se sdělilo, že by vypadly
kvůli mizerné podpoře IE/Edge, tak se to dál neřešilo. Myslím, že by to stále za to, obzvlášť když už Edge 76 by to již měl mít OK (viz. caniuse), tak snad bude všechno brzy tipťop a budou taková řešení více a více realističtější. Představa je to super.

Grid používám zatím výhradně jako progressive enhancement a vždy testuji jeho podporu pomocí @supports, jinak používám flex, ale protože je v IE asi milion chyb v jeho implementaci, tak většinou nedojde ani na to. Takže se věci často spíš řeší pomocí celkem podceňovaného display: table (ačkoliv i tam má IE a zejména IE9 problémy).

Trik pro použití gridu by měl být, že když použijete přístup mobile-first, tak nepodporující prohlížeč dostane mobilní verzi, na kterou grid nepotřebujete, protože je vše pod sebou. Podporující prohlížeče pak dostanou kód pomocí @supports. (V praxi to samozřejmě tak snadné není. Mobile-first ale stejně nepoužívám.)

Nepodporovat IE je u zahraničních webů většinou snazší, protože tam už ho používá opravdu minimum lidí. U nás je to ještě celkem dost. Nicméně třeba takovou Operu Mini používá více lidí než třeba IE9. Ta podporuje ještě méně věcí, ale nikdo se o ní nestará. Požadavky na podporu IE9 ale dostávám pořád.

My určitě musíme pomoct s přechodem na moderní technologie nepodporou těch starých, ale asi bychom si neměli zase tak moc usnadňovat práci, jakože bude web úplně nepřístupný. Zatím se snažím, aby byl web alespoň v IE11 100% a v IE10 rozumně použitelný.

Nevedel som že IE nepracuje s GRID.
Pozrel som do Google analytic na svoj SK web a používanie prehliadača u mňa je také:
V podstate nikto nechodí ku mne cez IE.


1. Chrome

2. Firefox

3. Safari

4. Samsung Internet

5. Android Webview

6. Android Browser

7. Opera

8. Edge

9. Opera Mini

Původně odeslal Gabonator ↪

Nevedel som že IE nepracuje s GRID.

IE Grid podporuje, ale pouze starou specifikaci.

Původně odeslal streetcz ↪

Na mé portfolio, které je udělané pomocí CSS Gridu...

A myslíte, že to použití gridu stálo za to? Mně přijde, že to celé lze udělat pomocí starších metod zhruba stejně rychle a navíc získáte zdarma větší podporu... To je tak obecně můj přístup: použít nejstarší možný způsob, dokud to není moc práce navíc.

Nakonec je to vždy otázka cílů, resp. nákladů a výnosů, které je vždy potřeba posoudit samostatně. Obecně ale u vašeho portfolia asi OK, u mě jako kodéra těžko říct, protože hodně lidí může zkoušet, jak mi to kde funguje, ale zase na můj web budou chodit lidi s moderními prohlížeči (analytics ale ukazují i 1x IE8 a 3x IE9; nepodceňoval bych ale ani Android 4). Jakýkoliv e-shop nebo běžná firemní prezentace spíše ne. Podpora Gridu je podle Can I Use 90 %. To je teoreticky nepodpora pro 100 lidí z 1000.

Původně odeslal streetcz ↪

Dokáže mi někdo logicky vysvětlit proč vůbec Microsoft stále nabízí na svých stránkách IE ke stažení, když mají relativně funkční Edge? :D

IE je nutnej pro nějaký úřední weby a zřejmě i pro nějaký funkce programů. Spíš jde o to, aby lidi neměli nějakou starou verzi. Na windows od 7 do 10 se snad všude natáhnul automaticky IE 11, takže pořád lepší dělat optimalizaci pro 1 verzi než pro 4.
Zrovna teď to řešim a nechápu, proč se tam javascript chová úplně jinak. Třeba cookies to uloží až po vypnutí a zapnutí.

chtěl jsem použít grid ale mám stále 6% uživatelů s IE 11 a starší, což je v mém případě víc než firefox, těch je asi 4%... takže myslím že je tak dva roky ještě čas...