Fallback support for Grid

CSS-Grid has had an enormous impact on my workflow and the possibilities when designing for the web.

Aim

To create a variety of fall-back support for a CSS Grid website without having a negative impact on the design on modern browsers. The aim is to provide as close an experience as possible.

Objectives

  • – Create a responsive CSS grid template
  • – Create a flex-box fallback
  • – Create a float fallback
  • – Add relevant additional support for browsers that don’t support HTML5

Approach

At this point, only the latest browsers are supporting grid it is important to consider how to offer some form of support for users on older browsers. In this article I discuss various techniques that can be used to offer fall-back support for CSS-Grid layouts.

Take a look at the demo.

I started by created a basic grid layout, placing it into a @supports rule. This isn’t strictly necessary since as Rachel Andrew points out, browsers will ignore CSS they don’t understand. However, I intended on utilising some of the features of CSS-Grid to style my grid in ways I wouldn’t be able to within the fall-back solutions.

Once the basic grid was set up I took any CSS which would be relevant for my fall-back styles and placed them above my existing ones. The browser will always use the last property (it understands) within the CSS file when styling the page, so at this point I began styling the page as closely as possible to the original, this time in flex-box. It is important here however to reset any values used for the fall-back within the @supports (display: grid) rule so the designs don’t conflict with one another.

Another advantage of putting all the grid styles within a supports rule is the ease in testing your fall-back solutions. You can quickly comment out the whole rule to see your design reset to flex-box.

Whilst the flex-box backup does allow users on slightly older browsers some form of experience on the page, it doesn’t support the complexity of page grid I created without adding more div elements to the page to style it further. This wasn’t an option for me as it would make my primary grid less responsive.

That’ all well and good, but flex-box itself is a relative newcomer, meaning it only offers limited support and won’t help with older browsers. This is where the final fall-back comes in: floats. Setting all the grid boxes to float left won’t have any negative impact on the default template but will allow older pages to render a simple version of the grid.

In addition to support for the grid itself I added fall-back background colours where I have used transparency so on older browsers text will still be legible. To ensure everything works smoothly on Internet Explorer 8 and earlier I implemented Sjoerd Visscher’s HTML5Shiv which teaches older browsers how to use HTML5, most importantly creating elements for <header> <main> and <footer>.

Results

Chrome 64

Pass: This is the main grid layout, working as intended

IE 11

Pass: Flex-box backup running as intended with simpler grid

IE 8

Pass: Float fall-back working as intended with simpler grid

IE 7

Fail: positioning isn’t working, article text has been lost, footer has floated next to the grid

Conclusion

Overall there is some reasonable fall-back support implemented here, however more could be done to ensure the layout performs across a wider range of browsers. The question is ultimately how much support is required for each individual project? If the answer is IE6+, is it worth using Grid in the first place?


Reading List


Take a look at the demo.

Contact

Have a project in mind? Feel free to get in touch using the contact form and I'll be happy to help. Alternatively, you can email me directly at cprincewebdev@gmail.com.

profile for C Prince at Stack Overflow, Q&A for professional and enthusiast programmers

Get in touch