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 :
1 2 3 4 5 |
<span class="token selector">.layout</span> <span class="token punctuation">{</span> <span class="token property">display</span> <span class="token punctuation">:</span> block <span class="token punctuation">;</span> <span class="token property">display</span> <span class="token punctuation">:</span> grid <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
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:
1 2 3 4 |
<span class="token selector">.layout</span> <span class="token punctuation">{</span> <span class="token property">display</span> <span class="token punctuation">:</span> grid <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
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:
1 2 3 4 5 6 |
<span class="token selector">.layout</span> <span class="token punctuation">{</span> <span class="token property">display</span> <span class="token punctuation">:</span> grid <span class="token punctuation">;</span> <span class="token property">grid-template-columns</span> <span class="token punctuation">:</span> 1fr 1fr 1fr 1fr <span class="token punctuation">;</span> <span class="token property">grid-gap</span> <span class="token punctuation">:</span> 1em <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
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:
1 2 3 4 5 6 7 8 |
<span class="token atrule"><span class="token rule">@supports</span> <span class="token punctuation">(</span> <span class="token property">property</span> <span class="token punctuation">:</span> value <span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token comment">/* Code when property or value is supported*/</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@supports</span> not <span class="token punctuation">(</span> <span class="token property">property</span> <span class="token punctuation">:</span> value <span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token comment">/* Code when property or value is not supported */</span> <span class="token punctuation">}</span> |
@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:
1 2 3 4 5 6 7 8 9 10 |
<span class="token atrule"><span class="token rule">@supports</span> <span class="token punctuation">(</span> <span class="token property">display</span> <span class="token punctuation">:</span> grid <span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token selector">.layout</span> <span class="token punctuation">{</span> <span class="token property">display</span> <span class="token punctuation">:</span> grid <span class="token punctuation">;</span> <span class="token property">grid-template-columns</span> <span class="token punctuation">:</span> 1fr 1fr 1fr 1fr <span class="token punctuation">;</span> <span class="token property">grid-gap</span> <span class="token punctuation">:</span> 1em <span class="token punctuation">;</span> <span class="token property">padding-left</span> <span class="token punctuation">:</span> 1em <span class="token punctuation">;</span> <span class="token property">padding-right</span> <span class="token punctuation">:</span> 1em <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Here padding-left
and padding-right
only read by browsers that support both @supports
and CSS Grid.
Another example of -webkit-initial-letter
property:
1 2 3 4 5 6 7 8 9 10 |
<span class="token atrule"><span class="token rule">@supports</span> <span class="token punctuation">(</span> <span class="token property">initial-letter</span> <span class="token punctuation">:</span> 4 <span class="token punctuation">)</span> or <span class="token punctuation">(</span> <span class="token property">-webkit-initial-letter</span> <span class="token punctuation">:</span> 4 <span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token selector">p::first-letter</span> <span class="token punctuation">{</span> <span class="token property">-webkit-initial-letter</span> <span class="token punctuation">:</span> 4 <span class="token punctuation">;</span> <span class="token property">initial-letter</span> <span class="token punctuation">:</span> 4 <span class="token punctuation">;</span> <span class="token property">color</span> <span class="token punctuation">:</span> #FE742F <span class="token punctuation">;</span> <span class="token property">font-weight</span> <span class="token punctuation">:</span> bold <span class="token punctuation">;</span> <span class="token property">margin-right</span> <span class="token punctuation">:</span> 0.5em <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<span class="token atrule"><span class="token rule">@supports</span> <span class="token punctuation">(</span> <span class="token property">display</span> <span class="token punctuation">:</span> grid <span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token selector">.layout</span> <span class="token punctuation">{</span> <span class="token property">display</span> <span class="token punctuation">:</span> grid <span class="token punctuation">;</span> <span class="token property">grid-template-columns</span> <span class="token punctuation">:</span> 1fr 1fr 1fr 1fr <span class="token punctuation">;</span> <span class="token property">grid-gap</span> <span class="token punctuation">:</span> 1em <span class="token punctuation">;</span> <span class="token property">padding-left</span> <span class="token punctuation">:</span> 1em <span class="token punctuation">;</span> <span class="token property">padding-right</span> <span class="token punctuation">:</span> 1em <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token selector">.layout</span> <span class="token punctuation">{</span> <span class="token property">padding-left</span> <span class="token punctuation">:</span> 2em <span class="token punctuation">;</span> <span class="token property">padding-right</span> <span class="token punctuation">:</span> 2em <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<span class="token selector">.layout</span> <span class="token punctuation">{</span> <span class="token property">padding-left</span> <span class="token punctuation">:</span> 2em <span class="token punctuation">;</span> <span class="token property">padding-right</span> <span class="token punctuation">:</span> 2em <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@supports</span> <span class="token punctuation">(</span> <span class="token property">display</span> <span class="token punctuation">:</span> grid <span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token selector">.layout</span> <span class="token punctuation">{</span> <span class="token property">display</span> <span class="token punctuation">:</span> grid <span class="token punctuation">;</span> <span class="token property">grid-template-columns</span> <span class="token punctuation">:</span> 1fr 1fr 1fr 1fr <span class="token punctuation">;</span> <span class="token property">grid-gap</span> <span class="token punctuation">:</span> 1em <span class="token punctuation">;</span> <span class="token property">padding-left</span> <span class="token punctuation">:</span> 1em <span class="token punctuation">;</span> <span class="token property">padding-right</span> <span class="token punctuation">:</span> 1em <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
This also means that if we use both @supports
and @supports not
, we must define @supports not
first:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<span class="token comment">/* Always write "@supports not" first if you use it */</span> <span class="token atrule"><span class="token rule">@supports</span> not <span class="token punctuation">(</span> <span class="token property">display</span> <span class="token punctuation">:</span> grid <span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token selector">.layout</span> <span class="token punctuation">{</span> <span class="token property">padding-left</span> <span class="token punctuation">:</span> 2em <span class="token punctuation">;</span> <span class="token property">padding-right</span> <span class="token punctuation">:</span> 2em <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@supports</span> <span class="token punctuation">(</span> <span class="token property">display</span> <span class="token punctuation">:</span> grid <span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token selector">.layout</span> <span class="token punctuation">{</span> <span class="token property">display</span> <span class="token punctuation">:</span> grid <span class="token punctuation">;</span> <span class="token property">grid-template-columns</span> <span class="token punctuation">:</span> 1fr 1fr 1fr 1fr <span class="token punctuation">;</span> <span class="token property">grid-gap</span> <span class="token punctuation">:</span> 1em <span class="token punctuation">;</span> <span class="token property">padding-left</span> <span class="token punctuation">:</span> 1em <span class="token punctuation">;</span> <span class="token property">padding-right</span> <span class="token punctuation">:</span> 1em <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
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.