CSS 优雅降级和渐进增强

最新推荐文章于 2024-08-09 21:04:47 发布

_wjl_

最新推荐文章于 2024-08-09 21:04:47 发布

阅读量384

点赞数

分类专栏： web前端

web前端专栏收录该内容

50 篇文章 2 订阅

订阅专栏

什么是渐进增强（progressive enhancement）、优雅降级（graceful degradation）呢？

渐进增强 progressive enhancement：

针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

类似爬山，由低出往高处爬

优雅降级 graceful degradation：

一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

类似蹦极，由高处往低处下落

区别：渐进增强是向上兼容，优雅降级是向下兼容。

个人建议：现在互联网发展很快，连微软公司都抛弃了ie浏览器，转而支持 edge这样的高版本浏览器，我们很多情况下没有必要再时刻想着低版本浏览器了，而是一开始就构建完整的效果，根据实际情况，修补低版本浏览器问题。

浏览器前缀

浏览器前缀	浏览器
-webkit-	Google Chrome, Safari, Android Browser
-moz-	Firefox
-o-	Opera
-ms-	Internet Explorer, Edge
-khtml-	Konqueror

后面我们会有常用的解决H5和C3 的兼容解决文件，我们这里暂且不涉及

背景渐变

在线性渐变过程中，颜色沿着一条直线过渡：从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或着沿任何任意轴。如果你曾使用过制作图件，比如说Photoshop，你对线性渐变并不会陌生。

兼容性问题很严重，我们这里之讲解线性渐变

语法格式：

background:-webkit-linear-gradient(渐变的起始位置， 起始颜色， 结束颜色)；

background:-webkit-linear-gradient(渐变的起始位置， 颜色 位置， 颜色位置....)；

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>背景渐变</title>
	<style>
	div {
		width: 300px;
		height: 50px;
		/* 渐变的起始位置， 起始颜色， 结束颜色 */
		background: -webkit-linear-gradient(top,red,green);
		background: -moz-linear-gradient(top,red,green);
		/* 背景兼容性问题很严重 必须在前面添加浏览器的私有前缀 */
		margin: 200px auto;
	}
	section {
		width: 400px;
		height: 100px;
		margin: 0 auto;
		/* background:-webkit-linear-gradient(渐变的起始位置， 颜色 位置， 颜色位置....)； */
		background: -webkit-linear-gradient(top,red 0%,green 20%,blue 80%,purple 90%);
		background: -moz-linear-gradient(top,red 0%,green 20%,blue 50%,pink 90%);
	}
	</style>
</head>
<body>
<div></div>
<section></section>
</body>
</html>