Barre/Echelle graduée

Salut à vous,

Je souhaite mettre en place une barre/échelle graduée sur mon site Internet. Exactement comme dans l'exemple pour IE10 sur cette image

Dans mon cas, 8 graduations possédant deux choix de couleur : par exemple BLEU si OK et GRIS CLAIR si pas OK.

Mettriez-vous 8 <div> en inline-block avec un espace insécable dans chaque div et un background-color pour la couleur? Ou des <li>? ou autre chose? J'exclus les images et les tableaux. Sinon, j'avais pensé à utiliser <meter> mais le support est trop faible pour du code en production (car il me faut le design de la barre/échelle graduée quoi qu'il arrive).

Toute aide/idée est la bienvenue !

edit: ajout des <li> et exclusion des images/tableaux
Modifié par Alphonse (03 Sep 2014 - 16:28)

bonsoir,
avec des fond multiple, des class (ou via js) et un background-position pour chaque valeur, un simple div vide pourrait te dessiner une barre. http://codepen.io/gc-nomade/pen/Jwrqg .

Mais s'agit-il d'une barre interactive ou seulement une indication graphique ?

<edit data="HS"/>
Felicitation pour ton 500eme post
Modifié par gc-nomade (03 Sep 2014 - 17:15)

Merci pour ta réponse. Je suis impressionné par ton code.

Il s'agit uniquement d'une indication graphique où chaque "zone" définit une tranche.
Par exemple 5 tranches : de "0-500", ensuite "500-1000", puis "1000-2000", "2000-5000", et finalement ">5000".

Donc il est tout à fait possible d'avoir uniquement les zones 3 et 4 qui devraient être mise en évidence.

edit: correction d'une faute de frappe
Modifié par Alphonse (04 Sep 2014 - 09:56)

Je me suis fait ceci mais mes libellés verticaux ne sont pas alignés et de longueur variable comme je le souhaitais : http://jsfiddle.net/csrhv56x/1/
Donc je vais devoir tenté une autre approche moins propre/belle à l'aide de <div> sauf si vous savez m'aider !

Bonjour,

pour faire tourner un texte dans son conteneur et lui octroyer la hauteur de ... sa largeur, il te faut :
1) mettre ce texte dans une boite en ligne à laquelle tu applique la rotation.
2) tu insère devant ou derrière une autre boite en ligne vide avec un padding vertical égal a 100% (qui prend la largeur comme référence).

exemple de base avec le flex qui facilite grandement la chose http://codepen.io/gc-nomade/pen/biFHD
<edit /> l'exemple utilise le pseudo :before .
Modifié par gc-nomade (04 Sep 2014 - 15:39)

Merci beaucoup !

Mais comment faire pour que le texte vertical soit aligné "en haut" de la cellule (ou "à droite" quand on penche la tête)? Et le libellé de la dernière colonne devrait contenir "Plus de 5000".

Ce sont les deux problèmes que je ne parviens pas à résoudre même en partant de ton code.

et en passant la valeur de flex a auto ? http://codepen.io/gc-nomade/pen/FqLuv

Au lieu de faire un truc dégueu ou difficilement maintenable à l'aide de <div>, pourquoi ne pas dessiner ta barre avec <canvas> ?

Du point de vue de l'accessibilité, si tu indiques la graduation textuellement ou dans un attribut alt/aria-label/etc. du genre "123 sur 456" ou "34%" si on n'a pas besoin de connaître les valeurs exactes, ça ne posera aucun problème. Et tu aurais toute la liberté du monde pour dessiner ta barre et des graduations sans bricoler.

Pour moi, ça me paraît une utilisation possible et justifiable de <canvas>, en attendant que <meter> soit mieux supporté.

Regarde aussi ce que peut faire <progress>, peut-être que ça te suffit.
Modifié par QuentinC (05 Sep 2014 - 11:19)

En effet QuentinC. Canvas aurait été une bonne idée, je n'y avais pas pensé (alors que je l'ai utilisé hier).
Mais finalement, j'ai une solution pas si dégueulasse que ça. Et je n'ai pas le temps de repartir à 0 pour cette partie de mon projet.

Voici, finalement, la solution apportée : http://jsfiddle.net/ywo34wm3/ les <li> ont la même largeur mais je vais les décaler vers la gauche afin de feinter l'alignement avec mon premier <ul> qui contient mon échelle dessinée (non visible sur le lien ci-dessus).

IL manque une touche d'ARIA pour que ça soit accessible, mais sinon c'est pas si mal avec des éléments de liste finalement. Je m'attendais à bien pire que ça.

Pour rendre une barre de progression accessible, voir le rôle progressbar, et les attributs valuemin, valuemax, valuenew et valuetext.

C'est important car dans le cas présent, il n'y a aucun moyen avec un lecteur d'écran de connaître la valeur de la barre.

j'ajouterais, que pour une deco , elle peut-être insérer dans le fond de ul et être vue/dégagée via un padding-top: http://codepen.io/gc-nomade/pen/iAJxn

@Quentin, Pour l'alternative (visuelle) à un progress et les attributs explicites que proposerait tu en fait ? J'avoue , ne pas savoir si le besoin ici serait un meter ou un progress dans le sens ou Alphonse opte pour une 'déco' qui illustrerait une liste .....

Il ne s'agit nullement d'une barre de progression (ou d'une mesure avec <meter>) mais d'une répartition par tranche. Certains de mes enregistrements remplissent par exemple les critères de la manière suivante : 50-100, 100-200 et 2500-5000. A ce moment là, ma première barre visuelle (indiquant la graduation) doit être mise en évidence pour ces 3 tranches là uniquement.