<! How to gracefully implement browser compatibility and rule rollback –>

After reading “Visual Studio Code Authority Guide”, front-end books can not stop, so picked up the “CSS sister” Lea Verou’s “CSS Magic”.

We have no control over whether the user is using a new browser or an older browser, so we often have to write multiple sets of CSS code depending on the compatibility of the browser for properties. This article explores how to gracefully deal with browser compatibility issues, including four points: a caching mechanism to support older browsers, Modernizr’s helper classes to write styles individually, using the @Supports rule to back out, and short JavaScript code to back out.

Provide browser-compatible sites

  • https://caniuse.com/
  • https://webplatform.github.io/
  • https://developer.mozilla.org…

Cascading mechanism to support older browsers

*/ Background: RGB (255, 128, 0); */ Background: RGB (255, 128, 0); background: -moz-linear-gradient(0deg, yellow, red); background: -o-linear-gradient(0deg, yellow, red); background: -webkit-linear-gradient(0deg, yellow, red); */ background: linear-gradient(90deg, yellow, red);

Modernizr sets helper classes to write styles individually

Here is a reference to the introduction and use of a 14 year old blog Modernizr.

Modernizr’s website: https://modernizr.com/

How does Modernizr work? If the page supports the text-shadow property, then Modernizr adds the TextShadow class. If it is not, it is added with the no-TextShadow class as an alternative.

As a result, the front-end developer can set up two sets of code to handle the two cases where the browser provides text-shadow support or does not.

/* Browser does not support text-shaow */. TextShaow h1 {color: gray} /* Browser does not support text-shaow */. TextShaow h1 {color: transparent; text-shadow: 0 0 .3rem gray; }

Use the @SUPPORTS rule to back out

In addition to using Modernizr, you can also use the built-in @Supports browser:

/* Browsers do not support text-shaow */ h1 {color: gray} /* Browsers support text-shaow */ @supports (text-shadow: 0 0.3rem gray){h1 {color: RGB (0, 0, 0); transparent; text-shadow: 0 0 .3rem gray; }}

However, Lea Verou points out that the shadow effect of the above code will only work in browsers that support both @SUPPORTS and text-shadow. So use @SUPPORTS with caution.

Short JavaScript code implements the fallback

Same idea as Modernizr, do feature detection, and then add helper classes.

var root = document.documentElement;  // <html>

if ('textShadow' in root.style) {
} else {

As above, we added helper classes for HTML:

  • If the browser supportstext-shadow, then addtextshadow
  • If the browser doesn’t support ittext-shadow, then addno-textshadow

The above code can be encapsulated as a function:

function testProperty(property) {
  var root = document.documentElement;

  if (property in root.style) {
    return true;

  root.classList.add('no-' + property.toLowerCase());
  return false;

Note that the above method can only be used to detect whether an attribute is supported, not the attribute value. (as follows, explain attributes and attribute values, as shown in the code below)

background : linear-gradient(red, tan); Attribute: Attribute value;

A common way to check if an attribute value is supported is to assign the corresponding attribute and see if the browser still stores the value. This method changes the element style, so you can hide elements to prevent the style from being changed due to detection.

var dummy = document.createElement('p');
dummy.style.backgroundImage = 'linear-gradient(red, tan)';

if (dummy.style.backgroundImage) {
} else {

The wrapper functions are as follows:

function testValue(id, value, property) { var dummy = document.createElement('p'); dummy.style[property] = value; If (dummy. Style [property]) {root.classlist.add (id); return true; } root.classList.add('no-' + id); return false; }

CSS a sister’s book is really a level, no wonder the front end of the big people put her “CSS reveals” as a required reading.