前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >如何优雅地实现浏览器兼容与CSS规则回退

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

作者头像
Piper蛋窝
发布2021-07-23 14:22:04
4820
发布2021-07-23 14:22:04
举报
文章被收录于专栏:Piper蛋窝

Marco Samaniego @ unsplash.com

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

我们没法控制用户使用新版本还是老版本的浏览器,因此往往需要根据浏览器对于属性的兼容情况书写多套 CSS 代码。本文就是探讨如何优雅地应对浏览器兼容问题,包括四点:层叠机制来支持较早的浏览器,Modernizr设置辅助类来分别编写样式,使用 @supports 规则回退,简短的 JavaScript 代码实现回退。

提供浏览器兼容的网站

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

层叠机制来支持较早的浏览器

代码语言:javascript
复制
/* 防止 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);

Modernizr设置辅助类来分别编写样式

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

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

Modernizr 如何生效?如果页面支持 text-shadow 属性,那么 Modernizr 会添加 textshadow 类。如果不支持,那么它用 no-textshadow 类作为替代进行添加。

因此,前端开发人员就可以设置两套代码,来应对浏览器提供或者不提供 text-shadow 支持的两种情况。

代码语言:javascript
复制
/* 浏览器不支持 text-shaow */
h1 { color: gray }

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

使用 @supports 规则回退

除了使用 Modernizr ,也可以使用浏览器自带的 @supports :

代码语言:javascript
复制
/* 浏览器不支持 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

简短的 JavaScript 代码实现回退

思路与 Modernizr 相同,做特性检测,然后添加辅助类。

代码语言:javascript
复制
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

上述代码可以被封装为函数:

代码语言:javascript
复制
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;
}

注意到上述方法只能用来检测属性是否支持,而非属性值。(如下,解释一下属性和属性值,如下代码)

代码语言:javascript
复制
background : linear-gradient(red, tan);
    属性    :     属性值                ;

检测属性值是否支持,常见的思路是:赋给对应属性,然后看浏览器是否还保存着这个值。这个方法会改变元素样式,因此可以用隐藏元素防止样式因为检测被改变。

代码语言:javascript
复制
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');
}

封装函数如下:

代码语言:javascript
复制
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揭秘》列为必读书目。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-07-07,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 Piper蛋窝 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 提供浏览器兼容的网站
  • 层叠机制来支持较早的浏览器
  • Modernizr设置辅助类来分别编写样式
  • 使用 @supports 规则回退
  • 简短的 JavaScript 代码实现回退
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档