7 ms·

Great article, the examples really demonstrate the power of grids. I wish I could use CSS Grid at work but my work requires ie11. Does anyone know of a way to u

Great article, the examples really demonstrate the power of grids. I wish I could use CSS Grid at work but my work requires ie11. Does anyone know of a way to use CSS grid with ie11? I understand some features are supported but its very bare and not reliable.

Theodores 7y ago
The way to handle IE 11 is to degrade gracefully. IE11 is not a HTML5 browser, it is supported for legacy applications and Microsoft want people to use Edge. Hence IE11 is never going to get grid. Ever. So degraded means that you develop in your normal webkit/Firefox way and just change 'display: grid' to 'display: block' when you have it looking good in your dev browser. Then you look at how bad it is. IE 11 does not need responsive so you just have to get it to be merely presentable and usable, not pixel perfect. Lea Verou has some useful ideas on how to do this, check out any of her recent talks online to get an idea.
- nicoburns 7y ago
  > Hence IE11 is never going to get grid. IE11 actually has grid. As does IE10. Admittedly an older version. But it's a bit mean to call IE out on lack of standards support when they actually introduced grid in the first place.
  - Veen 7y ago
    Yes, but it's an outdated version of grid that doesn't work with the modern syntax. You can use autoprefixer to somewhat work around the differences. https://medium.com/@elad/supporting-css-grid-in-internet-explorer-b38669e75d66 https://medium.com/@elad/supporting-css-grid-in-internet-exp...
    - detritus 7y ago
      Thanks for this, though one thing from that article: > CSS grid is fully supported in all main browsers: Chrome, Firefox, Safari, Edge including their mobile versions. This isn't strictly true. On my last "Can I get away with deploying CSS Grid on my site yet?" check, IE wasn't even a of real concern. What was was the not insignificant number of mobile and old version of Chrome/Safari/etc browsers that don't support it.
      - Theodores 7y ago
        Safari on 32 bit iPads. I don't care about them for what I am doing. Can you tell me of any other hold ups? I am not familiar with Apple phones or Android phones stuck on legacy browsers. Is there anything I need to know? I am okay with not supporting IE.
        detritus 7y ago
        Then go for it! I think my number, across unsupported browsers, was around 10% or something. Not a huge number, but that's 10% potential lost clients.
manishsharan 7y ago
My strategy is to check if CSS Grid is available using Javascript ; if not , then use flexbox . The layout might look off but the page is still usable. And you dont have to redo your page when the IE11 finally does go away.
Zardoz84 7y ago
autoprefixer helps a lot. A few days ago, I just used css grid to layout a few elements and it's working on ie10/11

Theodores 7y ago

The way to handle IE 11 is to degrade gracefully. IE11 is not a HTML5 browser, it is supported for legacy applications and Microsoft want people to use Edge. Hence IE11 is never going to get grid. Ever. So degraded means that you develop in your normal webkit/Firefox way and just change 'display: grid' to 'display: block' when you have it looking good in your dev browser. Then you look at how bad it is. IE 11 does not need responsive so you just have to get it to be merely presentable and usable, not pixel perfect. Lea Verou has some useful ideas on how to do this, check out any of her recent talks online to get an idea.

nicoburns 7y ago
> Hence IE11 is never going to get grid. IE11 actually has grid. As does IE10. Admittedly an older version. But it's a bit mean to call IE out on lack of standards support when they actually introduced grid in the first place.
- Veen 7y ago
  Yes, but it's an outdated version of grid that doesn't work with the modern syntax. You can use autoprefixer to somewhat work around the differences. https://medium.com/@elad/supporting-css-grid-in-internet-explorer-b38669e75d66 https://medium.com/@elad/supporting-css-grid-in-internet-exp...
  - detritus 7y ago
    Thanks for this, though one thing from that article: > CSS grid is fully supported in all main browsers: Chrome, Firefox, Safari, Edge including their mobile versions. This isn't strictly true. On my last "Can I get away with deploying CSS Grid on my site yet?" check, IE wasn't even a of real concern. What was was the not insignificant number of mobile and old version of Chrome/Safari/etc browsers that don't support it.
    - Theodores 7y ago
      Safari on 32 bit iPads. I don't care about them for what I am doing. Can you tell me of any other hold ups? I am not familiar with Apple phones or Android phones stuck on legacy browsers. Is there anything I need to know? I am okay with not supporting IE.
      - detritus 7y ago
        Then go for it! I think my number, across unsupported browsers, was around 10% or something. Not a huge number, but that's 10% potential lost clients.

manishsharan 7y ago

My strategy is to check if CSS Grid is available using Javascript ; if not , then use flexbox . The layout might look off but the page is still usable. And you dont have to redo your page when the IE11 finally does go away.

Zardoz84 7y ago

autoprefixer helps a lot. A few days ago, I just used css grid to layout a few elements and it's working on ie10/11