Une brève compréhension de l'élément de progression dans HTML5 et une analyse des problèmes de compatibilité

Cet article vous apporte une brève introduction à l'élément de progression en HTML5 et à l'analyse des problèmes de compatibilité. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

1. Compréhension de base de l'élément de progrès

1. Connaissances de base

L'élément de progrès appartient à l'élément de progrès. Famille HTML5 et fait référence à la barre de progression. Pris en charge par IE10+ et d'autres navigateurs fiables.

Remarque : Internet Explorer 9 et versions antérieures ne prennent pas en charge la balise

L'étiquette indique la progression de la tâche (processus)

2. >max , valeur, position et étiquettes.

(1) max fait référence à la valeur maximale. S'il est défini 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. 50, les progrès sont juste à moitié. La présence ou l'absence de l'attribut value détermine si la barre de progression est déterministe.

Par exemple, n'a aucune valeur et est incertain, donc sous le navigateur IE10, cela ressemble à une boucle infinie d'animation de points

Cependant, une fois là-bas ; est L'attribut value (même s'il n'a pas de valeur), tel que , est également considéré comme certain,

(3) la position est un attribut en lecture seule, et le la position de la progression actuelle est la valeur / valeur maximale. 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.

2. Exemple de traitement de compatibilité des éléments de progression

code de compatibilité CSS

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

Recommandations associées :

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

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

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!