Supporting older browsers—Part 2: CSS

Tram Ho

Introduction

In the previous section, I have introduced the javascript support issue for old browsers, in this article I will continue to introduce CSS support, specifically about Property fallbacks and Feature queries.

Property fallbacks

If the browser does not support certain property A or the corresponding values, it will ignore all that property A. In this case, the browser will look for the preceding values ​​- fallback – that it finds.

Example of using fallback :

Browser support CSS Grid will use display: grid and vice versa, it will use display: block

Omit default values

If the element has a default of display: block , we can omit the display: block declaration. That is, we just need to rewrite the example on the city:

Browser support CSS Grid will read other properties such as grid-template-columns , while browsers that do not support CSS Grid will not. This means we can write more CSS Grid properties without having to worry about fallback values:

Feature queries

Feature queries , also written as @supports , are responsible for telling us whether CSS properties are supported by the browser or not. It is like an if/else backend:

@supports is useful in case we want the browser to read CSS properties only if those properties are supported by the browser. Going back to the CSS Grid above, we could write the following:

Here padding-left and padding-right only read by browsers that support both @supports and CSS Grid.

Another example of -webkit-initial-letter property:

On the left is the case in which the property is supported by browser and vice versa.

Support for feature queries

Fortunately, Features queries are supported on all popular browsers today.

Using property-fallback and feature queries at the same time

Let's take a look at the code below:

In this case all browsers will apply 2em to the left and right padding 2. The simple reason is because padding-left: 2em and padding-right: 2em are defined later. In the CSS file properties below will override the previous properties.

If we want padding-left: 2em and padding-right: 2em be applied only if the browser does not support CSS Grid, we need to change the definition order:

This also means that if we use both @supports and @supports not , we must define @supports not first:

Summary

This article is about sharing ways to support CSS with older browsers using Property fallbacks and Feature queries . Posts are limited, thank you for taking the time to track.

Source: https://zellwk.com/blog/older-browsers-css/

Share the news now

Source : Viblo