CSS3条件判断——@supports
CSS3条件判断，听起来“不明觉厉”，如果你对CSS稍为熟悉⼀点的话，你会发现CSS中的“”就是条件判断之⼀。是的，在中包含了两个部分，其⼀是“@media”规则，主要⽤来“根据媒体属性区分样式表”(特别是在设计中，发挥的作⽤更是强⼤)；其⼆是“@supports”规则，主要⽤来代替前⾯常⽤的库，在不⽀持CSS3的浏览器下实现渐进增强式设计。换句话来说，@supports可以让我们在不⽀持CSS3属性的浏览器下配上单独的样式，看起来很强⼤，那具体如何使⽤呢？我们今天⼀起简单的来学习⼀下：
@supports起源
众所周知，不同的浏览器（不管是现代浏览器还是⽼版本的IE浏览器）对Web页⾯的解析都是不⼀样，为了让Web页⾯在这些浏览器下渲染达到基本⼀致的情况，给⽤户更好的体验，我们必须为他们写不同的样式代码。
不同特征的检测⽅法我们早期都是依赖于javascript来检测，后来通过第三⽅js库来完成。但这样真的有⽤吗？除了要懂怎么检测之外，我们还需要了解更多的浏览器解析机制，这样⼀来对于我们前端⼈员来说就是“没办法”。还好推出了“@supports”条件判断规则，它充许我们可以根据浏览器对CSS特性的⽀持情况来定义不同的样式。这对我们来说是⾮常重要。
@supports语法规则
要想更好的使⽤@supports，我们有必要先从其语法开始⼊⼿，只有知道了怎么⽤，我们才能更好的去⽤。
@supports <；条件规则> {
/* 特殊样式规则 */
}
@supports中的“条件规则”可以声明⼀条或者⼏个由不同的逻辑运算符相结合的声明（⽐如说，⾮（not），或（or），与（and）等）。⽽且还可以使⽤括号来确定其操作的优先级关系。
最简单的条件表达式是⼀个CSS声明，⼀个CSS属性名，后⾯加上⼀个属性值，属性名与属性值之前⽤分号隔开，⽐如：
(display:flex)
我们来看⼀个简单的例⼦：
@supports (display:flex) {
section { display: flex }
...
}
上⾯这段代码的意思是：如果浏览器⽀持“display:flex”属性，那么在“section”元素上就运⽤“display:flex”样式。
@supports还可以根据不同的逻辑运算符相结合，具有不同的语法规则，接下来我们⼀起来细化⼀下@supports的语法规则，以及使⽤细节。
基本属性的检查
正如前⾯的⽰例⼀样，你可以使⽤CSS的基本属性来进⾏检查：
@supports (display: flex) {
div { display: flex; }
}
这种是@supports最基本的使⽤规则。
not逻辑声明——排除
@supports可以使⽤not逻辑声明，主要作⽤是，在不⽀持新特性时，可以提供备⽤样式。换过来也可以理解，如果你的浏览器不⽀持@supports条件判断中的样式，你可以通过@supports为浏览器提供⼀种备⽤样式，如：
@supports not (display: flex){
#container div{float:left;}
}
上⾯的代码表⽰的是，如果你的浏览器不⽀持“display:flex”属性，那么你可以使⽤“float:left”来替代。
and逻辑声明——联合（与）
@supports的条件判断中也可以使⽤“and”逻辑声明。⽤来判断是否⽀持多个属性。例如：
@supports (column-width: 20rem) and (column-span: all) {
div { column-width: 20rem }
div h2 { column-span: all }
div h2 + p { margin-top: 0; }
css样式表优先级最高...
}
上⾯的代码表⽰的是，如果你的浏览器同时⽀持“column-width:20rem”和“column-span:all”两个条件，浏览器将会调⽤下⾯的样式：
div { column-width: 20rem }
div h2 { column-span: all }
div h2 + p { margin-top: 0; }
...
反之，如果不同时⽀持这两个条件，那么浏览器将不会调⽤这部分样式。
注：多个and边接并不需要使⽤括号：
@supports (display: table-cell) and (display: list-item) and (display:run-in){
/*样式*/
}
or逻辑声明——or(或)
@supports除了“not”和“and”逻辑声明之外，还可以使⽤“or”逻辑声明。主要⽤来判断浏览器是否⽀持某⼀CSS特性。也就是说，可以使⽤“or”逻辑声明，同时专声明多个条件，只要其中⼀个条件成⽴就会启⽤@supports中的样式：
@supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) {
section {
display: -webkit-flex;
display: -moz-flex;
display: flex;
…
}
}
上⾯的例⼦是@supports中“or”运⽤场景之⼀。flex在opera和IE10中不需要前缀，⽽在其他的现代浏览器中还是需要浏览器⼚商的前缀，通过上⾯的使得，浏览器⽀持“flex”属性就会调⽤下⾯的样式：
section {
display: -webkit-flex;
display: -moz-flex;
display: flex;
…
}
上⾯是有关于@supports的⼏种语法的使⽤规则介绍，在使⽤这⼏种规则时，有⼏点需要特别注意：
“or”和“and”混⽤
在@supports中“or”和“and”混⽤时，必须使⽤括号（）来区分其优先级：
@supports ((transition-property: color) or (animation-name: foo)) and (transform: rotate(10deg)) {
// ...
}
@supports (transition-property: color) or ((animation-name: foo) and (transform: rotate(10deg))) {
// ...
}
以前两种写法优先级计算并不⼀样。
只有⼀条表达式时必须⽤括号（）
在@supports中，如果条件判断表达式只有⼀条，那么这条表达式必须使⽤括号包起来：
@supports (display: flex) {
// ...
}
浏览器兼容性
通过上⾯对@supports的语法介绍，⼤家都知道这个属性对于做⼀些渐进增加式样式，或者浏览器的兼容性特别⽅便，但浏览器本⾝对其的兼容性如何呢？我们⼀起来看提供的兼容性表格：
虽然⽬前仅有两个浏览器⽀持，但我们应该相信，这将是⼀种趋势，迟早其他浏览器也会跟上的，最终被⽀持。
CSS.supports
在javascript中⽀持css的@supports的写法是“window.CSS.supports”。CSS.supports规范提供了两种写法。第⼀种⽅法包括了两个参数，⼀个是属性，另⼀个是属性值：
var supportsFlex = CSS.supports("display", "flex");
第⼆种写法简单的提供整个字符串的写法：
var supportsFlexAndAppearance = CSS.supports("(display: flex) and (-webkit-appearance: caret)");
在使⽤javascript的supports，最重要的是先检测他的特性，Opera浏览器使⽤不同的名称⽅法：
var supportsCSS = !!((window.CSS && window.CSS.supports) || window.supportsCSS || false);
使⽤@supports来替代Modernizr库？
众说周知，早前都是使⽤库来做⼀些浏览器对属性的检测，从⽽判断浏览器是否⽀持这些特性。⾃从@supports推出后，真的是⽼了吗？他们之间有什么优势呢？
@supports和相⽐，在速度、性能和功能都要⽐强。为什么这么说呢？因为@supports采⽤浏览器本地⽅法实现，这样速度会更快、效率也会更⾼；另外需要依赖于js库，⽽@supports避免了引⼊js库，减少了http的请求量和服务器流量，并且让开发更简单快捷；⽽且@support⽀持多种逻辑条件样式判断，可以很好的满⾜多种需求。
但话⼜说回来，如果你的浏览器不⽀持@supports，⽬前来说你还是需要依赖于来做⼀些检测。其实说过，也在计划，未来将使⽤@supports来替代⾃⾝的检测⽅法。
能使⽤@supports？
不管使⽤@supports或者说使⽤来做⼀些渐进增强式的处理，我们都避免不了写多个样式，这样从⽽也增加了样式的体积，但唯的⼀好处是，能减少对⽂件的请求，增强了⽤户对产品的体验感。
因此，现在对你来说是否使⽤@supports，正确的是在使⽤@supports之前先检测是滞⽀持CSS.supports()和@supports，如果检测出不⽀持，在加载，这样你的页⾯就会有⼀个很好的兼容性。下⾯是实现的⽅法：
if ( !(window.supportsCSS || (window.CSS && window.CSS.supports) )) load_modernizr()
@supports使⽤
在⼤多数情况之下，使⽤@supports都是设置⼀个⽼的样式做为备份，然后新的样式写在@supports中⽤来⽀持现代浏览器。例如“flex”弹性布局，到⽬前有下些版本浏览器不⽀持，但你使⽤这个属性，为了让其他的浏览器不⾄于布局混乱，你可以像下⾯这样写：
section {
float: left;
}
@supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) {
section {
display: flex;
float: none;
}
}
上⾯仅是⼀个简单的例⼦，我们来看看在《》提供的⼀个。
这个例⼦，是早前写的⼀个旋转案例，为了兼容其他浏览器的旋转效果，明前是使⽤来实现的（），案例效果如下所⽰：
上图是在浏览器⽀持3D旋转，卡⽚翻转的⼀个很好的动画。
上图是在浏览器不⽀持3D转换但⽀持2D转换，贺卡的正⾯旋转和动画，底⾯显⽰出来。
上图是在浏览器不⽀持3D或2D转换，贺卡的正⾯就移动左边，显⽰后⾯没有动画。
接下来，我们来看看使⽤@supports修改后的实现⽅法。
HTML结构
<div id="wrapper" tabindex="0">
<div id="inner-wrapper">
<div id="front">
<hgroup>
<h1>Chris Mills</h1>
<h2>Heavy metal web designer</h2>
</hgroup>
<p>Available for copy writing, web design, drums, guitar and bad jokes.</p>
<p>Please contact </p>
</div>
<div id="back">
<ul>
<li><strong>Email:</strong> cmills@opera</li>
<li><strong>Phone:</strong> +44 123 456 7890</li>
<li><strong>Twitter:</strong> @chrisdavidmills</li>
</ul>
</div>
</div>
</div>
结构就不多说了，并不是很复杂，接下来主要看CSS部分。
CSS代码
卡⽚基本样式：
/* ⾃定义体体、导⼊字体 */
@font-face {
font-family: 'DeutschGothicNormal';
src: url('');
src: url('?#iefix') format('embedded-opentype'),
url('fonts/deutsch-webfont.woff') format('woff'),
url('f') format('truetype'),
url('fonts/deutsch-webfont.svg#DeutschGothicNormal') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'SFArcheryBlackSCRegular';
src: url('fonts/sf_archery_');
src: url('fonts/sf_archery_?#iefix') format('embedded-opentype'),
url('fonts/sf_archery_black_sc-webfont.woff') format('woff'),
url('fonts/sf_archery_f') format('truetype'),
url('fonts/sf_archery_black_sc-webfont.svg#SFArcheryBlackSCRegular') format('svg');
font-weight: normal;
font-style: normal;
}
/* 基本的布局样式*/
body {
height: 800px;
font-size: 62.5%;
background-color: #eee;
}
html,body,h1,h2,p {
margin: 0;
padding: 0;
}
footer {
position: absolute;
bottom: 0;
}
#inner-wrapper {
width: 85.6mm;
height: 53.98mm;
margin: 120px auto;
margin: 12rem auto;
position: relative;
-webkit-transition: 1.5s all;
-moz-transition: 1.5s all;
-ms-transition: 1.5s all;
-o-transition: 1.5s all;
transition: 1.5s all;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#front, #back {
position: absolute;
top: 0;
left: 0;
width: 75.6mm;
height: 43.98mm;
padding: 5mm;
box-shadow: 5px 5px 10px rgba(0,0,0,0.7);
background: #FF3500;
background: -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.6)), -webkit-linear-gradient(45deg,#
FF3500 37.7mm,#FF7600 37.8mm,#FF7600 59.7mm,#FF3500 59.8mm); background: -moz-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.6)), -moz-linear-gradient(45deg,#FF3500 37.7mm,#FF7600 37.8mm,#FF7600 59.7mm,#FF3500 59.8mm);
background: -ms-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.6)), -ms-linear-gradient(45deg,#FF3500 37.7mm,#FF7600 37.8mm,#FF7600 59.7mm,#FF3500 59.8mm);
background: -o-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.6)), -o-linear-gradient(45deg,#FF3500 37.7mm,#FF7600 37.8mm,#FF7600 59.7mm,#FF3500 59.8mm);
background: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.6)), linear-gradient(45deg,#FF3500 37.7mm,#FF7600 37.8mm,#FF7600 59.7mm,#FF3500 59.8mm);
}
#front {
z-index: 2;
}
/*⽂本排版样式*/
h1, h2 {
font-family: DeutschGothicNormal, sans-serif;
}
h1 {
position: relative;
font-size: 30px;
font-size: 3rem;
z-index: 3;
}
h2 {
position: relative;
top: 2mm;
font-size: 15px;
font-size: 1.5rem;
text-shadow: 0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200;
}
p, li {
font-family: SFArcheryBlackSCRegular;
font-size: 11px;
font-size: 1.1rem;
margin-top: 5px;
margin-top: 0.5rem;
}
li {
position: relative;
top: 8mm;
}
上⾯只是⼀些基本样式，下⾯我们来看这个实例中的关键部分：
/* 不⽀持transform 2D 或者transform 3D的浏览器执⾏ */
#wrapper:hover #inner-wrapper #front,
#wrapper:focus #inner-wrapper #front {
margin-left: -350px;
}
⾸先在不⽀持transform 2D 或者transform 3D的浏览器定义了⼀个样式，让卡⽚向左移动，显⽰底部的卡⽚。
/*⽀持transform 2D的浏览执⾏ */
@supports (-webkit-transform: rotate(-30deg)) or (-moz-transform: rotate(-30deg)) or (-ms-transform: rotate(-30deg)) or (-o-transform: rotate(-30deg)) or (transform: rotate(-30deg)) { #inner-wrapper #front {
-webkit-transition: 0.8s all ease-in;
-moz-transition: 0.8s all ease-in;
-ms-transition: 0.8s all ease-in;
-o-transition: 0.8s all ease-in;
transition: 0.8s all ease-in;
}
#wrapper:hover #inner-wrapper #front,
#wrapper:focus #inner-wrapper #front {
margin-left: 0;
-webkit-transform: rotate(-30deg) translate(-50%,-100%);
-moz-transform: rotate(-30deg) translate(-50%,-100%);
-ms-transform: rotate(-30deg) translate(-50%,-100%);
-o-transform: rotate(-30deg) translate(-50%,-100%);
transform: rotate(-30deg) translate(-50%,-100%);
}
}
通过@supports在⽀持transform 2D属性的浏览器中实现旋转和位移的效果。
/* 在⽀持 3D transforms的浏览器执⾏ */
@supports (-webkit-transform: rotateX(0deg)) or (-moz-transform: rotateX(0deg)) or (-ms-transform: rotateX(0deg)) or (-o-transform: rotateX(0deg)) or (transform: rotateX(0deg)) { #front, #back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
#front {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论