360° fotografie pro Váš Eshop z Vaší vlastní fotokomory. Ušetřete, foťte a upravujte 360° obrázky IN-HOUSE
Zobrazují se odpovědi 1 až 14 z 14

Používáte CSS Grid?

  1. Ahoj,

    chtěl bych se zeptat na názor front-enďáků nebo obecně tvůrců webů na to jestli používáte CSS Grid. Okrajově se stále zajímám o front-end, abych své UI dokázal i kódovat, případně připravit funkční prototyp pro další vývoj a zajímá mě jak se stavíte k CSS Gridu.

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

    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.

    Pokud je projekt, který musí být optimalizovaný pro IE řeším to nepoužíváním CSS Gridu. Pokud to není stěžejní, tak to alespoň ošetřím nějakým scriptem, který detekuje starý prohlížeč a uživateli vyhodí pop-up s informací o updatu prohlížeče. Např. https://bestvpn.org/outdatedbrowser/en/project

    Ale všiml jsem si, že je i řada zahraničních známých projektů, které absolutně neřeší nekompatibilitu. Např. https://css-tricks.com/ který je totálně rozsekaný v IE a našel jsem i desítky jiných navštěvovaných webů.

    Nějaké počtení je zde
    CSS Grid v Internet Exploreru: Jde to!
    CSS Grid: Kompletní příručka všech vlastností (s příklady)

    Jaký je váš názor/approach k CSS Gridu?

  2. Co se právě děje na Webtrhu?
  3. 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.

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

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

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

  7. @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.
    Naposledy upravil Miroslav Foltýn : 31.08.2019 v 14:42

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

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

  10. Citace Původně odeslal Gabonator Zobrazit příspěvek
    Nevedel som že IE nepracuje s GRID.
    IE Grid podporuje, ale pouze starou specifikaci.

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

    Citace Původně odeslal Gabonator Zobrazit příspěvek
    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/...-with-prefixes

  12. Citace Původně odeslal streetcz Zobrazit příspěvek
    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.

  13. Citace Původně odeslal mjerabek Zobrazit příspěvek
    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 :)

  14. Citace Původně odeslal streetcz Zobrazit příspěvek
    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í.

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

Hostujeme u Server powered by TELE3