自定义 HTML5 Progress 的样式
Progress 元素是 HTML5 标准草案中新增的元素之一,W3C 关于此元素的定义请猛击这里。默认情况下,Progress 会生成一个和系统默认样式一样的进度条。Webkit 中对于 Progress 的默认样式定义在这里可以找到。在 Windows 7 和 MaxOS Lion 中的显示效果如下:
?
?
看起来貌似还不错,但是如果运行在 Windows XP 下呢?想一下就够头疼了,何况出于一致性的考虑,很多情况下我们还是想能够控制这个进度条的样式。
查看了 Webkit 项目中关于 Element Progress 的定义,Progress 在渲染时会被解析成以下结构:
?
?
同时支持 CSS 动画、背景图片等特性哦,这样就可以根据自己的需要打造一个完全个性化的 Progress Bar 了。另外 Gecko 核心的浏览器也可以通过一个类似的伪元素 ::-moz-progress-bar 来实现同样的效果。IE 全系不支持此元素(这简直是一定的)。
?
?
?
?
?
?
?
?
?