css新世界学习-2.5@supports渐进增强处理

p1：由于微软已经在今年6月15日宣布彻底停止支持ie，所以不会考虑任何ie浏览器的兼容性。

1.@supports的介绍

@supports用来检测当前浏览器是否支持某个css新特性。这是最正统的css渐进增强处理方法，适合多个css属性需要同时处理的场景。

以下代码的逻辑是：如果css支持animation:none;则使用动画效果和png图片。
如果不支持，则使用gif动画

.demo {
display:inline-block;
width:50px;
background:url(./loading.gif);
}

@supports(animation:none){
.demo{
background:url(./loading.png);
animation:spin 1s linear infinite;
}

@keyframes spin {
from {transform:rotate(360deg);}
to {transform:rotate(0deg)};
}

1.2 @supports 规则支持使用操作符进行判断，如：and,or,not 代表最基础的三个判断逻辑：与，或，非。

@supports (display:flex) and (dispaly:block) {}
@supports (display:flex) or (dispaly:block) {}
@supports not (display:flex)  {}

也可以连续使用运算符进行判断，比如说

@supports (display:flex) and (display:grid) and (gap:0){}

但是有些错误的写法是不允许的，比如说

@supports not (dispaly:flex) and (display:block) {}
需要改成：
@supports （display:block） and (not (display:grid)) {}

简单来说，@supports规则的复杂判断就是把合法的逻辑语句放在括号里不断嵌套。

(not(...)) and (...) or((not (...)) and (...)) { }