Shulou(Shulou.com)06/03 Report--

HTML5 progress bar progress elements and compatibility processing example analysis, I believe that many inexperienced people do not know what to do, so this article summarizes the causes of the problem and solutions, through this article I hope you can solve this problem.

1. Basic understanding of progress elements

1. Basic UI

The progress element belongs to the HTML5 family, which refers to the progress bar. IE10+ and other reliable browsers support it. The simple code is as follows:

XML/HTML Code copies content to the clipboard

O (thanks to others) o

It's a very interesting progress bar. Some people wondered: "Oh, why do I see a character expression?" Um... I can only say to you: "despise you, are you reluctant to use a reliable browser?"

The default effect varies with different browsers, as shown below (under window 7):

The slow aggregation and dispersion effect of IE10 particles is quite bright.

two。 Basic attribute

Max, value, position, and labels.

(1) max refers to the maximum. By default, progress ranges from 0. 0 to 1. 0. If set to max=100, progress ranges from 0 to 100.

(2) value is worth, if max=100, value=50 is exactly half the progress. The existence of the value attribute determines whether the progress progress bar is deterministic or not. What does it mean? For example, without value, it is uncertain, so the appearance of it in IE10 browser is an infinite loop of virtual point animation; however, once you have the value attribute (even if it has no value), for example, it is also considered to be certain, and the virtual point animation enters fairy mode-> changes the bar, as shown below:

(3) position is a read-only attribute. As the name implies, the position of the current progress is the value of value / max. If the progress bar is uncertain, the value is-1.

(4) labels is also a read-only attribute, and you get the label elements that point to the progress element. For example, document.querySelector ("progress") .labels returns HTMLCollection, and here is a screenshot of one of my tests (taken from the Opera browser, FireFox18.0.2 and IE10 do not seem to support it at present).

Second, progress element compatibility processing example

Html code

XML/HTML Code copies content to the clipboard

Css compatible code

CSS Code copies content to the clipboard

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;}

Basically solved the differences between browsers perfectly.

After reading the above, have you mastered the progress element of the progress bar in HTML5 and the method of sample analysis of compatibility processing? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.