Detailed explanation of the progress element of the progress bar in HTML5 and sample code for compatibility processing

HTML5You can use the progress tag to add progress bar directly to the page. This is quite exciting, but the default display effect will be different under each browser. Here we will do it Take a look at the progress bar progress element in HTML5Introductionand compatibility handling

1. Basic understanding of progress element
1. Basic UI
progress element Belongs to the HTML5 family and refers to the progress bar. Supported by IE10+ and other reliable browsers. The following is a simple code:

<progress>o(︶︿︶)o</progress>

is a very impressive progress bar. Some people are wondering: "Oh~ why do I see a character emoticon?" Well... I can only say to you: "I despise you, you are so reluctant to use a more reliable browser?!"
This default The effect is different under different browsers, as shown in the screenshots below (under window 7):

The slow-motion convergence effect of IE10 particles is quite eye-catching. of.

2. Basic attributes
max, value, position, and labels.
(1) max refers to the maximum value . If it is defaulted, the progress value range is from 0.0~1.0. If set to max=100, the progress value range is from 0~100.
(2) value is the value. If max=100, value=50, the progress is just right. half. The presence or absence of the value attribute determines whether the progress progress bar is deterministic. What's the meaning? For example, 6ecb87e5318a36c03c59e25d55f43372a211cb70e7878dbce34a6f8dc0175647 has no value and is uncertain, so under the IE10 browser it looks like an infinite loop of dot animation; however, once there is a value attribute (even if it has no value), such as 3310d69e69d079de46565e2192f08324a211cb70e7878dbce34a6f8dc0175647, is also considered to be confirmed, and the virtual point animation enters the fairy mode——>The bars change, as shown in the screenshot below:

(3) position It is a read-only attribute. As the name implies, the current progress position 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 what is obtained is the label elements pointing to the progress element. For example, document.querySelector("progress").labels returns an HTMLCollection, and the following is a screenshot of one of my tests (taken from the Opera browser, currently FireFox18.0.2 and IE10 do not seem to support it).

2. Progress element compatibility processing example
html code

<progress max="100" value="20"><ie style="width:20%;"></ie></progress>

css compatibility code

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 perfectly solves the problem of each browser device differences.

The above is the detailed content of Detailed explanation of the progress element of the progress bar in HTML5 and sample code for compatibility processing. For more information, please follow other related articles on the PHP Chinese website!