Introduction détaillée et traitement de compatibilité de l'élément progress en HTML5

Cet article vous présente principalement les attributs de base et le traitement de compatibilité de l'élément de progression. Après avoir introduit l’élément de progression, le cas suivant aidera également tout le monde à mieux le comprendre. ,

1. Compréhension de base de l'élément de progression

1. UI de base

L'élément de progression appartient à la famille HTML5, qui fait référence à barre de progression . Pris en charge par IE10+ et d'autres navigateurs fiables. Ce qui suit est un code simple :

XML/HTML Le code copie le contenu dans le presse-papiers

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

est une barre de progression très impressionnante. Certaines personnes se demandent : "Oh~ pourquoi est-ce que je vois une émoticône de personnage ?" Eh bien... Je ne peux que vous dire : "Je te méprise, es-tu si réticent à utiliser un navigateur plus fiable ?!" 🎜 >Cet effet par défaut a des effets différents selon les navigateurs, comme le montrent les captures d'écran ci-dessous (sous Windows 7) :

Compatibilité

L'effet de convergence facilitée des particules IE10 est assez bon. contagieux.

2. Attributs de base

max, valeur,

position

et étiquettes. (1) max fait référence à la valeur maximale. Si elle est définie par défaut, la plage de valeurs de progression est de 0,0 à 1,0. Si elle est définie sur max=100, la plage de valeurs de progression est de 0 à 100.

(2) la valeur est la valeur si max=100, la valeur. =50 La progression est exactement de moitié. La présence ou l'absence de l'attribut value détermine si la barre de progression est déterministe. Quelle est la signification ? Par exemple, n'a aucune valeur et est incertain, donc sous le navigateur IE10, il ressemble à une boucle infinie d'animation de points, une fois qu'il y a un attribut de valeur (même s'il n'a aucune valeur) ; , tel que < progress value>, est également considéré comme certain. L'animation du point virtuel entre en mode fée——>La barre change de position

(3) en lecture seule. attribut. Comme son nom l'indique, la progression actuelle La position est la valeur de value/max. Si la barre de progression est incertaine, la valeur est -1.

(4) les étiquettes sont également un attribut en lecture seule, et ce qui est obtenu, ce sont les éléments d'étiquette pointant vers l'élément de progression. Par exemple,

document

.querySelector("progress").labels renvoie une HTMLCollection, et ce qui suit est une capture d'écran d'un de mes tests (prise à partir du navigateur Opera, actuellement FireFox18.0.2 et IE10 ne semblent pas pour le soutenir). Exemple de traitement de compatibilité des éléments de progression

Code HTML

Code XML/HTML copier le contenu dans le presse-papiers

Code compatible CSS

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

Le code CSS copie le contenu dans le presse-papiers

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

Je pense que vous maîtrisez la méthode après avoir lu ces cas. Pour un contenu plus passionnant, veuillez prêter attention à. php Site Web chinois Autres articles connexes !

Lecture connexe :

Étapes de mise en œuvre de l'utilisation de Js pour faire fonctionner les cookies HTTP

Introduction détaillée au modèle objet de nomenclature d'exploitation Js

Quelle est la syntaxe commune d'AJAX

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!