A brief understanding of the progress element in HTML5 and analysis of compatibility issues

This article brings you a brief introduction to the progress element in HTML5 and analysis of compatibility issues. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. Basic understanding of progress element

1. Basic knowledge

The progress element belongs to the HTML5 family and refers to progress bar. Supported by IE10 and other reliable browsers.

Note: Internet Explorer 9 and earlier does not support the 6ecb87e5318a36c03c59e25d55f43372 tag.

6ecb87e5318a36c03c59e25d55f43372 The label indicates the progress (process) of the task

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.

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 The value attribute (even if it has no value), such as f550f8ad96db35da75d5ab50da260a56a211cb70e7878dbce34a6f8dc0175647, is also considered to be certain.

(3) position is a read-only attribute, and the position of the current progress is value /max value. 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.

2. Progress element compatibility processing example

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

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

Related Recommended:

Detailed introduction and compatibility processing of the progress element in HTML5

The above is the detailed content of A brief understanding of the progress element in HTML5 and analysis of compatibility issues. For more information, please follow other related articles on the PHP Chinese website!