FED实验室 - 专注WEB端开发和用户体验

CSS @supports

CSS(3) 煦涵 2648℃ 0评论

在Javascript中,功能检测是一种最佳的检测方式。但是在CSS中对于某些属性支持性检测,确没法做,幸运的是最近Firefox、Chrome、Opera增加了@supports(CSS)和CSS.supports(Javascript)来检测不同浏览器对CSS属性的支持情况。本篇文章将来介绍它们是如何工作的。

一、CSS @supports

在你的CSS中,CSS @support指令的运行和@media queries 一样:

@supports(prop:value) {
	/* more styles */
}

CSS @supports允许开发者以不同的方式来检测样式属性的支持情况。

1. 基本的属性检测
弹性盒子:通常是使用浏览器的厂商前缀来支持,不同的浏览器,如下这样:

<!DOCTYPE html>
<html lang="en">
  <head>
    <style type="text/css">
	.flex{
		/* basic styling */
		width: 100%;
		height: 200px;
		border: 1px solid #555;
		font: 14px Arial;

		/* flexbox setup */
		display: -webkit-flex;
		-webkit-flex-direction: row;

		display: flex;
		flex-direction: row;
	}

	.flex > div{
		cursor: pointer;
		-webkit-flex: 1 1 auto;
		flex: 1 1 auto;

		width: 30px;

		-webkit-transition: width 0.7s ease-out;
		transition: width 0.7s ease-out;
	}

   /* colors */
   .flex > div:nth-child(1){ background : #009246; }
   .flex > div:nth-child(2){ background : #F1F2F1; }
   .flex > div:nth-child(3){ background : #CE2B37; }

   .flex > div:hover{
        width: 300px;
   }
   </style>

 </head>
 <body>
	<div class="flex">
		<div>uno</div>
		<div>due</div>
		<div>tre</div>
	</div>
 </body>
</html>

如果使用CSS @support,我们修改上面的例子:

<!DOCTYPE html>
<html lang="en">
  <head>
    <style type="text/css">
	.parent{
		/* basic styling */
		width: 100%;
		height: 200px;
		border: 1px solid #555;
		font: 14px Arial;
	}

	@supports(display: flex) {
		.parent {
			display: flex;
			flex-direction: row
		}
		.parent > .child {
			flex: 1 1 auto;
		}
	}

	@supports not(display: flex) {
		.parent {
			display: inline-block;
		}
		.parent > .child {
			width: 33.3%;
		}
	}
	.parent > .child{
		cursor: pointer;
		-webkit-transition: width 0.7s ease-out;
		transition: width 0.7s ease-out;
	}

   /* colors */
   .parent > .child:nth-child(1){ background : #009246; }
   .parent > .child:nth-child(2){ background : #F1F2F1; }
   .parent > .child:nth-child(3){ background : #CE2B37; }

   .parent > .child:hover{
        width: 300px;
   }
   </style>

 </head>
 <body>
	<div class="parent">
		<div class="child">uno</div>
		<div class="child">due</div>
		<div class="child">tre</div>
	</div>
 </body>
</html>

2. not关键字
这个上例子中已经用到,不再多说。
3. 多检测及条件检测

/* or */
@supports (display: -webkit-flex) or
          (display: -moz-flex) or
          (display: flex) {

    /* use styles here */
}

/* and */
@supports (display: flex) and (-webkit-appearance: caret) {

	/* something crazy here */
}

/* and and or */
@supports ((display: -webkit-flex) or
          (display: -moz-flex) or
          (display: flex)) and (-webkit-appearance: caret) {

    /* use styles here */
}

@support结构的条件判断和@media相似。具体操作可参见官方示例

二、 Javascript CSS.supports()

在Javascript中通过使用window.CSS.supports方法来对CSS @supports进行检测,规范中提供了两个方法,一个方法可以接收两个参数boolValue = CSS.supports(propertyName, value);另一个可以接收一个字符串(A DOMString containing the condition to check),boolValue = CSS.supports(supportCondition);具体使用看下例:

//测试环境,Chrome:34.0.1847.131 m
var res01 = CSS.supports("text-decoration-style", "blink");
//Outputs: false
console.log(res01);

var res02 = CSS.supports("display", "flex");
//Outputs: true
console.log(res02);

var res03 = CSS.supports("( transform-origin: 5% 5% )");
//Outputs: false
console.log(res03);

var res04 = CSS.supports("( transform-style: preserve ) or ( -moz-transform-style: preserve ) or " +
                      "( -o-transform-style: preserve ) or ( -webkit-transform-style: preserve )" );
//Outputs: false
console.log(res04);

三、最后

@supports是被欢迎的,除了现在的CSS 和 Javascript规范。特征检测是我们进行特性支持最好的实践方式,CSS @support提供了一个更底层的检测方式比以往很多年我们一直使用的CSS hack。我们一直在使用过去的几年中一个较低的水平层。我想我们会看到在未来几年@support指令和flexbox会变得更加有用和更广泛的被使用!

以上就是对CSS @supports的描述,希望对您有所帮助,文中不妥之处,望批评、斧正。

参考网址:http://davidwalsh.name/css-supports

下面是「FED实验室」的微信公众号二维码,欢迎扫描关注:

FED实验室

行文不易,如有帮助,欢迎打赏!

赞赏支持or喜欢 (0)or分享 (0)
捐赠共勉
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