Utilisation et style du lecteur HTML5 [Guide]

Si vous connaissez la barre de progression HTML, qui indique le nombre d'activités réalisées, vous constaterez que l'élément meter est similaire à celui-ci. afficher une valeur actuelle sur une valeur maximale. Mais contrairement à la barre de progression, la barre de mesure ne doit pas être utilisée pour afficher les progrès..

Il est utilisé pour montrer un valeur statique dans une plage spécifique, Par exemple, vous pouvez indiquer l'espace de stockage utilisé dans un stockage sur disque en indiquant quelle quantité d'espace de stockage est occupée et quelle quantité ne l'est pas..

En plus de cela, l'élément de compteur peut également être utilisé pour visualiser jusqu'à trois régions dans sa gamme. En reprenant l'exemple de l'espace de stockage, au lieu d'indiquer uniquement l'espace occupé, vous pouvez également indiquer visuellement si l'espace occupé est peu rempli (moins de 30%, par exemple) ou presque à moitié plein (entre 30 et 60%) ou plus. à moitié plein (plus de 60%) en utilisant des couleurs différentes. Cela aide les utilisateurs à savoir quand ils atteignent la limite de stockage..

Dans ce post, nous allons vous montrer comment coiffer la barre de compteur pour les deux buts mentionnés, à savoir un jauge simple (sans régions indiquées) et deux exemples de jauges avec 3 régions indiquées en couleur. Pour ce dernier, nous travaillerons sur créer une jauge de "marques" pour montrer des notes médiocres, moyennes et bonnes, et une jauge de "pH" pour montrer les valeurs de pH acide, neural et alcalin.

Les attributs

Avant de commencer par les exemples et d’approfondir, jetons un coup d’œil à la liste d’attributs ci-dessous, pour en savoir plus sur ces attributs comme leurs valeurs par défaut, etc..

valeur - La valeur de la mètre élément
min - La valeur minimale de la plage du mètre
max - La valeur maximale de la plage du mètre
faible - Indique la limite inférieure
haute - Indique la valeur limite haute
optimum - Le point optimum dans la gamme

1. Styliser une jauge simple

Voici un exemple très simple utilisant un seul attribut, le valeur. Avant de commencer, nous devons d’abord savoir trois choses:

(1) Il y a un défaut min et max valeur définissant la gamme de mètre, qui est 0 et 1 respectivement. (2) Si l'utilisateur a spécifié valeur ne relève pas de la mètre plage, il prendra la valeur de soit min ou max, selon ce qui est le plus proche de. (3) La balise de fin est obligatoire.

Voici la syntaxe:

0.5

Alternativement, nous pouvons aussi ajouter min et max attributs fournissant ainsi une plage définie par l'utilisateur comme suit:

2. Styling The Gauge "Marques"

Premièrement, nous devons diviser la plage en trois régions (gauche / bas, milieu, droite / haut). C'est été faible et haute les attributs entrent en jeu. Voici comment les trois régions sont divisées.

Les trois régions sont formées entre min Et faible , faible Et haute et haute Et max.

Maintenant, il est évident qu'il existe certaines conditions faible et haute les valeurs doivent suivre pour les trois régions à former:

faible ne peut pas être inférieur à min et plus grand que haute Et max
haute ne peut pas être plus grand que max et moins de faible Et min.
Et quand un critère est cassé à la fois faible et haute prendra la valeur de l’autre variable du critère non satisfaite, c’est-à-dire si faible la valeur est inférieure à min ce qu'il ne devrait pas être, faible obtiendra le min valeur.

Dans cet exemple, nous allons considérer nos trois régions de gauche à droite:

Pauvre: (0-33)
Moyenne: (34-60)
Bien: (61-100)

Par conséquent, les éléments suivants sont des valeurs pour les attributs; min = "0" bas = "34" haut = "60" max = "100".

Voici une image visualisant les régions.

Même s'il y a trois régions dans le compteur que nous avons créé tout à l'heure, il n'indiquera que deux "types" de régions dans deux couleurs seulement pour le moment. Pourquoi? Parce que optimum est dans la mi-région.

Point optimum

Quelle que soit la région (sur les trois), le optimum le point tombe, il est considéré comme une "région optimale" de couleur verte par défaut. La ou les régions immédiatement adjacentes à celle-ci sont appelées "régions sous-optimales" et sont colorées en orange. La plus éloignée est une "région non optimale", colorée en rouge.

Jusqu’à présent, dans notre exemple, nous n’avons pas attribué de valeur à optimum. Par conséquent, la valeur par défaut devient 50, faisant de la région médiane la "région optimale" et de celles situées juste à côté (à gauche et à droite) en tant que "régions sous-optimales"..

En bref, dans le cas ci-dessus, toute valeur de la mètre l'élément qui tombe dans la région médiane est indiqué en vert; le reste orange.

Ce n'est pas ce que nous voulons. Nous voulons qu'il soit coloré de cette façon: Pauvre (rouge), Moyenne (Orange), Bien (vert)

Puisque la région de droite doit être considérée comme notre région optimale, nous donnerons optimum une valeur qui tombera dans la région de droite (toute valeur comprise entre 61 et 100, y compris 61 et 100).

Nous prenons 90 pour cet exemple. Cela rendra la région de droite «optimale», le milieu (sa prochaine région immédiate) «sous-optimale» et, à l'extrême gauche, la région «peu optimisée»..

C'est ce que nous allons avoir sur notre jauge.

2. Styling La jauge "pH"

Tout d'abord, une pause sur les valeurs de pH. Une solution acide a un pH inférieur à 7, une solution alcaline a un pH supérieur à 7 et si vous atterrissez sur 7, vous obtenez une solution neutre..

Ainsi, nous allons utiliser les valeurs et attributs suivants:

bas = "7" , haut = "7", max = "14", et le min prendra la valeur par défaut de zéro.

Avant d'ajouter le reste des attributs pour compléter le code, décidons des couleurs: Acide (rouge), Neutre (blanc) et Alcalin (bleu). Considérons également la région acide (région gauche inférieure à 7) comme "optimale"

Voici les pseudo-éléments CSS que nous allons cibler pour obtenir le visuel souhaité firefox. (Pour les pseudo-éléments du compteur de kit Web et plus, reportez-vous aux liens répertoriés sous "référence".)

 .ph_meter background: lightgrey; largeur: 300px;  .ph_meter: -moz-metre-optimum :: - moz-metre-bar background: indianred;  .ph_meter: -moz-metre-sous-optimum :: - moz-metre-bar background: antiquewhite;  .ph_meter: -moz-metre-sous-sous-optimum :: - moz-metre-bar background: steelblue;

Voici le code html complet et le résultat final de la jauge de pH.

Références

HTML5 Meter W3C spec
Liste des pseudo-éléments et des classes du webkit
Liste des pseudo-éléments spécifiques au fournisseur

En savoir plus sur Hongkiat: Création et style d'une barre de progression avec HTML5