CSS Feature Queries (CSS特性查询)

简介:

Feature Queries 是CSS3 Conditional Rules specification中 的一部分,它支持“@supports”规则,“@supports”规则可以用来测试浏览器是否支持CSS属性和值对。CSS本身有降级机制,比如忽视 不支持的属性或值,但当很重要的属性直接被忽视也是很严重的,这个时候你可以用Feature Queries 测试是否支持所有的CSS规则,还可以优化你的页面。Queries在各个浏览器中已经有很多稳定的实现了,比如Chrome,Firefox和 Opera。对浏览器的支持仍在加强,你有必要了解一下Featue Queries, 并决定是否在现在的项目中合适它。

Feature Queries in CSS

Feature Queries和Media Queries有点像,举一个简单的例子,你可以要求浏览器运行一个CSS的margin属性。

@supports (margin: 0) { /CSS to apply/ }
如果你不太明白,让我们举一个现实中的例子,假如你想用backgrund-blend-mode来给背景图片着色,可以在原有的灰度图片中添加一个颜色。


d59cd2c2381afbdda1f8ea84eba41a663a12aa94
在线调试唯一地址:http://www.gbtags.com/gb/debug/76f8c728-796d-48c7-a82f-f8400e8ba2a0.htm
body {
    background-blend-mode: multiply;
    background: linear-gradient(rgb(59, 89, 106)
    , rgb(63, 154, 130))
    , url(background.png);
    }

这个功能很酷不是么?然而,浏览器对它的支持还在完善之 中, background-blend-mode 目前已经可以在很多浏览器中使用了, 但是仍有一些无法显示出想要的效果。 为了在无法显示效果的浏览器中同样完成这个功能,我们可以通过类似半透明颜色叠加的方式。

body {
    background: #3F9A82;
    background: linear-gradient(rgba(59, 89, 106, 0.8)
    , rgba(63, 154, 130, 0.8))
    , url(background.png);
    }

上面的代码中,如果浏览器不支持semi-transparent颜色 图层,那就只能显示一种背景。如果我们使用Feature Query,我们可以根据情况来改变背景。Feature Query这里就更像Media Query了,,使用@supports并在括号内添加CSS声明即可使用。

@supports (background-blend-mode: multiply) {
    body {
    background-blend-mode: multiply;
    background: linear-gradient(rgb(59, 89, 106)
    , rgb(63, 154, 130))
    , url(background.png);
    }
    }

Feature Queries in JavaScript
Feature Queries同时也支持JavaScript接口:CSS.supports。我们同样以上面的例子来说明。如果浏览器支持background-blend-mode: multiply,我们可以在body标签中添加 blend-mode。


d59cd2c2381afbdda1f8ea84eba41a663a12aa94
在线调试唯一地址:http://www.gbtags.com/gb/debug/beef5e87-2159-45e9-872a-c85b51046e29.htm

    window.onload = function() { if (CSS.supports('(background-blend-mode: multiply)'))
    document.body.classList.add('blend-mode');
    }


    body.blend-mode {
    background-blend-mode: multiply;
    background: linear-gradient(rgb(59, 89, 106)
    , rgb(63, 154, 130))
    , url(background.png);
    }

像上面的演示一样,你可以用逻辑运算符(and, or 和 not)来合并测试。举例来说,如果你想要让浏览器同时支持background-blend-mode 和background属性值,你可以编辑下面的内容:

@supports (background-blend-mode: multiply)
    and (background: linear-gradient(...), url(...))

或者写成:

CSS.supports('(background-blend-mode: multiply) \
    and (background: linear-gradient(...), url(...))');

相 信Feature Queries很快就会在开发者之间广泛流行起来,你需要考虑的就是在什么时候使用它,在测试的时候需要确定它们能在同一个浏览器中适用。虽然 Feature Query对性能方面不会有太大的改善,但是它们可以让你的代码变得更加可控。不妨先试一试这些新特性,然后把感受告诉我们。
文章转载自 开源中国社区 [http://www.oschina.net]

相关文章
|
27天前
|
编解码 前端开发 UED
CSS进阶 - 响应式设计与媒体查询
【6月更文挑战第17天】响应式设计通过媒体查询适应不同设备,确保网页在桌面、平板、手机上提供优化体验。媒体查询是CSS核心技术,允许根据设备特性应用样式。常见问题包括忽视视口设置、硬编码断点和过度依赖查询。解决办法涉及设置正确的视口元标签、基于内容的断点和模块化设计。通过移动优先策略和灵活的断点管理,可创建高效、易维护的响应式网站。
|
2月前
|
机器学习/深度学习 移动开发 前端开发
CSS3 新特性
CSS3 新特性
39 0
|
11天前
|
Web App开发 前端开发 JavaScript
CSS 媒体查询 @media【详解】
CSS 媒体查询 @media【详解】
12 0
|
19天前
|
Web App开发 移动开发 前端开发
认识 CSS(三大特性、引入方式)
认识 CSS(三大特性、引入方式)
|
19天前
|
Web App开发 移动开发 前端开发
CSS3 三大特性+Chrome 调试代码技巧
CSS3 三大特性+Chrome 调试代码技巧
|
23天前
|
前端开发
番外篇-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 进阶篇】CSS3 新特性:过渡、动画与变形
【4月更文挑战第30天】CSS3的过渡、动画和变形三大特性为网页设计注入活力,创造生动丰富的用户体验。过渡提供平滑效果,常用于按钮点击等;动画实现复杂动态效果,适用于滚动字幕等;变形允许元素几何变换,如旋转和缩放。实际应用包括动态导航菜单、图片轮播和加载动画。然而,需注意浏览器兼容性、性能优化和设计平衡。掌握这些特性,将为网页设计带来更多创新可能。