Author：Bruski 👨🏻💻([email protected])
CSS层叠样式表作为前端三剑客之一，通过各类选择器来解耦HTML结构与表现，让开发者拥有专注控制样式的能力，实现了关注点分离。通过层叠机制，为规则赋予不同的重要程度，让我们的样式代码能够灵活地继承与覆盖。
它就像精灵宝可梦里的百变怪👾，拥有强大而奇妙的变化与适应能力，前端技术也因CSS的加入而变得漂亮与有趣🤩
本文主要分享CSS技术中的一个切面概念：渐进增强，希望能够从原理+实例出发，给大家在设计、编写网页样式时带来一点启发💡
渐进增强
随着HTML与CSS的发展，许多新特性陆续得到浏览器厂商们的支持，比如HTML5中的新增标签，CSS中的Flexbox，Grid、calc等，给网页带来了很多新鲜而强大的能力。
但是由于时代推移、浏览器的厂商各自对规范实现的不一致，导致不同的浏览器以及版本存在新特性不兼容或者其他Bug问题，让开发者在新特性与兼容性之间放弃了尝试新特性的想法🤪
但是！时代与技术一定是在进步的，而在新老交替的过渡期，我们可以采用渐进增强的策略，来平衡向后兼容性与最新的HTML/CSS特性。
什么是渐进增强🧐
⛳️所谓渐进增强，即我们首先为最小公分母准备可用的内容，然后再为支持新特性的浏览器添加更多交互优化。
要实现渐进增强，意味着代码要分层，每一层增强代码都只会在相应特性被支持或被认为适当的情况下使用。
听起来有点复杂，然而实际上HTML与CSS已经部分内置了这一策略。
HTML的渐进增强策略
⛳️对于HTML而言，浏览器遇到未知元素或属性时并不会报错，也不会对页面产生什么影响。
假设表单中有输入邮件的控件:
<input type="text" name="field-email" />
我们就可以使用HTML5新增的email类型，可以拥有邮件格式检验以及移动设备中的特定格式软键盘的强化能力：
<input type="email" name="field-email" />
尚未实现这个新类型的浏览器就会想：”这是甚么玩意儿？不明白“🧐，然后给他退化成type="text"类型，就当无事发生。
这样，我们既渐进增强了页面，也不会对浏览器产生什么不好的影响。
类似的还有HTML5的文档声明<!DOCTYPE html>，这样的语法也是向后兼容的。
CSS的渐进增强策略
⛳️对于CSS来说，无法识别的属性/值都会被浏览器丢弃，所以只要提供合理的后备声明，使用新属性就不会带来不良后果。
例如，现代浏览器支持的颜色值rgba函数，我们可以这样定义红色：
.overlay {
background: #000;
background-color: rgba(0, 0, 0, 0.8);
}
对于旧的浏览器，它会丢rgba的声明，应用第一条规则；对于现代浏览器，第二条规则就会覆盖第一条，显示带透明度的红色。
那么即使不是所有浏览器都支持rgba函数，由于提供了合理后备，我们仍然可以大胆地使用它😎
如何实现渐进增强🧐
1. 厂商前缀
🛠浏览器厂商也基于同样的原理为自家浏览器引入实验特性，并加上一串特殊前缀，这样其自家浏览器就能识别而其他浏览器忽略。
例如transform属性：
.thing {
-webkit-transform: translate(0, 10px);
-moz-transform: translate(0, 10px);
-ms-transform: translate(0, 10px);
transform: translate(0, 10px);
最低0.47元/天 解锁文章
427
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
