Používáte CSS Grid?

Tomáš Marek

(23 hodnocení)

31. 8. 2019 12:07:05

https://webtrh.cz/diskuse/pouzivate-css-grid/#reply1413736

Pavel Mareš

(19 hodnocení)

31. 8. 2019 12:31:14

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:

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.

31. 8. 2019 12:31:14

https://webtrh.cz/diskuse/pouzivate-css-grid/#reply1413735

Tomáš Marek

(23 hodnocení)

31. 8. 2019 12:40:38

"fucking-ie" pobavilo. Díky za odpověď!

Můj odhad je takový, že IE do pár let přestane používat i ta oldschool starší generace a nebudeme muset tento problém řešit. S CSS gridem mám více možností, čistější kód atd. Čím déle ale budeme řešit kompatibilitu na IE tím pomalejší bude to jeho umírání ;)

Vadí mi na tom, že abyste to udělali kompatibilní i na IE, tak na projekt padne dalších x hodin kvůli hloupým 0-3%. U velkých e-shopů je asi správné to pořád řešit jelikož i desetiny procent zisků můžou tvořit velkou sumu.

31. 8. 2019 12:40:38

https://webtrh.cz/diskuse/pouzivate-css-grid/#reply1413734

Miroslav Foltyn

(3 hodnocení)

31. 8. 2019 13:01:32

@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):

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".

31. 8. 2019 13:01:32

https://webtrh.cz/diskuse/pouzivate-css-grid/#reply1413733

David Musil

(68 hodnocení)

31. 8. 2019 13:24:37

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 :)

31. 8. 2019 13:24:37

https://webtrh.cz/diskuse/pouzivate-css-grid/#reply1413732

Miroslav Foltyn

(3 hodnocení)

31. 8. 2019 13:35:08

@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.

31. 8. 2019 13:35:08

https://webtrh.cz/diskuse/pouzivate-css-grid/#reply1413731

Michal Jeřábek

31. 8. 2019 14:59:41

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ý.

31. 8. 2019 14:59:41

https://webtrh.cz/diskuse/pouzivate-css-grid/#reply1413730

Gabonator

(1 hodnocení)

31. 8. 2019 16:24:29

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

31. 8. 2019 16:24:29

https://webtrh.cz/diskuse/pouzivate-css-grid/#reply1413729

Michal Jeřábek

31. 8. 2019 16:28:19

Napsal Gabonator;1541843
Nevedel som že IE nepracuje s GRID.

IE Grid podporuje, ale pouze starou specifikaci.

31. 8. 2019 16:28:19

https://webtrh.cz/diskuse/pouzivate-css-grid/#reply1413728

Tomáš Marek

(23 hodnocení)

31. 8. 2019 16:47:02

Na mé portfolio, které je udělané pomocí CSS Gridu z 1000 uživatelů přišel pouze 1 přes IE 11.0. Mám tam na trackování Hotjar a nebylo vidět, že by měl layout rozsekaný. Vypadal relativně OK až na nějaké nefunkční css styly a interakce. Když ale otevřu u sebe portfolio přes IE 11.0, tak je layout rozházený. Respektive všechny Grid itemy se stackují na 1 pozici grid itemu na sebe.

Ale portfolio je takový nevypovídající příklad, tam je jasné, že budou chodit většinou technicky vzdělanější lidé. Přístup k analytics ostatních webů momentálně nemám, ale zajímalo by mě kolik % uživatelů s IE máte na svých projektech. Pořád si stojím za tím, že kvůli 1 člověku z 1000 je zbytečné ztrácet čas a patlat si kód různýma hackama a scriptama protože to pak potencionálně může zpomalit (byť nepatrně) chod dalším 999 uživatelům.

Ale jak jsem říkal chápu to u těch velkých e-shopů typu Alza, které mají desítky tisíc UIP denně z nichž 2% mají IE, tak je to ve finále velký počet zákazníků. Tady určitě není od věci problém vyřešit.

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

---------- Příspěvek doplněn 31.08.2019 v 16:49 ----------

Napsal Gabonator;1541843
Nevedel som že IE nepracuje s GRID.

Jak píše mjerabek. Lze to právě nějakým způsobem vyřešit přes ten autoprefixer, který mění prefixy pro IE https://github.com/postcss/autoprefixer

Ale asi to bude oser i s těma prefixama https://stackoverflow.com/questions/45786788/css-grid-layout-not-working-in-ie11-even-with-prefixes

31. 8. 2019 16:47:02

https://webtrh.cz/diskuse/pouzivate-css-grid/#reply1413727

Michal Jeřábek

31. 8. 2019 17:23:22

Napsal streetcz;1541849
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.

31. 8. 2019 17:23:22

https://webtrh.cz/diskuse/pouzivate-css-grid/#reply1413726

Tomáš Marek

(23 hodnocení)

31. 8. 2019 17:41:35

Napsal mjerabek;1541855
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.

Já chci hlavně říct, že nejsem front-enďák jak jsem psal v úvodu. Vyznám se tak orientačně v kódu a za pomocí googlu i nějaký web ručně nakóduji, ale v tomhle konkrétním případě jsem použil Webflow, nevím jestli jste o něm slyšel. Je to nástroj spíše pro designéry na tvorbu front-endu, ale bez znalosti základů v něm stejně začátečník nedokáže pracovat.

Určitě tenhle Váš přístup je nejlepší. Já jsem však v tomhle případě nevěděl jak jinak udělat sekci referencí tzn. 2 projekty vedle sebe. Mám tam wrapper na 1100px width tuším a nevěděl jsem jak udělat mezery mezi 2 divs, ale nedělat margin-right a margin-left. Chtěl jsem aby se ty 2 boxy dotýkaly hran toho wrapperu 1100px. Šlo by to asi udělat tak, že by byl u levého divu margin-right: 5px; třeba a u pravého divu by byla combo class s margin-left: 5px; margin-right: 0px;.

Určitě bude i jiný primitivnější způsob, ale CSS grid mi přišel víc elegantní, tak jsem ho použil. Lépe se s ním pracuje i při tvorbě responzivity mi přijde. Ale zopakuji znovu, zajímám se o front-end jen ve volném čase okrajově.

Přehled o interakcích UIčka mám především já jako designér a nechávat to čistě na front-enďákovi je s prominutím peklo. Potřebuji si sám naanimovat hover interakce, animace prvků atd. Proto se to učím, abych to právě mohl zrealizovat jako prototyp a nenechal jsem to na FE a doufal, že to nějak dopadne :)

31. 8. 2019 17:41:35

https://webtrh.cz/diskuse/pouzivate-css-grid/#reply1413725

kolousek

31. 8. 2019 19:24:00

Napsal streetcz;1541849

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í.

31. 8. 2019 19:24:00

https://webtrh.cz/diskuse/pouzivate-css-grid/#reply1413724

tallpa

(4 hodnocení)

31. 8. 2019 21:15:11

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...

31. 8. 2019 21:15:11

https://webtrh.cz/diskuse/pouzivate-css-grid/#reply1413723

Vinly00

19. 9. 2019 09:42:09

Yes, I am also using CSS3 for website designing.

19. 9. 2019 09:42:09

https://webtrh.cz/diskuse/pouzivate-css-grid/#reply1413722

Pro odpověď se přihlašte.

Přihlásit