Explication détaillée du code graphique pour personnaliser le style HTML5 Progress

L'élément

Progress est l'un des éléments nouvellement ajoutés dans le projet de norme HTML5 W3C Veuillez cliquer ici pour la définition de cet élément. Par défaut, Progress générera une barre de progression identique au style par défaut du système. La définition de style par défaut pour Progress dans Webkit peut être trouvée ici. L'effet d'affichage dans Windows 7 et MaxOS Lion est le suivant :

Cela a l'air plutôt bien, mais que se passe-t-il s'il fonctionne sous Windows XP ? Y penser a de quoi vous donner mal à la tête, sans compter que par souci de cohérence, dans bien des cas on souhaite quand même pouvoir contrôler le style de cette barre de progression.

Affiché la définition de Element Progress dans le projet Webkit. La progression sera analysée dans la structure suivante lors du rendu :

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

Via ::-webkit-progress-bar et ::- webkit-progress-value deux sélecteurs de pseudo-éléments (le nom du pseudo-élément auparavant était ::-webkit-progress-bar-value, un correctif au premier semestre de cette année l'a changé pour ce qu'il est maintenant. Ici, vous (vous pouvez en voir un similaire dans Chromium Issue), vous pouvez définir les styles des deux p sur les premier et deuxième calques.

Exemple :

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

Le CSS ci-dessus peut définir une barre de progression avec l'effet suivant :

Prend également en charge le CSS animation , arrière-plan image et d'autres fonctionnalités, afin que vous puissiez créer une barre de progression entièrement personnalisée en fonction de vos propres besoins. De plus, le navigateur principal de Gecko peut également obtenir le même effet grâce à un pseudo-élément similaire ::-moz-progress-bar. Cet élément n'est pas pris en charge sur tous les systèmes IE (c'est une évidence).

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!