sur une ligne d'une réponse, nous avons :
<meter max="100" min="0" style="width:13,9%;" value="13.9">307</meter>
ne devrions nous pas avoir :
<meter max="100" min="0" style="width: 100%;" value="13.9">307</meter>
car la sinon la barre de fond s'affiche toute petite ... et on a donc un affichage qui représente 13,9% de 13,9% donc c'est tout petit et illisible.
# lapin compris
Posté par Bruno Michel (site web personnel) . Évalué à 2 (+0/-0).
Je n'ai pas compris l'explication. Pourquoi aurions-nous une taille qui ferait 13,9% de 13,9% ?
[^] # Re: lapin compris
Posté par B r u n o (site web personnel) . Évalué à 1 (+0/-0).
En fait certains navigateurs gèrent eux même le rendu des <meter>. Par exemple FF3.6 ne s'en charge pas. Chrome s'en charge et il affiche une barre qui représente le 100% et dans la barre une partie est colorée pour représenter ce qu'il y a dans "value".
Une page avec des exemples : http://peter.sh/examples/?/html/meter-progress.html A tester avec différents navigateurs.
Donc pour un navigateur qui gère le <meter> la barre colorée censée représenter la valeur fait en effet "13,9% de 13,9%" dans l'exemple de Christophe. Pour interpréter le sondage il faut donc se baser sur la largeur du <meter>. Laisser la valeur à 0 ou 100 pourrait permettre d'éviter la confusion, non ?
[^] # Re: lapin compris
Posté par Christophe Turbout . Évalué à 1 (+0/-0).
voila ... et c'est pareil sur chrome 10 et sur firefox 3.6 pour le rendu ... en gros la barre est toute rikiki alors qu'elle devrait faire la largeur ...
[^] # Re: lapin compris
Posté par Bruno Michel (site web personnel) . Évalué à 2 (+0/-0).
Merci pour l'explication.
Quand j'avais mis ça en place, aucun navigateur ne faisait de rendu particulier pour <meter>, et je pensais que c'était toujours le cas. Je vais donc regarder comment corriger ça.
[^] # Re: lapin compris
Posté par Christophe Turbout . Évalué à 0 (+0/-0).
sur chrome 10 et firefox 3.5 ou 3.6 (linux et windows) si tu mets width=100% ça fonctionne ...
[^] # Re: lapin compris
Posté par Bruno Michel (site web personnel) . Évalué à 3 (+0/-0).
Bah non, sous firefox 3.5 / 3.6 / 4.0, si je mets width=100%, toutes les barres ont la même taille.
[^] # Re: lapin compris
Posté par Christophe Turbout . Évalué à 1 (+0/-0).
oui la barre générale qui représente 100% a la même taille et c'est plutôt normal ...
mais les barres vertes à l'intérieur qui représentent le % de vote pour cet item
sont elles à la bonne taille du coup ...
et je viens de me rendre compte que je ne t'ai pas expliqué le contexte où je voyais ça !
c'est quand le sondage est sur la partie gauche de l'interface, en dessous du logo et de
l'espace utilisateur ... j'ai une capture écran d'ailleurs si tu veux.
ah ben tient d'ailleurs, je viens de me rendre compte aussi que ça a changé, il n'y a plus
la barre verte qui représentait le nombre de vote mais directement le nombre de votes
d'écrit ... du coup effectivement la taille de barre représentant le % convient bien ...
[^] # Re: lapin compris
Posté par Bruno Michel (site web personnel) . Évalué à 2 (+0/-0).
Avec width=100%, les barres vertes à l'intérieur font effectivement la bonne taille, mais juste sous Chrome. Firefox 3.5 / 3.6 / 4.0 ne gère pas la balise <meter> et du coup, n'affiche que la barre grise avec toujours la même taille.
# Corrigé
Posté par Bruno Michel (site web personnel) . Évalué à 2 (+0/-0).
J'ai viré les attributs min et max, ce qui permet d'afficher ça à peu près correctement partout.
Cf https://github.com/nono/linuxfr.org/commit/20e47fd634437b5d4d91004a122e3f3593c0ca01
Envoyer un commentaire
Suivre le flux des commentaires
Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.