css3的@supports

2024-05-12 15:41:30

@supports是什么

@supports是CSS3新引入的规则之一，主要用于检测当前浏览器是否支持某个CSS属性并加载具体样式，即css的特性检测。

我们要知道，在前端技术日新月异的今天，各种新技术新属性层出不穷；而CSS层面亦不例外，css的一些新属性能极大提升用户体验以及减少开发者的工作量，并且当下的前端氛围是如此的：

　　1、很多实验性的功能未成为标准就被大量的使用；

　　2、需要兼容多种终端，多种浏览器，而各种浏览器对某一新功能的实现效果天差地别；

在这种背景下，又想使用新的技术给用户提供更好的体验，又想做好回退机制保证低版本终端用户的基本体验，CSS特性检测就应运而生了。

CSS特性检测就是针对不同浏览器终端，通过条件判断当前浏览器对某个特性是否支持。运用CSS特性检测，我们可以在支持当前特性的浏览器环境下使用新的技术，而不支持的则做出某些回退机制。【相关视频教程推荐：CSS3教程】

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 - CSS（层叠样式表） | MDN

css3的@supports相关推荐

CSS3条件判断——@supports
CSS3条件判断,听起来"不明觉厉",如果你对CSS稍为熟悉一点的话,你会发现CSS中的"@media"就是条件判断之一.是的,在CSS3的条件判断规范文档中包 ...
html判定会员,CSS3条件判断——@supports
CSS3条件判断,听起来"不明觉厉",如果你对CSS稍为熟悉一点的话,你会发现CSS中的"@media"就是条件判断之一.是的,在CSS3的条件判断规范文档中包 ...
css3 @support,CSS @supports （CSS3条件判断）
用JavaScript在客户端检测浏览器是否支持某项功能特征,目前虽然这是最可行的方法,但不好的是,对于同一个特征的检测,我们需要反复多次用相同的函数附带各种浏览器前缀.而且因为CSS没有相应的功能, ...
css中小型大写,css3 – OpenType小型大写的CSS回退
上次更新时间2016/02/28. 我花了相当多的时间研究这个并与之搏斗. 在尽可能地挖掘之后,现在的顶级解决方案是: @supports 利用浏览器中的@supports规则.这是我最初的选择在这 ...
css入门教程网页首字下沉,CSS制作首字下沉_CSS Inline Layout Module, initial-letter, CSS3 教程_w3cplus...
在杂志排版中,常常能看到首字下沉的效果. 在Web的排版中,也常常能看到上图这样的效果.并且常常看到的是首段首字下沉.那么今天这篇文章咱们来聊聊如何使用CSS实现首字下沉效果. ::first-let ...
HTML5+CSS3构建同页面表单间的动画切换
[CSDN编译]导读:有开发者表示,HTML5将给个人开发者带来更多机遇.下面的稿件详细描述了一个唯美的动画效果,它实现了在同一个页面中进行登录表单和注册表单的转换.这些效果,完全由HTML5和CSS ...
和css3实例教程_最好CSS和CSS3教程
和css3实例教程级联样式表(CSS) (Cascading Style Sheets (CSS)) CSS is an acronym for Cascading Style Sheets. It ...
html5shiv.js css3,Modernizr, html5shiv, ie7.js, and CSS3 Pie. Which to use and when?
问题 I'm just starting to use HTML5 and CSS3 in my documents. I understand the need for JavaScript to ...
css ltimg gt只适应,css3动画,CSS3实战小技巧--使用CSS变量实现波浪动画
css3动画,CSS3实用技巧--利用CSS变量实现波浪动画.今日头条新闻(www.leadip.com)为您带来相关内容的详细介绍. CSS3实用技巧--用CSS变量实现波浪动画 2017年3月,微 ...

最新文章

热门文章