CSS中 特性查询(@supports)详解及使用

简介: CSS中 特性查询(@supports)详解及使用

1. 简介

CSS中的 @supports 用于检测浏览器是否支持 CSS 的某个属性。其实就是条件判断,如果支持某个属性可以写一套样式,如果不支持某个属性,可以提供另外一套样式作为替补。可以放在代码的顶层,也可以嵌套在任何其他条件组规则中。

语法

@supports 规则由一组样式声明和一条支持条件构成。支持条件由一条或多条使用 逻辑与(and)、逻辑或(or)、逻辑非(not)结合的名称 - 值对(name-value pair)组成。可以使用圆括号调整操作符的优先级。

声明语法

最基本的支持条件就是 CSS 声明,也就是一个 CSS 属性后跟一个值,中间用冒号分开。

@supports(prop:value) {
  /* more styles */
}

如:检查是否支持 dispaly: flex

@supports (display: flex) {
  div {
    display: flex;
  }
}

函数语法

第二种基本支持条件是支持函数,几乎所有浏览器都支持这种语法,但函数本身仍在标准化进程中。

测试浏览器是否支持经过测试的选择器语法。如果浏览器支持子组合器,则以下示例返回 true。

@supports selector(A > B) {}

2. 操作符

not 操作符

将 not 操作符放在任何表达式之前就能否定一条表达式。

/* 如果浏览器不支持display:flex属性的话,那么div的样式就是 float: right */
@supports not (display: flex) { 
  div {    
    float: right;  
  }
}

和其他操作符一样,not 操作符可以应用在任意复杂度的表达式上。

@supports not (not (transform-origin: 2px)) {}
@supports (display: grid) and (not (display: inline-grid)) {}

注意: 如果 not 操作符位于表达式的最外层,则没有必要使用圆括号将它括起来。但如果要将该表达式与其他表达式连接起来使用,比如 and 和 or,则需要外面的圆括号。

and 操作符

and 操作符用来将两个原始的表达式做逻辑与后生成一个新的表达式,如果两个原始表达式的值都为真,则生成的表达式也为真。

/* 如果浏览器支持 display:flex 和 box-shadow 的属性,就执行里面自己的样式 */
@supports (display: flex) and ( box-shadow: 2px 2px 2px black ) { }

可以将多个合取词并置而不需要更多的括号。以下两者都是等效的:

@supports (display: table-cell) and (display: list-item) and (display:run-in) {}
@supports (display: table-cell) and ((display: list-item) and (display:run-in)) {}

or 操作符

or 操作符用来将两个原始的表达式做逻辑或后生成一个新的表达式,如果两个原始表达式的值有一个或者都为真,则生成的表达式也为真。

/* 如果浏览器支持其中一个,就可执行里面自己的样式 */
@supports (display: -webkit-flex) or (display: -moz-flex) or(display: flex) {
  /*自己的样式 */
}

可以将多个析取词并置而不需要更多的括号。以下两者都是等效的:

@supports (transform-style: preserve) or (-moz-transform-style: preserve) or
          (-o-transform-style: preserve) or (-webkit-transform-style: preserve) {}
@supports (transform-style: preserve-3d) or ((-moz-transform-style: preserve-3d) or
          ((-o-transform-style: preserve-3d) or (-webkit-transform-style: preserve-3d))) {}

注意: 在使用 and 和 or 操作符时,如果是为了定义多个表达式的执行顺序,则必须使用圆括号。如果不这样做的话,该条件就是无效的,会导致整个规则失效。

@Supports 使用

@supports 的用途是将一组较旧的样式设置为备份,然后取消这些样式并在支持给定属性的情况下进行增强。

@supports 的一个优秀用例是布局。一些边缘浏览器现在提供对 flexbox 的支持,而其他浏览器则落后。

.wrap{
  float: right;
}
@supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) {
  .wrap{
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    float: none;
  }
}

3. CSS.supports()

CSS @supports 对应的 JavaScript 是 window.CSS.supports。

