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 tag.

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, 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 , 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!