乐趣区

关于前端:CSS渐进增强方案

jiezi

首先须要明确一点，以往浏览器对 css 的反对是不同的，不同浏览器的款式可能会存在差别，看待这种差别问题，须要写几套不同的 css 来兼容（边框、圆角、色彩等），这样是十分麻烦的，浏览器 css 显示差异化属于浏览器本身的问题，跟咱们的 css 是没有关系的，好的浏览器就有好的显示，蹩脚的浏览器就只有一般显示，咱们只须要关注浏览器是否反对 css 属性即可。
例如: 边框圆角

border-radius : 50%

下面这一句是将边框变成圆形，但局部浏览器可能会显示为方形，这种款式的差别问题无需理睬。

当初就浏览器是否反对 css 属性来讨论一下渐进加强的适配计划。

1、属性值差别实现兼容
2、伪类或伪元素实现兼容
3、浏览器类型辨别实现兼容
4、@supports 实现兼容

属性值差别实现兼容

css的新增属性低版本浏览器是不辨认的，通过属性值差别来实现兼容
案例一：实现图片旋转

.images{
    width: 100px;
    height: 100px;
    /* 所有浏览器辨认 */
    background: url(../assets/loading.gif);    
    /* IE10+ 浏览器辨认 */
    background: url(../assets/loading.png),linear-gradient(transparent,transparent);
    background-size: 100px;
    animation: spin 1s linear infinite;
}

/* 键字 "from" 和 "to"（代表 0%（开始）和 100%（实现））*/
@keyframes spin{from { transform: rotate(360deg); }
    to {transform: rotate(0deg); }
}

剖析：
css 局部写了 background: url(../assets/loading.gif); 这一句是所有浏览器都辨认的，图片为加载的 gif 动图；此外咱们又多增加了 background: url(../assets/loading.png),linear-gradient(transparent,transparent); 这一句，其中 linear-gradient 为 IE10+ 才会辨认的，如果以后浏览器是 IE10 以下则显示动图，如果是 IE10+ 则显示 png 动态图片，配合animation(IE10+) 来实现动画成果。

案例二：实现边框暗影
IE8 以下的浏览器是不反对 box-shadow 属性的，如果想要实现款式的浮动成果，能够通过 border 来实现，IE9+反对box-shadow，那么就能够用暗影实现。

.panel{
    width: 50px;
    height: 50px;
    margin: 10px;
    /* 所有浏览器辨认 */
    border: 1px solid #ddd;
    /* IE9+ 浏览器辨认 */
    border:1px solid rgba(0,0,0,0);
    box-shadow: 2px 2px;
}

rgba也是 IE9+ 才反对的，所以这里能够增加一个 rgba(0,0,0,0) 笼罩原来的 border 成果，这样边框通明，底部暗影的成果就呈现了。

伪类或伪元素实现兼容

下面利用 css 属性差别实现兼容只适宜单行的 css 属性，如果要适配整个代码块，能够应用伪类或伪元素，IE8以下不会辨认伪元素，IE9+辨认伪元素。
对于伪元素的阐明：
| 属性 | 阐明 |
| — | — |
| ::after | 素之后插入 |
| ::before | 元素之前插入 |
| ::first-letter | 首字母 - 第一个字 |
| ::first-line | 首行 - 第一行 |
| ::selection | 抉择的元素 |

具体的请看 w3school 文档：https://www.w3school.com.cn/css/css_pseudo_classes.asp

 .pseudo{
    width: 150px;
    height: 50px;
    margin: 10px;
    border: 1px solid #ddd;
 }
 /* IE9+ 辨认 */
 _::before,.pseudo{border:1px solid rgba(0,0,0,0);
    box-shadow: 2px 2px #608dfa;
 }

下面这里重写了之前的 box-shadow 的案例，IE8以下辨认 pseudo 代码块，IE9+辨认 _::before,.pseudo 代码块，并且依照执行程序笼罩雷同属性。

_::before，伪元素前的下划线是作为一个标签选择器用来占位的，自身不会产生任何匹配。

