如何优雅地实现浏览器兼容与CSS规则回退
读完了《Visual Studio Code权威指南》,前端方面书籍不能停,于是捡起「CSS一姐」 Lea Verou 的《CSS魔法》。
我们没法控制用户使用新版本还是老版本的浏览器,因此往往需要根据浏览器对于属性的兼容情况书写多套 CSS 代码。本文就是探讨如何优雅地应对浏览器兼容问题,包括四点:层叠机制来支持较早的浏览器,Modernizr设置辅助类来分别编写样式,使用 @supports 规则回退,简短的 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
支持的两种情况。
/* 浏览器不支持 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 相同,做特性检测,然后添加辅助类。
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揭秘》列为必读书目。
如何优雅地实现浏览器兼容与CSS规则回退的更多相关文章
- 转载于山边小溪的博客--编写跨浏览器兼容的 CSS 代码的金科玉律
http://www.cnblogs.com/lhb25/archive/2010/06/19/1760786.html 原始网页 作为 Web 设计师,你的网站在各种浏览器中有完全一样的表现是很 ...
- 转:【总结】浏览器CSS Hacks汇总,浏览器兼容方式CSS Hacks
[总结]浏览器CSS Hacks汇总 浏览器兼容可以说是前端开发所要面对的第一个挑战,目前我的电脑上已经安装了6种浏览器(基于IE内核的不算,如Maxthon等). CSS hacks利用浏览器的 ...
- 聊聊一直困扰前端程序员的浏览器兼容-【css】
1.为什么会出现浏览器兼容问题? 由于各大主流浏览器由不同的厂家开发,所用的核心架构和代码也很难重和,这就为各种莫名其妙的Bug(代码错误)提供了温床.再加上各大厂商出于自身利益考虑而设置的种种技术壁 ...
- 浏览器兼容的css hack
<style> div{ background:green; /* for firefox */ *background:red; /* for IE6 */ } </style&g ...
- CSS实现背景透明,文字不透明(各浏览器兼容)
/*CSS*/.waps{ background:url(07158.bmp) no-repeat top center fixed; width:1004px; text-align:center; ...
- CSS实现背景透明,文字不透明(各浏览器兼容) (转)
/*CSS*/ .waps{ background:url(07158.bmp) no-repeat top center fixed; width:1004px; text-align:center ...
- 最全的CSS浏览器兼容问题(转至http://68design.net/Web-Guide/HTMLCSS/37154-1.html)
最全的CSS浏览器兼容问题 CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2 ...
- 浏览器兼容问题汇总<转>
浏览器的内核 Mozilla Firefox ( Gecko ) Internet Explorer ( Trident ) Opera ( Presto ) Safari ( WebKit ) Go ...
- 跨浏览器开发:CSS
理解CSS盒子模型 如果不需要很多奇巧淫技的跨浏览器兼容的 CSS 代码,透彻地理解 CSS 盒子模型是首要事情,CSS 盒子模型并不难,且基本支持所有浏览器,除了某些特定条件下的 IE 浏览器.CS ...
随机推荐
- jQ的隐式迭代和设置样式属性
jQ中的隐式迭代 意义:不需要原生迭代了,在jQ内部自动帮你实现了循环 代码实现: let arr = document.querySelectorAll('li') for(let i = 0;i ...
- [Qt] Librecad 源码分析
libraries jwwlib libdxfrw:一个免费的C++库,用于读写文本格式或二进制格式的DXF文件(C++ library to read and write DXF/DWG files ...
- iozone的使用与介绍-20191105
https://www.jianshu.com/p/faf82e400aa6 iozone的使用与介绍 0.0722017.05.10 07:40:41字数 550阅读 1817 iozone的使用与 ...
- Python基础之变量、输入、输出
一.Hello World程序 在Windows终端执行python C:\Users\renyz02>python Python 3.7.3 (v3.7.3:ef4ec6ed12, Mar 2 ...
- 2.1PyCharm 的初始设置
PyCharm 的初始设置(知道) 目标 恢复 PyCharm 的初始设置 第一次启动 PyCharm 新建一个 Python 项目 设置 PyCharm 的字体显示 PyCharm 的升级以及其他 ...
- c# sql在where查询语句中使用字符串变量与int型变量
使用where语句访问数据库时where语句用上文中以及定义过的变量来查询. string sql3 = string.Format("update Ships set ContainerN ...
- python文件处理(对比和筛选)版本2
场景:对比两个txt文件的差异,将对比结果写入html,将不同部分写入另一个txt #!/user/bin/python #!coding=utf-8 # -*- coding: utf-8 -*- ...
- Qt 中英文切换
一.前言 软件面向不同国籍用户时,需要显示不同语言的操作界面,Qt提供语言家可翻译为不同语言类型,方便软件走向国际化. 二.功能实现 1.翻译文件制作 1)在pro文件中添加生成中英文翻译过渡文件(. ...
- Swagger的学习
Swagger 号称世界上最流行的Api框架; RestFul Api文档在线自动生成工具=>Api文档与API定义同步更新 直接运行,可以在线测试API接口 支持多种语言:(Java,Php. ...
- 使用 Bridge to Kubernetes 简化云端开发
当我们面对一个大型应用程序,它有大量的微服务,并希望完成一些功能开发? 我们面临许多挑战,其中之一将是处理正确的环境,如何进行开发.我们知道,在团队中解决这个问题的最佳方法是将其容器化并在云上托管.这 ...