CSS @support 实现渐进式网页设计

时间 2019-11-09

原文原文链接

特性查询赋予了咱们使用CSS检测浏览器是否支持某个css特性的能力。咱们可使用该功能在浏览器支持最新的CSS特性时，使用新的语法来编写咱们的样式，同时对于不支持的浏览器进行优雅降级。javascript

CSS的设计自己就是支持优雅降级的。对于浏览器不支持的CSS语法，在浏览器解析时会被忽略。所以，咱们只要在编写样式时先知足低版本浏览器的视觉完整性，再针对支持高级特性的浏览器进行渐进式样式设计便可。但有时候这并不能知足咱们的需求：当咱们须要一系列的样式组合来实现咱们的视觉效果时，若是浏览器对咱们使用的一系列样式中的某一个CSS特性不支持，有可能出现样式错乱的状况。css

基本使用

@support的基本语法与@media十分类似java

.selector {
/* property supported in old browsers */
}
@support (property: value) {
/* property supported in new browsers */
}
复制代码

特性查询语句由@support关键字开头，加上一个条件语句和包含在一个大括号内的CSS规则组成。咱们能够如今特性查询语句外写旧浏览器支持的样式，而后再在特性查询语句中写浏览器支持某些新特性时的新样式。web

div {
  display: flex;
}
@support (display: grid) {
  div {
    display: grid;
  }
}
复制代码

在该示例中，咱们先用flex布局实现旧浏览器支持的布局样式，而后更进一步咱们能够在支持display: grid;属性的新浏览器中使用grid布局快乐的玩耍了。浏览器

条件语句中的组合条件检测

在特性查询语句的支持条件中咱们有时候可能须要同时查询浏览器对多个CSS属性的支持状况来以为如何组织咱们的渐进式样式。这种时候咱们能够用and、or、not这三种布尔操做来组合咱们的查询条件。布局

布尔操做符

and操做符能够对两个表达式的结果进行逻辑与操做，即只有当两个表达式都为真的时候，则生成的表达式也为真，不然为假。多个逻辑与表达式能够直接并列成一排，表示全部表达式都为真的时候，总体的求值才为真。flex

@support (display: table-cell) and (display: list-item) and (display:run-in) {
/* some style here */
}
复制代码

or操做符能够对两个表达式的结果进行逻辑或操做，即只要两个表达式有一个为真的时候，则生成的表达式也为真，不然为假。多个逻辑或表达式也能够直接并列成一排，表示全部表达式只有有一项为真的时候，总体的求值就为真。flexbox

@support (-webkit-mask-image: -webkit-linear-gradient(right,transparent,#000)) or (mask-image: linear-gradient(-90deg,transparent,#000)) {
  /* some style here */
}
复制代码

not操做符通常放在表达式的前面表示对原表达式的否认，即求值为真的表达式加上not操做符后表示假，求值为假的表达式加上not后表示真。spa

@support not (display: flex) {
  div {
    float: left;
  }
}
复制代码

组合条件检测

布尔操做符也能够组合起来使用，但必须用括号来显示的隔离不用的布尔操做符，以免优先级形成的混乱设计

@support (display: flexbox) and ( not (display: inline-grid) ) {
/* some style here */
}
复制代码

CSS.supports

在JavaScript中有一个与特性查询语句相对应的API，window.CSS.supports。这个方法接受一个与CSS特性查询语句的查询条件相似的字符串做为参数，或者接受两个参数，一个表明属性名，一个表明属性值。

CSS.support('(display: flex) and(not(display: line-grid)');
CSS.support('display', 'grid');
复制代码

这个API能够和CSS的特性查询配合使用，当咱们的浏览器支持某些更高级特性的时候，设计一些渐进式功能。

兼容性

每一个CSS特性使用最后都离不开谈兼容性。特性查询是在2011年就已经发布的草案，多年来支持程度已经比较可观了，除了IE系列全军覆没以外，其余主流浏览器都可以很好的支持。

参考

@support

CSS.support