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

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

创新互联公司专注于甘南网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供甘南营销型网站建设，甘南网站制作、甘南网页设计、甘南网站官网定制、成都小程序开发服务，打造甘南网络公司原创品牌,更为您提供甘南网站排名全网营销落地服务。

提供浏览器兼容的网站

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

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

 
 
 
    
  
  
  
  1. /* 防止 linear-gradient 在老浏览器中挂掉导致没有背景 */ 
    2. 
  
  
  
  2. background: rgb(255, 128, 0); 
    3. 
  
  
  
  3. background: -moz-linear-gradient(0deg, yellow, red); 
    4. 
  
  
  
  4. background: -o-linear-gradient(0deg, yellow, red); 
    5. 
  
  
  
  5. background: -webkit-linear-gradient(0deg, yellow, red); 
    6. 
  
  
  
  6. /* 应该将标准语法放在最后，来确保最终生效的是是标准语法 */ 
    7. 
  
  
  
  7. background: linear-gradient(90deg, yellow, red); 
    8.

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

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

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

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

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

 
 
 
    
  
  
  
  1. /* 浏览器不支持 text-shaow */ 
    2. 
  
  
  
  2. h1 { color: gray } 
    3. 
  
  
  
  3.  
    4. 
  
  
  
  4. /* 浏览器支持 text-shaow */ 
    5. 
  
  
  
  5. .textshaow h1 { 
    6. 
  
  
  
  6.   color: transparent; 
    7. 
  
  
  
  7.   text-shadow: 0 0 .3rem gray; 
    8. 
  
  
  
  8. } 
    9.

使用 @supports 规则回退

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

 
 
 
    
  
  
  
  1. /* 浏览器不支持 text-shaow */ 
    2. 
  
  
  
  2. h1 { color: gray } 
    3. 
  
  
  
  3.  
    4. 
  
  
  
  4. /* 浏览器支持 text-shaow */ 
    5. 
  
  
  
  5. @supports (text-shadow: 0 0 .3rem gray){ 
    6. 
  
  
  
  6.     h1 { 
    7. 
  
  
  
  7.     color: transparent; 
    8. 
  
  
  
  8.     text-shadow: 0 0 .3rem gray; 
    9. 
  
  
  
  9.   } 
    10. 
  
  
  
  10. } 
    11.

但是 Lea Verou 指出，上述代码的投影效果只有在即支持 @supports 又支持 text-shadow 的浏览器中才会生效。因此慎用 @supports 。

简短的 JavaScript 代码实现回退

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

 
 
 
    
  
  
  
  1. var root = document.documentElement;  //  
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3. if ('textShadow' in root.style) { 
    4. 
  
  
  
  4.   root.classList.add('textshadow') 
    5. 
  
  
  
  5. } else { 
    6. 
  
  
  
  6.   rott.classList.add('no-textshadow') 
    7. 
  
  
  
  7. } 
    8.

如上，我们为 html 添加了辅助类：

  • 如果浏览器支持 text-shadow ，那么添加 textshadow
  • 如果浏览器不支持 text-shadow ，那么添加 no-textshadow

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

 
 
 
    
  
  
  
  1. function testProperty(property) { 
    2. 
  
  
  
  2.   var root = document.documentElement; 
    3. 
  
  
  
  3.  
    4. 
  
  
  
  4.   if (property in root.style) { 
    5. 
  
  
  
  5.     root.classList.add(property.toLowerCase()); 
    6. 
  
  
  
  6.     return true; 
    7. 
  
  
  
  7.   } 
    8. 
  
  
  
  8.  
    9. 
  
  
  
  9.   root.classList.add('no-' + property.toLowerCase()); 
    10. 
  
  
  
  10.   return false; 
    11. 
  
  
  
  11. } 
    12.

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

 
 
 
    
  
  
  
  1. background : linear-gradient(red, tan); 
    2. 
  
  
  
  2.     属性    :     属性值                ; 
    3.

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

 
 
 
    
  
  
  
  1. var dummy = document.createElement('p'); 
    2. 
  
  
  
  2. dummy.style.backgroundImage = 'linear-gradient(red, tan)'; 
    3. 
  
  
  
  3.  
    4. 
  
  
  
  4. if (dummy.style.backgroundImage) { 
    5. 
  
  
  
  5.   root.classList.add('lineargradients'); 
    6. 
  
  
  
  6. } else { 
    7. 
  
  
  
  7.   root.classList.add('no-lineargradients'); 
    8. 
  
  
  
  8. } 
    9.

封装函数如下：

 
 
 
    
  
  
  
  1. function testValue(id, value, property) { 
    2. 
  
  
  
  2.   var dummy = document.createElement('p'); 
    3. 
  
  
  
  3.   dummy.style[property] = value; 
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5.   if (dummy.style[property])  // 属性值被浏览器保留 
    6. 
  
  
  
  6.   { 
    7. 
  
  
  
  7.     root.classList.add(id); 
    8. 
  
  
  
  8.     return true; 
    9. 
  
  
  
  9.   } 
    10. 
  
  
  
  10.    
    11. 
  
  
  
  11.   root.classList.add('no-' + id); 
    12. 
  
  
  
  12.   return false; 
    13. 
  
  
  
  13. } 
    14.

网站栏目：如何优雅地实现浏览器兼容与CSS规则回退
URL链接：http://www.mswzjz.cn/qtweb/news47/253797.html

攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 贝锐智能

贝锐智能技术为您推荐以下文章

建站公司知识

分类信息网

高县网站建设　　 　成都网站制作　　 　成都网站SEO优化公司　　 　营销型网站建设　　 　主动防护网　　 　成都网络营销　　 　成都主机托管　　 　LED显示屏　　 　SSL证书　　 　网站免费收录　　 　混凝土密封固化剂　　 　成都发电车出租　　 　云锦斋建筑　　 　成都能净科技　　 　重庆网站建设　　 　四川國際商會　　 　网站建设　　 　蓬安网站建设　　 　凯亚自动化控制　　 　做网站设计