CSS.supports() 静态方法返回一个Boolean 值,用来校验浏览器是否支持一个给定的 CSS 特性。

语法

boolValue = CSS.supports(propertyName, value);
boolValue = CSS.supports(supportCondition);
参数
第一种用来检验浏览器对于一对“属性 - 属性值”的支持:
  propertyName  要检查的 CSS 属性名称
  value  要检查的 CSS 属性值
第二种语法需要一个匹配@supports条件的参数:
  supportCondition  检查条件

eg

const supportsFlex = CSS.supports('display', 'flex');
const flexAndAppearance = CSS.supports('(display: flex) and (-webkit-appearance: caret)')

在使用 supports 的 JavaScript 方法之前,首先检测功能是很重要的。Opera 使用了一个不同的方法名,因此会抛出一些东西:

const supportsCSS = !!((window.CSS && window.CSS.supports) || window.supportsCSS || false)

4. 浏览器兼容性

2020062310470442.png


相关文章
|
1月前
|
编解码 前端开发 UED
CSS进阶 - 响应式设计与媒体查询
【6月更文挑战第17天】响应式设计通过媒体查询适应不同设备,确保网页在桌面、平板、手机上提供优化体验。媒体查询是CSS核心技术,允许根据设备特性应用样式。常见问题包括忽视视口设置、硬编码断点和过度依赖查询。解决办法涉及设置正确的视口元标签、基于内容的断点和模块化设计。通过移动优先策略和灵活的断点管理,可创建高效、易维护的响应式网站。
|
2月前
|
机器学习/深度学习 移动开发 前端开发
CSS3 新特性
CSS3 新特性
40 0
|
14天前
|
Web App开发 前端开发 JavaScript
CSS 媒体查询 @media【详解】
CSS 媒体查询 @media【详解】
14 0
|
22天前
|
Web App开发 移动开发 前端开发
认识 CSS(三大特性、引入方式)
认识 CSS(三大特性、引入方式)
|
22天前
|
Web App开发 移动开发 前端开发
CSS3 三大特性+Chrome 调试代码技巧
CSS3 三大特性+Chrome 调试代码技巧
|
26天前
|
前端开发
番外篇-CSS3新增特性
番外篇-CSS3新增特性
13 0
|
2月前
|
前端开发 JavaScript 开发者
CSS3作为CSS的最新版本,引入了许多强大的新特性和改进
【5月更文挑战第26天】CSS3作为CSS的最新版本,引入了许多强大的新特性和改进
23 2
|
2月前
|
编解码 前端开发 UED
【专栏:HTML 与 CSS 移动端开发篇】CSS 媒体查询与移动端特定样式
【4月更文挑战第30天】CSS媒体查询在移动端开发中至关重要,它基于设备特性(如屏幕尺寸、分辨率、方向)应用特定样式,实现响应式设计。通过`@media`规则定义条件,如`(max-width: 600px)`,当屏幕宽度小于或等于600px时应用相应样式。常见条件包括屏幕宽度、高度、方向和分辨率。媒体查询可用于响应式布局、导航菜单优化、图片加载及字体调整。在实践中,需注意保持查询简洁,充分测试,渐进增强,并提前规划。掌握媒体查询能提升移动端用户体验,创造更优秀的网页设计。
|
2月前
|
小程序 前端开发 JavaScript
使用CSS的媒体查询功能在小程序中实现自适应布局
使用CSS的媒体查询功能在小程序中实现自适应布局
|
2月前
|
编解码 前端开发 UED
【专栏:CSS 进阶篇】CSS 媒体查询与响应式设计
【4月更文挑战第30天】CSS媒体查询与响应式设计是网页适应多设备的关键。媒体查询基于设备特性应用不同样式,而响应式设计确保网站在各种屏幕尺寸上表现良好。通过弹性布局和图片优化,实现跨设备一致性体验。实践中,如新闻、电商和个人博客网站广泛采用响应式设计。然而,需注意性能优化、设计平衡及多设备测试。掌握这些技术,为用户提供优质、一致的数字体验,共创网页设计的美好未来!