程序员之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > CSS教程 >

详解CSS中@supports的用法

前端观察   发布时间：2015-07-14 17:15:10   作者：神飞   我要评论
这篇文章主要介绍了详解CSS中@supports的用法,是CSS入门学习中的基础知识,需要的朋友可以参考下
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）

（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）

基于浏览器的特性检测大家应该已经很熟悉了，特别是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复制内容到剪贴板
  1. @supports(prop:value) { /* more styles */ }  

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

CSS Code复制内容到剪贴板
  1. @supports (display: flex) { div { display: flex; } }  

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

就像这样：

CSS Code复制内容到剪贴板
  1. @supports not (display: flex) { div { float: left; } /* alternative styles */ }  

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

CSS Code复制内容到剪贴板
  1. @supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) { /* use styles here */ }   
  2.   
  3. /* and */ @supports (display: flex) and (-webkit-appearance: caret) { /* something crazy here */ }  

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

CSS Code复制内容到剪贴板
  1. @supports ((display: -webkit-flex) or (display: -moz-flex) or (display: flex)) and (-webkit-appearance: caret) { /* use styles here */ }  

或者更复杂的：

CSS Code复制内容到剪贴板
  1. @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复制内容到剪贴板
  1. boolValue = CSS.supports(propertyName, value); boolValue = CSS.supports(supportCondition);  

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

CSS Code复制内容到剪贴板
  1. result = CSS.supports("text-decoration-style", "blink");     
  2. result = CSS.supports("display", "flex");     
  3. result = CSS.supports("( transform-origin: 5% 5% )");     
  4. 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+

相关文章

  • css实现电梯导航的项目实践

    CSS梯形导航图是一种使用 CSS 布局实现的导航设计,可以根据需要灵活调整导航菜单的上下位置和大小，本文主要介绍了css实现电梯导航，具有一定的参考价值，感兴趣的可以了解
    2023-05-06

  • CSS中calc(100%-100px)不加空格不生效

    本文主要介绍了CSS中calc(100%-100px)不加空格不生效，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学
    2023-05-05

  • css弧边选项卡的项目实践

    本文主要介绍了css弧边选项卡的项目实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05

  • CSS实现鼠标悬浮动画特效

    Css(层叠样式表)是种格式化网页的标准方式，用于控制设置网页的样式，并且允许CSS样式信息与网页内容(由HTML语言定义)分离的一种技术,使用css可以制作各种好看的动画特效,
    2023-05-04

  • CSS link与@import的区别和用法解析

    CSS的link和@import都是用于引入外部CSS文件的方法，但它们有一些区别和不同的用法，本文通过一个简单的代码演示，展示了link和@import的用法，感兴趣的朋友跟随小编一起看
    2023-05-04

  • 使用CSS实现百叶窗效果示例代码

    这篇文章主要介绍了使用CSS实现百叶窗效果示例代码,技术上只使用了css+html,还是非常容易学习的，做出来的百叶窗效果也是很丝滑，文中提供了详细的代码,需要的朋友可以参考
    2023-04-28

  • 使用CSS实现按钮边缘跑马灯动画

    这篇文章主要介绍了使用CSS实现按钮边缘跑马灯动画,技术上只使用了css+html,还是非常容易学习的，文中提供了详细的代码,需要的朋友可以参考下
    2023-04-28

  • css旋转导航的示例代码

    本文主要介绍了css旋转导航的示例代码，文中通过示例代码介绍的非常详细，该导航可用在一些网站首页导航栏中，需要的朋友们下面随着小编来一起学习学习吧
    2023-04-27

  • css实现交融文字效果的项目实践

    这篇文章将介绍如何使用CSS实现交融文字效果，这是一种独特的标题设计，可以增加页面的视觉吸引力和用户体验。通过使用CSS的letter-spacing属性，我们可以创建出字母之间交
    2023-04-27

  • flex子元素内容超出盒子容器宽度问题解决

    在使用弹性布局的时候，必然会有碰到分配子元素空间问题，本文主要介绍了flex子元素内容超出盒子容器宽度问题解决，感兴趣的可以了解一下
    2023-04-24

最新评论

关注微信公众号

扫一扫
?


http://www.vxiaotou.com