关于css3:如何优雅地实现浏览器兼容与CSS规则回退

<!– 如何优雅地实现浏览器兼容与规定回退 –>

读完了《Visual Studio Code 权威指南》，前端方面书籍不能停，于是捡起「CSS 一姐」Lea Verou 的《CSS 魔法》。

咱们没法管制用户应用新版本还是老版本的浏览器，因而往往须要依据浏览器对于属性的兼容状况书写多套 CSS 代码。本文就是探讨如何优雅地应答浏览器兼容问题，包含四点：层叠机制来反对较早的浏览器，Modernizr 设置辅助类来别离编写款式，应用 @supports 规定回退，简短的 JavaScript 代码实现回退。

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

/* 避免 linear-gradient 在老浏览器中挂掉导致没有背景 */
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);

这里参考了一篇 14 年的老博客 Modernizr 的介绍和应用。

Modernizr 官网：https://modernizr.com/

Modernizr 如何失效？如果页面反对 text-shadow 属性，那么 Modernizr 会增加 textshadow 类。如果不反对，那么它用 no-textshadow 类作为代替进行增加。

因而，前端开发人员就能够设置两套代码，来应答浏览器提供或者不提供 text-shadow 反对的两种状况。

/* 浏览器不反对 text-shaow */
h1 {color: gray}

/* 浏览器反对 text-shaow */
.textshaow h1 {
  color: transparent;
  text-shadow: 0 0 .3rem gray;
}

除了应用 Modernizr，也能够应用浏览器自带的 @supports：

/* 浏览器不反对 text-shaow */
h1 {color: gray}

/* 浏览器反对 text-shaow */
@supports (text-shadow: 0 0 .3rem gray){
    h1 {
    color: transparent;
    text-shadow: 0 0 .3rem gray;
  }
}

然而 Lea Verou 指出，上述代码的投影成果只有在即反对 @supports 又反对 text-shadow 的浏览器中才会失效。因而慎用 @supports。

思路与 Modernizr 雷同，做个性检测，而后增加辅助类。

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

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

如上，咱们为 html 增加了辅助类：

如果浏览器反对 text-shadow，那么增加 textshadow
如果浏览器不反对 text-shadow，那么增加 no-textshadow

上述代码能够被封装为函数：

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;
}

留神到上述办法只能用来检测属性是否反对，而非属性值。（如下，解释一下属性和属性值，如下代码）

background : linear-gradient(red, tan);
    属性    :     属性值                ;

检测属性值是否反对，常见的思路是：赋给对应属性，而后看浏览器是否还保留着这个值。这个办法会扭转元素款式，因而能够用暗藏元素避免款式因为检测被扭转。

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');
}

封装函数如下：

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 一姐的书真的很有程度，怪不得前端大大们把她的《CSS 揭秘》列为必读书目。

提供浏览器兼容的网站

层叠机制来反对较早的浏览器

Modernizr 设置辅助类来别离编写款式

应用 @supports 规定回退

简短的 JavaScript 代码实现回退