- 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
floatproperty anddisplay: inline-block.
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.