html5 渐进式播放,渐进式增强

渐进式增强指的是首先有一个基本的设计是可以兼容所有浏览器的，然后再为较新的或更新的浏览器做加强的显示或功能(渐进式)。我们先有一个基本的CSS/HTML 页面，它是兼容所有浏览器的，然后我们就有机会为支持 HTML5的浏览器添加HTML5的特性。

清单2-6  是一个 HTML 的基本例子。

清单2-6：一段简单的HTML 代码用来说明渐进式增强

清单2-7 是以上代码的 CSS 样式表，充分说明了渐进式增强的方式。

清单2-7：在清单2-6 的基础上增加渐进增强的CSS代码

.someClass

{ width: 100px;

height: 100px;

background-color: #2067f5;

background-image: - webkit-gradient(linear, left top, left bottom , from(#2067f5),

to(#154096));

background-image: -webkit-linear-gradient(top, #2067f5, #154096);

background-image: -moz-linear-gradient(top, #2067f5, #154096);

background-image: -ms-linear-gradient(top, #2067f5, #154096);

background-image: -o-linear-gradient(top,  #2067f5, #154096);

background-image: linear-gradient(to bottom,  #2067f5, #154096);

}

这样我们就有了一个100100 像素的盒子，它的背景使用了渐进式增强方式。每一种浏览器都可以理解第一个背景属性：background-color: #2067f5; 。如果访问这个页面的用户正好使用的是先进的浏览器，那么浏览器就可以理解后面几条背景属性，用户不光可以看到一个蓝色背景的盒子，还会看到非常好看的梯度渐变。简单地说，就是所有人都会看到一个蓝色的盒子，而有一些人会看到更漂亮的蓝色的盒子。

有很多工具可以帮助我们去做多浏览器的适配，这个是我们常用的：http:// CSS3please.com。

图2-3 所示的是someClass 样式在Chrome浏览器中的表现。

如你所见，上面会有从浅蓝到深蓝颜色的梯度渐进。