HTML5 progress元素的样式控制、兼容与实例
一、progress元素基本了解
基本UI
progress
元素属于HTML5家族,指进度条。IE10+以及其他靠谱浏览器都支持。如下简单code:
<progress>o(︶︿︶)o</progress>
效果:
是个很带感的进度条吧。有人奇怪:“唉~怎么我看到的是个字符表情捏?” 恩…我只能对你说:“鄙视你,丫的都舍不得用靠谱点的浏览器吗?!”
这个默认的效果,不同浏览器下的效果不尽相同,如下截图们(window 7下):
IE10颗粒的缓动聚散效果,还是挺让人眼前一亮的。
基本属性
max
, value
, position
, 以及labels
.
max
指最大值。若缺省,进度值范围从0.0~1.0
,如果设置成max=100
, 则进度值范围从0~100
.value
就是值了,若max=100
,value=50
则进度正好一半。value
属性的存在与否决定了progress
进度条是否具有确定性。什么意思?比方说<progress></progress>
没有value
,是不确定的,因此IE10浏览器下其长相是个无限循环的虚点动画;但是,一旦有了value
属性(即使无值),如<progress value></progress>
, 也被认为是确定的,虚点动画进入仙人模式——>变条条了,如下截图:
position
是只读属性,顾名思意,当前进度的位置,就是value / max
的值。如果进度条不确定,则值为-1
.labels
也是只读属性,得到的是指向该progress
元素的label
元素们。例如document.querySelector("progress").labels
,返回的就是HTMLCollection
, 下为我的某测试截图(截自Opera浏览器下,目前FireFox18.0.2以及IE10貌似都不支持):
二、progress元素的样式控制
首先,很有意思的一点,无论哪个现代浏览器,只要设置了border
或background-color
样式,进度条元素就会变成扁平化风格。
样式控制的巨大差异
从标题可以看出这段是最碉堡的地方。大众脸自然没什么说头,正因progress
元素样式的CSS控制差异之大,才成为了谈资。
脑中梳理了下,想要三言两语表述清楚好抓狂的来~ 求助外援,当当当当——表格君。
一般而言,一个进度条元素分为两部分,背景条以及已完成的进度条。
浏览器 | FireFox 18 | Chrome 23 | Opera 12 | IE 10 | |||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
元素区域 |
边框
|
背景
|
已完成背景
|
边框
|
外背景
|
内背景
|
已完成背景
|
边框
|
背景
|
已完成背景
|
边框
|
背景
|
已完成背景
|
{border:*;} |
|
|
|
|
|||||||||
{background:*;} |
|
|
|
|
|||||||||
{color:*;} |
不支持
|
不支持
|
不支持
|
|
|||||||||
::-prefix-progress-value{background:*;} |
|
|
|
|
|||||||||
::-prefix-progress-bar{background:*;} |
|
|
|
|
结论:
- 使用
progress{border:*; background:*;}
可以控制所有浏览器下progress元素的边框和背景色。其中,Chrome浏览器是个特例,直接的设置看不到效果(实际上支持),原因下面会解释。 - FireFox浏览器
已经完成的进度条,使用progress::-moz-progress-bar { }
表示,这与Chrome浏览器是相反的。 - Chrome浏览器
Chrome的表现与FireFox有着明显的差异,其progress
元素的结构似乎是这样的:progress┓progress-valueprogress-bar
其中,
progress-bar
指全部的进度,progress-value
指已经完成的进度。因此,Chrome浏览器下,已经完成的进度条,使用progress::-webkit-progress-value { }
表示, FireFox浏览器下是*-bar
. 而progress-bar
默认含有背景色,因此,我们需要如下设置,以自定义背景色:
progress::-webkit-progress-bar { background: *; }
这也很好地解释了上面的一个疑问?progress{background:*;}
为什么不能让progress
元素背景色改变呢?不是不能改变,而是被progress-bar
这个内部元素给覆盖了,当我们设置:progress::-webkit-progress-bar { background: transparent; }
的时候,progress{background:*;}
设置的背景色就会显露出来。 - Opera浏览器
Opera似乎没有什么::-o-progress-*{}
的用法,因此,Opera浏览器,其已完成进度的背景色是无解的,只能使用默认的颜色——我的浏览器是和谐绿色。
- IE10浏览器
IE10浏览器很奇葩的,它也可以设置已完成进度的背景色,使用的是color
属性,progress{color:*;}
.
因此,综上全部,我们可以使用类似下面的CSS实现最大兼容的自定义进度条样式:
progress {width: 160px;border: 1px solid #0064B4; background-color:#e6e6e6;color: #0064B4; /*IE10*/ }progress::-moz-progress-bar { background: #0064B4; } progress::-webkit-progress-bar { background: #e6e6e6; } progress::-webkit-progress-value { background: #0064B4; }
您可以狠狠地点击这里:progress元素样式自定义最大兼容demo
三、实例效果展示
进度条可以用在页面loading中(如gmail),或者文件上传进度,或者视频播放进度等。
为演示上面的自定义样式,现在整合我之前折腾的HTML5文件上传,做了个demo。
您可以狠狠地点击这里:文件上传进度与progress元素的样式控制demo
选择一个图片(可以大一点的),然后点击按钮上传(最好可以限速),就可以清楚看到进度变化,如下截图:
关键部分的代码:
onProgress: function(file, loaded, total) {var percent = Math.round(loaded / total * 100);$("progress").val(percent); }
直接value赋值就有了进度动画效果。传统实现需要div
嵌套,以及width
控制等。优劣伯仲,一目了然。
四、淡淡的结束语
吃了个晚饭,不记得原本想要讲的结束语了。想想~~恩……IE6~IE9浏览器不支持progress
元素,我们可以通过嵌套其他元素的方法进行兼容,例如:
<progress><div>这里写兼容IE的东东</div></progress>
支持progress
的浏览器会忽略innerHTML
,因此,内部的div
可以放心大胆进行样式处理,兼容低版本IE浏览器。
好的兼容做法
对于IE6~IE9浏览器,模拟进度条效果,如果不使用背景图片的话,一般而言,至少需要2层标签。我们需要再额外的徒增2层标签??No, no, no! 外部的progress
标签已经替我们做了一半的工作,因为,progress
所对应的CSS样式,也是IE6~9浏览器需要的(高宽,边框色背景色什么的),因此,我们只需要再额外塞1层标签就可以了,这个标签对应的就是已经完成的进度条的样式。
例如,如下的HTML设置:
<progress max="100" value="20"><ie style="width:20%;"></ie></progress>
我们需要怎样的CSS代码呢?如下,标红的部分与兼容处理所增加的,都是无伤大雅,不需要hack补丁的。
progress {display: inline-block;width: 160px;height: 20px;border: 1px solid #0064B4; background-color:#e6e6e6;color: #0064B4; /*IE10*/ } /*ie6-ie9*/ progress ie {display:block;height: 100%;background: #0064B4; }progress::-moz-progress-bar { background: #0064B4; } progress::-webkit-progress-bar { background: #e6e6e6; } progress::-webkit-progress-value { background: #0064B4; }
当然,progress
以及自定义的ie
元素,ie6~8都是不认识的,我们需要打个动态补丁,如下:
if (typeof window.screenX !== "number") {document.createElement("progress"); document.createElement("ie"); }
于是,progress{}
, ie{}
的样式就能被低版本IE识别,同时,单纯作为普通元素处理(现代浏览器则会把ie
标签直接抹杀)。
耳听为虚眼见为实,您可以狠狠地点击这里:progress元素兼容IE6~IE9 demo
例如,IE6浏览器下,就是下面这个样子:
如现代浏览器们长得一个模样。因此,目前,在实际项目中使用progress
元素是完全可行的,你还不赶快试试!
HTML5 progress元素的样式控制、兼容与实例相关推荐
- html进度条实现原理,HTML5 progress进度条详解
HTML5 progress 元素简介 progress是HTML5的一个新元素,表示定义一个进度条,用途很广泛,可以用在文件上传的进度显示,文件下载的进度显示,也可以作为一种loading的加载状态 ...
- pdf html5 阅读进度,HTML5的进度条progress元素
原标题:HTML5的进度条progress元素 progress元素属于HTML5新元素,指进度条.IE10+以及其他靠谱浏览器都支持. 体验一下效果: 在html里写入 查看浏览器效果:不同浏览器下 ...
- css多个伪元素,使用CSS伪元素控制连续几个元素的样式方法
用CSS伪元素控制元素的时候经常性的需要改变一些元素的样式,网上有许多博客都说了如何去控制一个的改变,但是我在实际写的过程中,发现更多时候是需要控制多个连续元素的改变. 使用伪元素去控制(以:hove ...
- 使用Vue里面的ref 控制DOM元素的样式marginleft,marginLeft的只是变化了,但是视图没有变化,求解答
使用Vue里面的ref 控制DOM元素的样式marginleft,marginLeft的只是变化了,但是视图没有变化,求解答 <template><div><div cl ...
- html5 meter样式,使用HTML5“meter”元素
前面我们介绍了HTML5的元素.HTML5的元素和元素经常会被混淆.但他们是不同的元素,在页面中的使用方式也是不同的. 元素用于表示一个标量测量值或一个百分比值.和元素不一样,元素的最小值和最大值在私 ...
- 【使用 DOM】为DOM元素设置样式
1. 使用样式表 可以通过document.styleSheets属性访问文档中可用的CSS样式表,它会返回一组对象集合,这些对象代表了与文档管理的各个样式表. 每个样式表 都由一个CSSStyleS ...
- 下列不属于html5语义元素,HTML5 新的语义元素
HTML5 提供了新的语义元素来明确一个Web页面的不同部分: HTML5中新的语义元素 HTML5 元素 标签定义文档中的节(section.区段).比如章节.页眉.页脚或文档中的其他部分. 根据W ...
- 深入理解html5:语义,标准与样式pdf,深入理解html5语义标准与样式.doc
深入理解html5语义标准与样式.doc 深入理解HTML5:语义.标准与样式(勇猛精进早登大师殿堂创最优品质交互)[美]布拉德福(Bradford,A.)[美]海涅(Haine,P.)著高京译ISB ...
- html 5新增技术,HTML5新增元素,标签总结
总是遇到h5新标签的笔试题目,就查阅了资料来总结一下: 1.form相关: (1)form属性:在HTML5中表单元素可放在表单之外,通过给该元素添加form属性来指向目标表单(form属性值设为目标 ...
最新文章
- 走近分形与混沌(part7)--三体与混沌
- 大学留级两年不敢和家人说_您说什么:如何与家人保持联系?
- 《C++ Primer 第五版》(第1~6章总结)
- C#正则表达式开源工具
- linux Swap交换分区概念
- Python基础语法案例(Fibonacci):选择结构、循环结构、异常处理结构、代码优化
- 第八章节 文件操作一 (文件夹常用操作)
- easymock_EasyMock注释– JUnit 4
- 调用阿里API创建阿里云主机
- uniapp 自定义unicode 并使用
- 高颜值的第三方网易云播放器YesPlayMusic
- 不同网段怎么ping通
- C++ VARIANT数据类型操作详解
- 深入Android系统(二)Bionic库
- 成功的人生至少需要一张跳板
- OpenHarmony如何拨打电话
- 服务器禁止访问文件,服务器文件夹访问权限设置 控制访问权限方法
- spring mvc处理异常
- 互联网晚报 | 12月20日 星期一 | 安踏100亿成立“和敏基金会”;阿里公布碳中和目标;京东上线数字藏品交易平台...
- Excel VBA编程的常用代码
热门文章
- 【Android 事件分发】事件分发源码分析 ( ViewGroup 事件传递机制 四 | View 事件传递机制 )
- 【Android 进程保活】提升进程优先级 ( 使用前台 Service 提高应用进程优先级 | 效果展示 | 源码资源 )
- 【Android 应用开发】Google 官方 EasyPermissions 权限申请库 ( 权限申请原理对话框操作回调接口 | 永久拒绝权限后引导设用户置权限 )
- 【运筹学】线性规划 人工变量法 ( 人工变量法案例 | 初始单纯形表 | 检验数计算 | 入基变量 | 出基变量 )
- 【计算理论】非确定性有限自动机 ( 计算过程 | 计算树 | 确定可接受字符串 | 设计非确定性有限自动机 | 空字符 )
- 【Android NDK 开发】JNI 引用 ( 弱全局引用 | NewWeakGlobalRef | DeleteWeakGlobalRef )
- 【Java 网络编程】UDP 简介
- MATLAB 线性规划实例应用
- [SQL] 外卖系统数据库设计
- 挑战练习题2.3动态规划 poj3181 Dollar Dayz 完全背包