Improve Compatibility with Browser Fallbacks

Here you will learn how to improve compatibility with browser fallbacks.



When working with CSS you will likely run into browser compatibility issues at some point. This is why it's important to provide browser fallbacks to avoid potential problems.

When your browser parses the CSS of a webpage, it ignores any properties that it doesn't recognize or support


This means that if you do want to provide a browser fallback, it's as easy as providing another more widely supported value immediately before your declaration. That way an older browser will have something to fall back on, while a newer browser will just interpret whatever declaration comes later in the cascade.
 Let's improve our browser compatibility by adding another background declaration.

For Example:

<html>
<head>
<title>wikibooster</title>
<style>
   :root {
    --red-color: red;
  }
  .red-box {
    background: red;
    background: var(--red-color);
    height: 200px;
    width:200px;
  }
</style>
<div class="red-box"></div>
</body>
</html> 

Output:







Next Topic #









Please Share To Others

Post a Comment

0 Comments