提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: HTML教程 > css3的@supports是什么?怎样运用【html5教程】,css3,@supports,特性检测

本篇文章给人人带来的内容是引见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网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

上一篇:

下一篇:

相关推荐

0 条评论关于"css3的@supports是什么?怎样运用【html5教程】,css3,@supports,特性检测"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线