Browser Support CSS Grid - Status March 2019

Community resources Product feedback
1

Hi Webflow-Team,

can you give information how is the browser support for the CSS Grid? Or do you have a serious website recommendation where to get actual infos?

Do you recommend to use it already? Because we have much clients who do not update on the latest browser version.

The same question i have for using it in Newsletter.

Thank you so much! And greetings from germany :slight_smile:
Bettina

2

@Bettina_Lucas - This site provides information about CSS and browser support. It is very current.

1 Like
3

Yes this site i know :slight_smile: But i didn´t know if it is a serious site. Thank you :slight_smile: There stand 88,96 percent. So 11 percent can not use the website. This is too much. Is there an alternative for the older browser?

Thanks for your answer!
Bettina

4

@Bettina_Lucas-

That resource is referenced by companies like IBM, Microsoft, Google, Mozilla, and more. It is authoritative.

You can choose to use the display properties that match up with the level of browser support you need. Flex has pretty good support, but does have IE issues. Block is supported 100%.

1 Like
5

What you mean with “Block”? My English ist not perfect :slight_smile: Only to understand well :slight_smile:

6

I mean the display:block type.

1 Like
7

But is it better to wait to use grid or do you recommend to use it already? We do not want to loose clients. 11 percent is for us too much.

8

I can’t answer that question for you. On most of the sites I build, using CSS Grid is acceptable. When it is not, I use flex box. If that is not acceptable, then I code the sites by hand.

You should look at your analytics data to determine what the actual percentage is in your target geography, and if those visitors are already engaging your site. This is all the part of site discovery / research process when deciding on what technologies you will support.

1 Like
9

Yes you have reason. Thank you so much for your input :slight_smile:

That helped me much. Have a nice evening :slight_smile:

Bettina

1 Like
10

As long as there is not a warning triangle in the Webflow designer I would assume they use a polyfill for the browsers that don’t support stuff like CSS grid. I haven’t been able to find any information confirming this though, could someone from Webflow confirm?

11

Since this original thread, the support for Grid has increased to almost 95% :slight_smile:

12

We don’t use polyfill, especially now as the browser support is so good for Grid.

If you really must support IE11 specifically, then a couple of recommendation we would give would be to:

  1. Use Grid, but not use the newer features such as autofit, and autoplaced items. See this Stack Overflow article for more details
  2. Don’t use any grid based layouts if you really need to support IE11.
  3. Advise the user that IE11 is not ideal and they should use a more modern browser like the other 95%.

As a former freelancer, I would personally say developing for IE11 in 2020 is a lot of wasted work. (in my own opinion).

Hope this helps.

13

Thank you for your answer!
I wasn’t really considering IE and grid specifically, even if that was the original question… But generally speaking, if there is something that is lacking support in browsers, do we get either a heads up in the Webflow designer or do you use polyfills, or do we have to keep track of what’s supported ourselves? If the latter is the case, I would suggest the correct terms are used in the designer, so people are able to google it. For example, under Display Flex you can choose the Direction, but it’s called Horizontal and Vertical instead of Row and Column (why is that btw?).