•   欢迎来到21NN网.
  •   请记住本站网址www.21nn.cn

css3的@supports是什么?怎样运用【css教程】,css3,@supports,特性检测

摘要: 本篇文章给人人带来的内容是引见css3的@supports是什么?怎样运用,让人人对@supports有一个开端的相识。有肯定的参考价值,有须要的朋侪能够参考一下,愿望对你们有所协助。css3...
本篇文章给人人带来的内容是引见css3的@supports是什么?怎样运用,让人人对@supports有一个开端的相识。有肯定的参考价值,有须要的朋侪能够参考一下,愿望对你们有所协助。

css3 @supports是什么?有什么用?

@supports是CSS3新引入的划定规矩之一,重要用于检测当前浏览器是不是支撑某个CSS属性并加载细致款式,即css的特征检测。

我们要知道,在前端手艺一日千里的本日,种种新手艺新属性屡见不鲜;而 CSS 层面亦不例外,css的一些新属机能极大提拔用户体验以及削减开发者的工作量,而且当下的前端气氛是云云的:

1、许多实验性的功用未成为规范就被大批的运用;

2、须要兼容多种终端,多种浏览器,而种种浏览器对某一新功用的完成结果天差地别;

在这类背景下,又想运用新的手艺给用户供应更好的体验,又想做好回退机制保证低版本终端用户的基础体验,CSS 特征检测就应运而生了。

CSS 特征检测就是针对差别浏览器终端,经由过程前提推断当前浏览器对某个特征是不是支撑。运用 CSS 特征检测,我们能够在支撑当前特征的浏览器环境下运用新的手艺,而不支撑的则做出某些回退机制。【相干视频教程引荐:CSS3教程】

下面我们就来看看css3 @supports是怎样运用的,引见@supports举行css特征检测的要领。

css3 @supports的运用

CSS @supports 能够经由过程 CSS 语法来完成特征检测,并在内部 CSS 区块中写入前提推断语句:假如特征检测经由过程则愿望完成的 CSS 语句,假如特征检测不经由过程则愿望完成的 CSS 语句。

基础语法:

//假如经由过程了前提
@supports(运转前提) {
    /* 运用划定规矩---想要完成的css语句*/
}
 //假如没有经由过程前提
@supports not(运转的前提) {
    /* 运用划定规矩---想要完成的css语句 */
}

例:

/ *仅当支撑'display:flex'时才在'@supports'划定规矩中运用划定规矩。* / 
@ supports(display:flex){    
    .el {         
       display:flex;        
       align-items:middle;        
       / * ...... * /
    }
}

完成多个前提的多个搜检

在@supports中,我们能够运用and和or运算符建立庞杂的测试,搜检划定规矩中的多个功用是不是支撑。

and和or运算符能够离开运用,也能够组合运用,例:

为防止由优先划定规矩引发的殽杂,如今许可组合and,运用or,但不运用括号图层。这意味着以下声明无效:

@supports (transform: rotate3d(1, 1, 0, 30deg) and 
          (transition: transform 2s) or 
          (animation: my-3d-animation 2s alternate forwards) {    
          /* ... */
 }

我们须要运用括号组合前提,就像运用其他编程言语一样,如许能够使得优先级清楚。所以,上面的例子对你如许做是有用的:

@supports   (transform: rotate3d(1, 1, 0, 30deg) and 
            ( (transition: transform 2s) or (animation: my-3d-animation 2s alternate forwards) ) {    
            /* ... */
}

注:

1、在not、and、or两侧都须要运用空格离开

2、正在测试的声明(运转前提)必需一直出如今括号内,而它是表达式中唯一的内容;不然就是无效的声明。

3、组合运算符时,必需运用括号消灭优先级。

浏览器支撑

支撑以下版本:

总结:以上就是本篇文章的全部内容,愿望能对人人的进修有所协助。

以上就是css3的@supports是什么?怎样运用的细致内容,更多请关注ki4网别的相干文章!

分享到:

发表评论

评论列表

还没有评论,快来说点什么吧~

公众号二维码

微信公众号