您现在的位置是：亿华云 > 域名

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

亿华云2025-10-08 20:51:44【域名】0人已围观

简介我们没法控制用户使用新版本还是老版本的浏览器，因此往往需要根据浏览器对于属性的兼容情况书写多套 CSS 代码。本文就是探讨如何优雅地应对浏览器兼容问题，包括四点：层叠机制来支持较早的浏览器，Moder

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

提供浏览器兼容的雅地网站

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

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

/* 防止 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 支持的两种情况。

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

使用 @supports 规则回退

除了使用 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 。

简短的 JavaScript 代码实现回退

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

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

很赞哦!（63781）

上一篇： 2. 不要花大价钱买域名，新手鉴别能力不足，容易投资失误。

下一篇：其次，一般域名注册有一个获取密码的按钮，域名注册商点击后会向您发送密码。在得到域名注册商发送的密码后，将其传输到域名服务提供商网站，然后输入密码，此时域名呈现申请状态。提交申请后，原注册人通常会向您发送一封电子邮件，询问您是否同意转让。此时，您只需点击同意转移按钮，域名注册商就可以成功转移。