首先需要明确一点,以往浏览器对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
如果觉得这篇文章对你有帮助,欢迎点赞、收藏、转发哦~
标签:方案,浏览器,渐进,border,支持,CSS,supports,display,css From: https://www.cnblogs.com/wang-fan-w/p/17188476.html