Explication détaillée de l'élément de progression de la barre de progression en HTML5 et exemple de code pour le traitement de compatibilité

HTML5Vous pouvez utiliser la balise de progression pour ajouter directement une barre de progression à la page C'est assez excitant, mais l'effet d'affichage par défaut sous chaque navigateur sera différent ici. nous le ferons Jetez un œil à l'élément de progression de la barre de progression en HTML5 Introduction et traitement de compatibilité

1 Compréhension de base de l'élément de progression
1. >
élément de progression Appartient à la famille HTML5 et fait référence à la barre de progression. Pris en charge par IE10 et d'autres navigateurs fiables. Le code simple suivant :

<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 vous méprise, êtes-vous si réticent à utiliser un navigateur plus fiable ?!" est la valeur par défaut. Les effets sont différents selon les navigateurs, comme le montrent les captures d'écran ci-dessous (sous Windows 7) :

L'effet de convergence lente des particules IE10 est assez accrocheur. de.

2. Attributs

de base max, valeur,
position et étiquettes. (1) max fait référence au 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. 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 confirmé, et l'animation du point virtuel entre en mode fée——>La barre change, comme le montre la capture d'écran ci-dessous :


(3) position Il s'agit d'un attribut en lecture seule. Comme son nom l'indique, la position de progression actuelle 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 de l'un de mes tests (prise à partir du navigateur Opera, actuellement FireFox18.0.2 et IE10 ne semblent pas le prendre en charge).

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

code HTML

code de compatibilité CSS

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

fondamentalement parfait Résout les différences entre navigateurs.

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

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!