After reading the Definitive Guide to Visual Studio Code, I couldn’t stop reading about the front end, so I picked up CSS Magic by Lea Verou.

We have no control over whether users use a new or old browser, so we often have to write multiple sets of CSS code depending on how compatible the browser is with properties. This article looks at how to elegantly address browser compatibility issues, including four points: a cascading mechanism to support older browsers, Modernizr sets up helper classes to style individually, backbacks with the @Supports rule, and short JavaScript code for backbacks.

Provide browser-compatible web sites

  • caniuse.com/
  • webplatform.github.io/
  • developer.mozilla.org/en-US/

Cascading mechanism to support older browsers

/* Prevent Linear-gradient from hanging in old browsers with no background */
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);
/* The standard syntax should be put last to ensure that the standard syntax is valid */
background: linear-gradient(90deg, yellow, red);
Copy the code

Modernizr sets up helper classes to write styles separately

This is a reference to the introduction and use of Modernizr, a 14-year-old blog.

Modernizr’s official website: modernizr.com/

How does Modernizr work? If the page supports the text-shadow attribute, Modernizr adds the TextShadow class. If not, it adds the no-TextShadow class instead.

As a result, front-end developers can set up two sets of code to deal with situations where browsers provide or do not provide text-shadow support.

/* Browsers do not support text-shaow */
h1 { color: gray }

/* Browsers support text-shaow */
.textshaow h1 {
  color: transparent;
  text-shadow: 0 0 .3rem gray;
}
Copy the code

Use the @supports rule for rollback

In addition to using Modernizr, you can also use the @supports that comes with the browser:

/* Browsers do not support text-shaow */
h1 { color: gray }

/* Browsers support text-shaow */
@supports (text-shadow: 0 0 .3rem gray){
    h1 {
    color: transparent;
    text-shadow: 0 0 .3remgray; }}Copy the code

However, Lea Verou points out that the shadow effect of the above code only works in browsers that support @supports and text-shadow. So use @supports sparingly.

Short JavaScript code to implement fallback

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

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

if ('textShadow' in root.style) {
  root.classList.add('textshadow')}else {
  rott.classList.add('no-textshadow')}Copy the code

As above, we added helper classes for HTML:

  • If the browser supportstext-shadow, then addtextshadow
  • If the browser does not support ittext-shadow, then addno-textshadow

The above code can be wrapped as a function:

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

  if (property in root.style) {
    root.classList.add(property.toLowerCase());
    return true;
  }

  root.classList.add('no-' + property.toLowerCase());
  return false;
}
Copy the code

Note that the above method can only be used to check whether an attribute is supported, not its value. (Below, explain properties and property values, as shown below)

background : linear-gradient(red, tan); Attribute: attribute value;Copy the code

A common way to check whether an attribute value is supported is to assign the corresponding attribute and then see if the browser still holds the value. This method changes the element style, so you can hide elements to prevent the style from changing because of the detection.

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

if (dummy.style.backgroundImage) {
  root.classList.add('lineargradients');
} else {
  root.classList.add('no-lineargradients');
}
Copy the code

The encapsulation function is as follows:

function testValue(id, value, property) {
  var dummy = document.createElement('p');
  dummy.style[property] = value;

  if (dummy.style[property])  // Attribute values are reserved by the browser
  {
    root.classList.add(id);
    return true;
  }
  
  root.classList.add('no-' + id);
  return false;
}
Copy the code

CSS elder sister’s book is really very level, no wonder the front end big people put her “CSS Reveal” as a must-read bibliography.