CSS Grid [ + Flexbox ] Today
A Practical Real-World Example with Full Browser Support Data
This article assumes you have already learnt CSS Grid and Flexbox but are now worried about using it in a real-world live project. Maybe you fear that users without support for Grid might just get a jumbled-up mess instead of your intended design? I know it was one my main fears!
I have read a fair few articles on this topic, but when it came to redesigning and coding my first live website with CSS Grid I still ran into some problems along the way. For this reason, I did a whole bunch of research and have documented what I learnt here. I have also created an example of the method I reached, so you don’t have to do as much research as I did. ❤️
*Please note: This article was written in April 2018 so all references to browser support is what was valid at the time of writing.
Enjoy! 😃
Contents:
- CSS Grid Support
- Flexbox Support
- CSS Feature Queries Support
- A Method for Using CSS Grid Today
- Solution Browser Support Data
CSS Grid Support
Grid support rolled out pretty much at the same time across all modern browsers (Firefox, Chrome, Safari & Opera) in March 2017 and is today supported by 87.4% of all global traffic.
The exception has been IE and Edge. Edge 12,13,14,15 and also IE 10 and 11 only support an older version of Grid. This can be used with the prefix -ms- but note that the prefix is for the older syntax of Grid not the current version! Information about the older syntax can be found at: https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407
However, the latest version of Edge (Edge 16) now fully supports Grid and currently accounts for 1.57% of global users.
This means, if you are using CSS Grid in your web project and your user is on an up-to-date modern desktop browser it is going to work. This accounts for 34.49% of all global users and when broken down looks like this — Edge (16 only): 1.57%, Opera: 0.84%, Firefox: 4.38%, Chrome: 25.79%, Safari: 1.91%.
As for mobile devices, Grid is also very well supported apart from a few exceptions and users on older devices that are unable to be updated. CSS Grid is supported by Chrome for Android which accounts for 30.41% of Global users, UC for Android which accounts for a further 7.51% of users and iOS Safari (10.3 + 11.2) accounting for 9.60% of users globally.
Flexbox Support
Although from the diagram above it looks as if support for Flexbox and CSS Grid are very similar, it doesn’t show that Flexbox has been supported on Mobile devices for much longer than Grid.
Flexbox has been supported on Android since 4.4 (Dec 2013) which still accounts for 0.58% of global traffic and 4.4.4 (June 2014) another 0.36%. Flexbox is also supported by all versions of Opera Mini which accounts for a further 2.66% of all traffic globally.
However, the biggest bonus comes when looking at iOS Safari where Flexbox has been supported since 7.1 (March 2014) as long as you use the prefix -webkit- this gives you support for a further 10.67% of global mobile traffic.
CSS Feature Queries Support
Feature Queries mean that we can create CSS wrapped in a query that is only read if a browser supporting a certain feature. This seems pretty awesome but the issue is it’s not supported by IE, which is probably the main browser you would want it to work in. However, it is fully supported by all versions of Edge, which is where it actually comes in super handy as I will explain further on in this article.
A Method for Using CSS Grid Today
First up, I would like to point out that not all projects need to support all possible browsers. This article is written using research from global user percentages in mind but your project may have a very different user base.
I recently worked on a project where IE users were going to be the main user group of the web app I was working on, so this solution would not have been appropriate for that project. Working on the project made me very aware of how varied user groups can be and just how many people are still viewing the web in IE, especially on office computers. But bearing this in mind I feel the example I am showing in this article gives a good overview of what could work for most projects and can be easily tweaked according to your projects user base.
A Practical Real-World Solution
So, this is my example of a practical real-world solution for using CSS Grid and Flexbox today while still trying to serve up content that is accessible to the majority of global users on the web [April 2018].
Firstly, I roughly divided my users into Mobile and Desktop users. The reason for this is that I feel in order to fully harness the super-powers of CSS Grid you need to be on a larger screen size. I don’t however feel that in a year or two this statement will still be true. Grid works really well on smaller screens, but mostly layouts with a smaller screen size, especially on a phone, can also be achieved through the use of Flexbox without losing users along the way due to the lack of browser support. Globally right now web traffic is 53.66% Mobile (including Tablets) and 46.34% Desktop but these figures vary a great deal from country to country and by user demographics for an individual website or app.
I achieved this divide in my CSS through using a Media Query. There are other ways to do this but I have in this example gone with a simple min-width query set at 1200px.
This decision was made due to the assumption that if a user was using a Mobile device with a wider screen size than 1200px the chances are they are also using a browser which supports CSS Grid. An example of a device that would fall into this category would be the Google Pixel C. It is a Mobile device with a width of 1600px but would also have an up-to-date browser that supports CSS Grid.
I created this solution mobile-first and all CSS written before the breakpoint at 1200px has been written without CSS Grid. Instead in this version I have written a Flexbox only layout.
This means that so far, all screen sizes with a width less than 1200px will get a Flexbox only layout version of the project and all devices with a screen width of 1200px and over get a Flexbox + CSS Grid Version. Seems simple so far right? and it is… However, now comes IE and Edge Support! 😱 😱 😱
For this part you could also use JavaScript, but as I prefer to use just CSS when I can as it tends to have a faster load time I went with CSS instead. If you would prefer to use JavaScript you can find a JS example for detecting IE/Edge on CodePen by @gapcode here: https://codepen.io/gapcode/pen/vEJNZN 😃 💻
Now comes into play CSS feature queries in my JavaScript-free solution. As said before, feature queries are supported by all versions of Microsoft Edge which is super handy given that Edge 12,13,14 and 15 don't support CSS Grid. So, to benefit from this I have wrapped a CSS Grid feature query around my min-width 1200px media query. By doing this, all versions of Edge (apart from Edge 16+ that do support CSS Grid) will be served up the Flexbox only layout even if the user’s device is 1200px or wider. However, if you are unhappy using the layout written for smaller screens on a larger screen with Edge you can also create further Flexbox CSS placed within a 1200px min-width media query outside of the feature query.
So that is Edge support completely solved with just CSS feature queries as it fully supports Flexbox! Awesome! 🙌
So… what about IE? 😱
For IE I am using two work-arounds. For IE9 and lower placing Conditional Comments within the header of the HTML file works pretty well. In the example I have then placed <style> tags within the comments and the IE9 and lower CSS between them. You can also place a link to a separate CSS file within the comments and not use the <style> tags as I have done for the example. Note also that the main CSS file will also load and the IE CSS will need to be placed below the main CSS link in order to override the property values previously set in the main CSS file.
For IE10 and IE11 you can use media queries as these are supported as shown below using @media all and (-ms-high-contrast: none), (-ms-high-contrast: active). These will also work by overriding CSS properties previously set. IE10 and IE11 unlike IE9 and below do support Flexbox but only the older 2012 version. IE11 does actually also support Flexbox as we know it today, but with a large number of known bugs, so it is probably best avoided. So this means in theory, if you really wanted to, you could use the older Flexbox syntax here if it made sense for your project’s design and user base.
So, we now have a practical real-world solution for using CSS Grid and Flexbox today while still supporting as many users as possible. Not only that, but we have achieved this in most part simply though using CSS overrides, media queries and feature queries.
But what does the document structure of the completed solution look like? Take a look…
You can also find a full example of the solutions code structure I have created on CodePen which is also downloadable if you wish to do so from: https://codepen.io/nikkipantony/pen/PRgezP
For this CodePen, I used the same method as above but created two separate versions in the HTML markup by wrapping <div class=”ie-browser-version”> and <div class=”modern-browsers-version”> around the two separate markup versions. This means that users accessing the site in IE won’t get the full version of the website, but they still get a usable experience. This is completely optional and down to personal preference as well as user base. If you have a high percentage of users still on IE you can still opt to use this same method but show the full version with CSS overrides without wrapping the <div> tags around the content.
Solution Browser Support Data
We have now looked through all the support data from caniuse.com and have an understanding of the example solution I have created. It all seems to add up, but what are the real support figures? How many people will actually see each version of the website and what does all the browser support look like side by side?
In the diagram below I have sliced and diced the browser support data from caniuse.com and placed it over the document structure to give a good overview of which browsers are most likely to serve up which version of the CSS.
To put things into perspective, with this solution we can see that at least 97.22% of all global users would get the expected version of the website. This is pretty awesome given that data on caniuse.com only covers 98.15% of all users in the first place. This leaves a gap of just 0.93% which are not covered. These users are mostly made up of users who are using very out-of-date browsers who only have partial support of Flexbox. 0.21% of these users are using Android 4.2 and 4.3 which only have support for the older 2012 Flexbox specification. If you do need to create support for these users, at least with this example you have now singled them out within the mass of browser support data and know which browsers need to be targeted for further support.
Other things to bear in mind when reading this data is that data pretty much always has to be sliced in some way through assumptions of some sort. In this case the assumptions are about the users’ screen size. The figures shown in the diagram above assume that all Mobile browsers will be being used on a screen size which is smaller than 1200px, which of course in practice is not true, it’s just a majority case. So the actual figures would alter slightly as some users on Mobile browsers will have a screen size wider than 1200px and fall under the category viewing the CSS Grid + Flexbox version. Other users on desktop browsers may also be accessing the web project on screens and/or windows smaller than 1200px in width. This shouldn’t however mean that these users will be viewing that jumbled-up mess we were worry about. The CSS is based on the viewport size of the browser, so if on a smaller screen or window size they will just get the Flexbox only version instead.
The exceptions arise when looking at use cases where the user is accessing the site on a browser that does not support CSS Grid or Feature Queries but is on a screen wider than 1200px. In the diagram shown above these users are shown as Chrome 27 to 21 and Safari 8 to 6.1 accounting for just 0.11% of users globally. These users will view everything from the CSS minus the Grid due to the nature of CSS overrides. In order to test your code and see what these users would be viewing simply comment out the Grid syntax from your code and this is what they will see.
A note on prefixes
Some of the support data shown relies on the Flexbox prefixes being included within your CSS. These prefixes help browsers support Flexbox including for iOS Safari 7.1 to 8.4, Safari 6.1 to 8 and Chrome 21 to 28 all of which need the -webkit- prefix included. These users only account for around 0.30% of global users at this time but there is no point in leaving them out for the sake of adding a few prefixes to your code. You can even add them automatically using an Autoprefixer which you can also get as an extension to your editor of choice. My favorite editor is currently Brackets and the extension can be found Here.
Cross Browser Testing
Having read this article, you may also be interested in testing your web projects in different browsers to check that they show as you expect them to. I’ve put together a few resources you might find handy to know about here.
There are some really great cross browser testing tools out there but the one that sticks out most for me is browserstack.
However, although they say they offer IE testing and a free trial, the free trial does not include many browsers including all versions of IE. So, to use their service to its fullest you need to pay which starts at $12.50/mo for Freelancers ($19/mo if you want to pay month-to-month).
An alternate free option (but be warned, it’s really pretty time consuming) is to create a virtual machine. The service I have used in the past and so would recommend is VirtualBox. VirtualBox is a great way of running an older operating system on your machine in order to create an environment in which you can run older browsers for testing if your project needs it.
You can also download a virtual machine file of your choice directly from Microsoft pre-configured at developer.microsoft.com which you can run and open with VirtualBox for testing all versions of IE and Edge.
Lastly, I would also recommend Netlify. Netlify offer a serverless hosting service where you can instantly host a static site for testing live on the web and it’s free! Once logged in you literally drag your static sites folder of files onto their website and within a few seconds it’s deployed live on the web with its own netlify.com sub-domain. I love Netlify’s overall service when coupled with Git but this fast drag & drop function is extremely useful for when prototyping and carrying out browser testing.
So that about wraps it up, CSS Grid + Flexbox support complete! 😄
Remember though that this example is based on global user data, so it doesn’t mean it is directly related to your user base. It does however, hopefully still show how to target specific CSS according to browser support and I hope you find this research helpful in your future CSS Grid & Flexbox powered web projects. 👍
