HTML5 progress元素的样式控制、兼容与实例
一、progress元素基本了解
基本UI
progress元素屬于HTML5家族，指進度條。IE10+以及其他靠譜瀏覽器都支持。如下簡單code:
效果：?
是個很帶感的進度條吧。有人奇怪：“唉~怎么我看到的是個字符表情捏？” 恩…我只能對你說：“鄙視你，丫的都舍不得用靠譜點的瀏覽器嗎？！”
這個默認的效果，不同瀏覽器下的效果不盡相同，如下截圖們（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控制差異之大，才成為了談資。
腦中梳理了下，想要三言兩語表述清楚好抓狂的來~ 求助外援，當當當當——表格君。
一般而言，一個進度條元素分為兩部分，背景條以及已完成的進度條。
| 邊框 | 背景 | 已完成背景 | 邊框 | 外背景 | 內背景 | 已完成背景 | 邊框 | 背景 | 已完成背景 | 邊框 | 背景 | 已完成背景 |
| ? | ? | ? | ? | ? | ? | ? | ? | ? | ||||
| ? | ? | ? | ? | ? | ? | ? | ? | ? | ||||
| ? | ? | 不支持 | ? | ? | ? | 不支持 | ? | ? | 不支持 | ? | ? | |
| ? | ? | ? | ? | ? | ? | ? | ? | ? | ||||
| ? | ? | ? | ? | ? | ? | ? | ? | ? |
結論：
已經完成的進度條，使用progress::-moz-progress-bar { }表示，這與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似乎沒有什么::-o-progress-*{}的用法，因此，Opera瀏覽器，其已完成進度的背景色是無解的，只能使用默認的顏色——我的瀏覽器是和諧綠色。
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元素是完全可行的，你還不趕快試試！
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的HTML5 progress元素的样式控制、兼容与实例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HTML5基础-Mark标签高亮显示文本
- 下一篇： HTML5 progress和meter