Providing Fallbacks for Page Layouts with CSS - dummies

Providing Fallbacks for Page Layouts with CSS

By Paul McFedries

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 (property: value) {
  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.