您现在的位置是：网站首页> 编程资料编程资料

详解CSS中@supports的用法CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题

2021-09-05 1091人已围观

简介这篇文章主要介绍了详解CSS中@supports的用法,是CSS入门学习中的基础知识,需要的朋友可以参考下

基于浏览器的特性检测大家应该已经很熟悉了，特别是modernizr.js推出来之后。其实w3c也出了规范，可以基于css来做一些特性检测，也就是@supports，这个特性已经有两年多了，之前浏览器支持度不够，现在webkit nightly也开始支持了，也就是说safari 9会支持到，这样的话，Blink+webKit+gecko都支持了，只剩下IE浏览器不支持了，嗯，这样更方便对IE差异化处理了。

但是@supports并不能完全替代JS的特性检测方法，它只支持对CSS属性的检测，其它HTML5 api以及webP等技术的检测还是需要JS来完成。
用法：

@supports就像media query一样简单：

CSS Code复制内容到剪贴板

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

@supports也允许你用各种复杂的组合来进行特性检测。
基本用法：

CSS Code复制内容到剪贴板

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

你可以用这种方法来检测各种基本的CSS属性。
not关键词

就像这样：

CSS Code复制内容到剪贴板

@supports not (display: flex) { div { float: left; } /* alternative styles */ }

个人感觉有些鸡肋了，支持@supports的浏览器会不支持各种CSS属性么？不过万事没有绝对，这种情况以后还是可能会有。嗯，私有前缀的话可以试试。
多条件检测

CSS Code复制内容到剪贴板

@supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) { /* use styles here */ }
/* and */ @supports (display: flex) and (-webkit-appearance: caret) { /* something crazy here */ }

你也可以将or和and语句放在一起混用。

CSS Code复制内容到剪贴板

@supports ((display: -webkit-flex) or (display: -moz-flex) or (display: flex)) and (-webkit-appearance: caret) { /* use styles here */ }

或者更复杂的：

CSS Code复制内容到剪贴板

@supports ( not ((text-align-last:justify) or (-moz-text-align-last:justify) ){ … /* specific CSS applied to simulate text-align-last:justify */ }

JS方法

同时也可以用javascript来做类似的检测，方法也很简单：

CSS Code复制内容到剪贴板

boolValue = CSS.supports(propertyName, value); boolValue = CSS.supports(supportCondition);

两种方法都可以，会返回一个bool值。比如：

CSS Code复制内容到剪贴板

result = CSS.supports("text-decoration-style", "blink");
result = CSS.supports("display", "flex");
result = CSS.supports("( transform-origin: 5% 5% )");
result = CSS.supports("( transform-style: preserve ) or ( -moz-transform-style: preserve ) or ( -o-transform-style: preserve ) or ( -webkit-transform-style: preserve )" );

用途

最大的用途是做css特性判断的时候，不用再在js（或者传统的js方法）了，用过modernizr.js的同学可能会印象很深刻，modernizr会在html标签上加上各种各样的class来区分，其它js方法也是类似的实现思路。现在可以直接用@supports来区分或者做浏览器差异化了。
浏览器支持

    chrome 28+
    opera 12.1+
    firefox22+
    safari 9+

上一篇：CSS3动画制作的简单示例

下一篇：CSS3中HSL和HSLA的简单使用示例css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果

您现在的位置是：网站首页> 编程资料编程资料

相关内容

点击排行

本栏推荐

猜你喜欢