能够通过该案例以此类推
IE10+ 浏览器反对表单验证相干的伪类
IE11+ 反对 ::-ms-backdrop 伪元素（IE 须要加 ms 前缀，其它浏览器不须要）
Edge12+应用 @supports
Edge13+ 反对 :in-range 或:out-of-range
….

浏览器类型辨别

浏览器反对参考手册：https://www.w3school.com.cn/cssref/css_browsersupport.asp
浏览器配合伪元素：
Firefox浏览器辨认，能够应用带有 -moz- 公有前缀的伪类或伪元素

/* Firefox */
_::-moz-progress-bar, .sth-class{}

支流浏览器辨认

_:default, .sth-class{}

webkit浏览器辨认：只可应用带有 -webkit- 前缀的 伪类 ，不能应用带有-webkit- 前缀的 伪元素 ，因为Firefox 浏览器会认为带有 -webkit- 前缀的伪元素是非法的。

/* webkit 浏览器 */
:-webkit-any(_),.sth_class{}

Chromium Edge浏览器辨认

/* Chromium Edge */
_::-ms-any,.sth-class{}

伪元素解决兼容性有危险，如果浏览器哪天不反对某个伪类，那么就会出问题，这种办法只能解决一些非凡问题，须要留神。

@supports 的兼容

@supports能够用来检测以后浏览器是否反对某个 css 个性，用来解决 css 渐进加强是最正规的。
@supports的反对是从 Edge12 浏览器开始的，目前的支流浏览器都反对。

.div_supports{
    width: 50px;
    height: 50px; 
    background: url(../assets/music.gif);  /* 被笼罩 */
    background-size: 50px;
}

/* Edge12+ 浏览器 */
@supports (animation : none){  // 反对
    .div_supports{background: url(../assets/loading.png);
        background-size: 50px;
        animation:  supp 1s linear infinite;
    }
}
@keyframes supp {from { transform: rotate(360deg); }
    to {transform: rotate(0deg); }
}

应用 @supports 实现加载动画，在 Edge12 之前的浏览器，应用 gif 动图，Edge12+ 的浏览器则应用 png 动态图片配合动画成果实现。

@supports (animation : none) {}  /* 反对 */
@supports (border-radius : aaa){} /* 不反对 */

语法：@supports CSS at-rule 能够指定依赖于浏览器中的一个或多个特定的 CSS 性能的反对申明。这被称为个性查问。该规定能够放在代码的顶层，也能够嵌套在任何其余条件组规定中。如果参数局部的语法是反对的则返回true，否则就是false。

操作符 阐明
默认判断 反对 true , 不反对 false
not 不反对则进入代码块
and 同时反对
or 满足其一

上面是操作符的利用：

/* 反对弹性布局 */
@supports (display: flex){}
/* 不反对弹性布局 */
@supports not (display: flex){}
/* 同时反对弹性布局和网格布局 */
@supports (display: flex) and (display: grid){}
/* 弹性布局或网格布局满足其一即可 */
@supports (display: flex) or (display: grid){}

@supports 能够间断做多个判断

留神：不能将反对和不反对的语法间接放在一起，会报错

@supports (display: flex) and not (display: grid){} /* 报错 */

解决办法：相似 js 中的优先级嵌套，用 () 括起来即可

/* 反对弹性布局但不反对网格布局 */
@supports (display: flex) and (not (display: grid)){}
/* 反对弹性布局 但不反对网格布局或动画 */
@supports (display: flex) and ((not (display: grid)) or (not (animation :none))){}

验证是否反对嵌套：

.supports_12{
    width: 300px;
    border: 1px solid red;
}

/* 反对弹性布局并且不反对 border-radius: 'aaa' 这种语法 */
@supports (display: flex) and (not (border-radius: 'aaa')){
    .supports_12 {color:red;}
} 

/* 反对弹性布局，(不反对 border-radius: 50% 或(满足其一) width:'aaa') */
@supports (display: flex) and ((not (border-radius: 50%)) or (not (width:'aaa'))){
    .supports_12 {color:cyan;}
}

案例源码：https://gitee.com/wang_fan_w/css-diary

如果感觉这篇文章对你有帮忙，欢送点赞、珍藏、转发哦~

退出移动版