Detailed explanation of graphic code for customizing HTML5 Progress style

The

Progress element is one of the new elements in the HTML5 standard draft. W3C Please click here for the definition of this element. By default, Progress will generate a progress bar with the same style as the system default style. The default style definition for Progress in Webkit can be found here. The display effect in Windows 7 and MaxOS Lion is as follows:

It looks pretty good, but what if it runs under Windows XP? ? Thinking about it is enough to give you a headache, not to mention that for the sake of consistency, in many cases we still want to be able to control the style of this progress bar.

Checked the definition of Element Progress in the Webkit project. Progress will be parsed into the following structure when rendering:

<progress>
    ┗ <p> ::-webkit-progress-bar
         ┗ <p>::-webkit-progress-value

Through ::-webkit-progress-bar and ::-webkit- progress-value two pseudo-element selectors (the name of the pseudo-element before was::-webkit-progress-bar-value. A Patch in the first half of this year changed it to what it is now. Here you can see a related Issue in Chromium ), you can define the styles of the two p's on the first and second layers.

Example:

progress {
    border-radius: 2px;
    border-left: 1px #ccc solid;
    border-right: 1px #ccc solid;
    border-top: 1px #aaa solid;
    background-color: #eee;
}
 
progress::-webkit-progress-bar {
    background-color: #d7d7d7;
}
 
progress::-webkit-progress-value {
    background-color: #aadd6a;
}

The above CSS can define a Progress Bar with the following effects:

Also supports CSS Animation, backgroundpicture and other features, so that you can create a completely personalized Progress Bar according to your own needs. In addition, the Gecko core browser can also achieve the same effect through a similar pseudo-element::-moz-progress-bar. This element is not supported across all IE systems (that's a given).

The above is the detailed content of Detailed explanation of graphic code for customizing HTML5 Progress style. For more information, please follow other related articles on the PHP Chinese website!