Detailed introduction and compatibility processing of the progress element in HTML5

This article mainly introduces to you the basic attributes and compatibility processing of the progress element. After introducing the progress element, the following case will also help everyone understand it better. Let’s take a look at it. ,

1. Basic understanding of progress element

1. Basic UI

The progress element belongs to the HTML5 family and refers to progress bar. Supported by IE10+ and other reliable browsers. The following is a simple code:

XML/HTML Code copies the content to the clipboard

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

It 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 effect has different effects under different browsers, as shown in the screenshots below (under window 7):

Compatibility

The slow-moving convergence effect of IE10 particles is quite good. It's eye-catching.

2. Basic attributes

max, value, position, and labels.

(1) max refers to the maximum value. If 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 exactly 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 certain, and the virtual point animation enters fairy mode——>changes the bar

(3) position is a read-only attribute, as the name implies, the current progress The 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. 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).

Progress element compatibility processing example

html code

XML/HTML Code copy content to the clipboard

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

css compatible code

CSS CodeCopy content to the clipboard

1.progress {
2. display: inline-block;
3. width: 160px;
4. height: 20px;
5. border: 1px solid #0064B4;
6. background-color:#e6e6e6;
7. color: #0064B4; /*IE10*/
8.}
9./*ie6-ie9*/
10.progress ie {
11. display:block;
12. height: 100%;
13. background: #0064B4;
14.}
15.progress::-moz-progress-bar { background: #0064B4; }
16.progress::-webkit-progress-bar { background: #e6e6e6; }
17.progress::-webkit-progress-value { background: #0064B4; }

I believe you have mastered the method after reading these cases. For more exciting content, please pay attention to other related articles on the php Chinese website!

Related reading:

Implementation steps of using Js to operate HTTP Cookies

Detailed introduction to Js operating BOM object model

What is the common syntax of AJAX

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