38 lines
757 B
Markdown
38 lines
757 B
Markdown
|
---
|
||
|
|
title: Improve Compatibility with Browser Fallbacks
|
||
|
|
---
|
||
|
|
## Improve Compatibility with Browser Fallbacks
|
||
|
|
|
||
|
|
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||
|
|
We need to add a fallback to the ```background``` property of the ```.black-box`` class.
|
||
|
|
|
||
|
|
### Example
|
||
|
|
|
||
|
|
```css
|
||
|
|
:root {
|
||
|
|
--black-color: black;
|
||
|
|
}
|
||
|
|
.black-box {
|
||
|
|
background: var(--black-color);
|
||
|
|
width: 100px;
|
||
|
|
height: 100px;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
## Solution
|
||
|
|
|
||
|
|
Add a fallback to the ```background``` property before the existing background declaration:
|
||
|
|
|
||
|
|
```css
|
||
|
|
:root {
|
||
|
|
--black-color: black;
|
||
|
|
}
|
||
|
|
.black-box {
|
||
|
|
background: black;
|
||
|
|
background: var(--black-color);
|
||
|
|
width: 100px;
|
||
|
|
height: 100px;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|