Providing Fallbacks for Page Layouts with CSS

CSS can be used to provide fallback for page layouts. Web design will continue to evolve. But, for now, here’s a summary of the current state of page layout in today’s world:

• Nearly 80 percent of browsers support Grid. This is too small a number to build a Grid-only layout.
• About 85 percent of browsers fully support flexbox, although vendor prefixes are required. This is great support, but if you do a flexbox-only layout, about one in seven visitors will see your page in an ugly light.
• All browsers support both the float property and display: inline-block.

Does this mean you should just use floats or inline blocks and ignore flexbox and Grid until they have 100-percent browser support? No way! Through a technique called progressive enhancement, you can build a layout that uses a newer technology, but also includes an older page layout system that gets used with browsers that don't support the newer CSS. An older technology that a browser uses when it doesn’t understand a newer technology is called a fallback.

The easiest way to implement fallbacks is to add feature queries, which use the @supports rule to check whether the web browser supports a CSS feature:

@supports (<em>property: value</em>) {
  Code to run if the browser supports the property-value
}

Replace property and value with the name of the CSS property and its value you want to check. For example, the following feature query-checks for Grid support:

@supports (display: grid) {
  Grid CSS goes here
}

To put this all together, here's some pseudo-code that shows how you’d implement your progressive enhancement:

Float or inline-block CSS comes first
@supports (display: flexbox) {
Flexbox CSS goes here
}
@supports (display: grid) {
Grid CSS goes here
}

The browser first implements the float or inline-block layout. If the browser supports flexbox, then it will implement the flexbox CSS, which automatically overrides the floats and inline-blocks (although you might have to apply width: auto to some elements to override explicit width settings from earlier in your code). If the browser supports Grid, it implements the Grid CSS, which overrides the flexbox code.