浅谈CSS3特性查询（Feature Query: @supports）功能简介
发布时间：2017-07-31 15:43:27 作者：陈小峰_iefreer 
我要评论
我要评论这是2017年不能不了解和学习的一个CSS新特性，非常实用，考虑到现实世界浏览器的复杂性，该特性本应该先于其他新特性出来。
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
我们已经知道使用媒体查询（Media Query）来检测屏幕尺寸，从而实现响应式界面设计。
而特性查询则用来查询用户代理（如桌面浏览器）是否支持某个CSS3的特性，这个功能除了IE之外，已被其他浏览器所支持。
语法格式
@supports <supports-condition> {
<group-rule-body>
}
特性查询使用@supports规则（和媒体查询@media类似，都是使用一个@符号前缀：at-rule），该CSS规则允许我们把CSS样式写在条件块中，这样只有在当前用户代理支持一个特定的CSS属性值对（property-value pair）的时候才被应用。
举个简单的例子，如果我们要为支持弹性框（flexbox）特性的浏览器定义样式，可以像下面这样写：
@supports ( display: flex ) {
.foo { display: flex; }
}
同样的，和媒体查询规则类似，可以使用一些逻辑操作符（如and、or和not），并支持串接在一起：
@supports (display: table-cell) and (display: list-item) {
… /* your styles */
}
@supports not ((text-align-last:justify) or (-moz-text-align-last:justify) ){
… /* 不支持justify时，用这里的代码来模拟text-align-last:justify */
}
使用实例
检测动画特性：
@supports (animation-name: test) {
… /* 当UA支持无前缀animations特性时的特定样式 */
@keyframes { /* @supports 作为一个CSS条件组at-rule，可以包含其他at-rules */
…
}
}
检测自定义属性：
@supports (--foo: green) {
body {
color: green;
}
}
规范状态
尚处于候选推荐CR(Candidate Recommendation)状态，规范链接：CSS Conditional Rules Module Level 3.
浏览器兼容性
桌面系统：
移动设备：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持程序员之家。
相关文章
transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实2023-04-27
这篇文章主要介绍了CSS transform属性一些基础知识与介绍,需要的朋友可以参考下2023-04-2836种漂亮的CSS3网页按钮Button样式(主要结合before与after)
这篇文章主要介绍了36种漂亮的CSS3网页按钮Button样式，主要结合before与after,需要的朋友可以参考下2023-03-25
现如今网页越来越趋近于动画，相信大家平时浏览网页或多或少都能看到一些动画效果，今天我们做一个通过 css3 鼠标滑过实现动画线条边框，下面一起看看吧2023-02-22
春节快到了，因为疫情已经好久没有回老家了，今年终于可以回家过年了，我已经抑制不住自己激动的心情了。因此，我利用css3的旋转做了一个福到了的特效，而且是双旋转，感兴2023-01-29
这篇文章主要介绍了CSS3实现一根心爱的二踢脚示例代码,这里主要是布局一个DIV元素，根据现实的二踢脚设置其宽高，并且利用css3的box-shadow属性添加阴影效果，需要的朋友可2023-01-05
本文主要介绍了css3手动实现pc端横向滚动，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-20
本文通过实例代码介绍了CSS3实现指纹特效，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2022-03-16
这篇文章主要为大家介绍了css3新增选择器的应用示例以及内容解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-05-10
这篇文章主要为大家介绍了css3新特性的应用示例分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步早日升职加薪2022-03-14
最新评论