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>

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

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.

code HTML

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

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!