购物车
登陆 / 注册
微信扫码登陆

推荐手册

@supports

@supports
检测是否支持某CSS特性
编辑:前端控 前端控 更新时间:2019-01-30 14:30:01

@supports

语法:

@supports (rule)[operator (rule)]* { sRules }

operator:or | and | not

取值:

  • rule:
  • 指定一条具体的CSS规则,必须使用括号包裹
  • operator:
  • 使用or | and | not等操作符指定多条规则。

说明:

检测是否支持某CSS特性

定义支持和不支持flex标准写法的浏览器分别使用不同的规则:

示例代码:

@supports ( display: flex ) {
	body {
		display: flex;
	}
	#aside {
		width: 210px;
	}
	#main {
		flex: auto;
	}
}

@supports not ( display: flex ) {
	#aside {
		float: left;
		width: 210px;
	}
	#main {
		overflow: hidden;
		*zoom: 1;
	}
}

我们可以通过类似这样的写法来给不同的终端使用差异化的方案。

你也可以写多重规则来进行过滤:

示例代码:

@supports ( box-shadow: 2px 2px ) or
          ( -moz-box-shadow: 2px 2px ) or
          ( -webkit-box-shadow: 2px 2px ) {
	.demo {
		-moz-box-shadow: 2px 2px 0 rgba(0, 0, 0, .3);
		-webkit-box-shadow: 2px 2px 0 rgba(0, 0, 0, .3);
		box-shadow: 2px 2px 0 rgba(0, 0, 0, .3);
	}
}

兼容性:

浅绿 = 支持

红色 = 不支持

粉色 = 部分支持

IEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome
6.0-11.02.0-21.04.0-27.06.0-8.015.0+6.0-8.42.1-4.318.0-26.0
12.0+22.0+28.0+9.0+9.0+4.4+27.0+

实例

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<style>
@supports ( display: flex ) {
    body {
        display: flex;
    }
    #aside {
        width: 210px;
    }
    #main {
        flex: auto;
    }
}

@supports not ( display: flex ) {
    #aside {
        float: left;
        width: 210px;
    }
    #main {
        overflow: hidden;
        *zoom: 1;
    }
}
</style>
</head>
<body>
<div id="aside">aside</div>
<div id="main">main</div>
</body>
</html>
			

运行实例 »

点击 "运行实例" 按钮查看在线实例

网站导航
网站首页
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ交流群
微信公众号
微信公众号