Progress bar

Bonjour,

J'aimerais faire un élément graphique de type barre de progression. Niveau sémantique, comment dois-je lier ma légende et ma valeur? Par exemple, dois-je utiliser une liste?

Pour l'instant mes valeurs sont dans des balises <p>

 <div id="barreHorizontale">
            
                <p class="legende">Légende 1</p>
                <p class="valeur">100%</p>
       
                <p class="legende">Légende 1</p>
                <p class="valeur">22%</p>
                
                <p class="legende">Légende 1</p>
                <p class="valeur">58%</p>
        
                <p class="legende">Légende 1</p>
                <p class="valeur">15%</p>
            
        </div>

Merci d'avance pour votre réponse

Bonjour
Lien

Salut!

J'avais vu les progress HTML5, mais je cherche quelque chose de compatible avec IE8 au moins, voilà pourquoi je le fait main..

Bonjour,

peut-être dans l'autre sens : en utilisant l'élément natif HTML5 progress et un polyfill là où ce n'est pas reconnu.
Il y a celui de Lea Verou en lien depuis https://css-tricks.com/html5-progress-element/ qui semble fonctionner sur IE8 pour les cas basiques (les tests genre récupérer la valeur actuelle puis la changer par contre pas trop mais autant contrôler depuis le script la valeur du progress sans se fier à la valeur actuelle de l'élément…). Bizarrement je ne vois qu'une batterie de tests dans Firefox (les static) et 5 ou 6 avec IE8

Tu ferais effectivement mieux d'utiliser <progress> et de le remplacer par script là où il n'est pas supporté.

Très bien merci beaucoup pour vos réponses!

Bonjour

Du coup je pense utiliser le polyfill que vous m'avez recommandé. En revanche, ne sais pas si la progress bar est réellement le la balise la plus adaptée? Je ne cherche pas à afficher une progression mais plutôt une valeur fixe, des données statistiques, mais qui auront l'apparence de la progress bar.

Je n'arrive pas à joindre l'image avec mon post, dommage j'aurais bien aimé vous montrer !

Bonne journée, à bientôt
Modifié par DrasLeona (05 Jun 2015 - 13:22)

a écrit :
En revanche, ne sais pas si la progress bar est réellement le la balise la plus adaptée? Je ne cherche pas à afficher une progression mais plutôt une valeur fixe, des données statistiques, mais qui auront l'apparence de la progress bar.

Dans ce cas tu peux peut-être regarder <meter> ? Je ne sais pas si cet élément a été conservé ou si finalement il a été abandonné, ça fait un moment que je n'en ai pas entendu parler.

Après moults test, voici enfin une image de ma progress bar!



Bien que la meter semble adaptée, cela me fait poser une autre question: qu'est ce qui est mieux entre réaliser un graphique avec de simples balises html et qui sera compatible tout navigateur et sera très léger,

ou

utiliser la balise html5 adaptée bien qu'elle risque de poser des problème de compatibilité et va m'imposer d'ajouter un polyfill à mon site?

Quel serait le choix le plus optimal pour un site orienté SEO à cheval avec la sémantique ?
Modifié par DrasLeona (15 Jun 2015 - 14:17)

Je me suis posé la même question.
Je n'arrivais pas à trancher.J'ai donc regardé les gros noms du secteur...et ils ont opté pour un élément graphique avec des div.
Cela permet de garder une charte graphique commune entre les différents navigateurs.
J'ai donc aussi opté pour un élément graphique. Au moins je n'ai pas de surprise et c'est fonctionnel.
J'espère que ma réponse t'aidera

Personellement j'utilise des listes simples, puis je les transforme en graphs. Comme ici par exemple :
CodePen

a écrit :
qu'est ce qui est mieux entre réaliser un graphique avec de simples balises html et qui sera compatible tout navigateur et sera très léger,

ou

utiliser la balise html5 adaptée bien qu'elle risque de poser des problème de compatibilité et va m'imposer d'ajouter un polyfill à mon site?

Quel serait le choix le plus optimal pour un site orienté SEO à cheval avec la sémantique ?

Ca dépend toujours où on accepte de mettre la limite. FAut-il une rétrocompatibilité absolue quitte à ce que ce soit sémantiquement mauvais et moins maintenable dans le futur, ou bien faut-il parier dès maintenant sur l'avenir en sachant qu'il pourrait y avoir quelques laissés pour compte ?
C'est toujours la même chose, il faut se demander qui seront ces laissés pour compte et combien ils sont potentiellement.

Dans la mesure où il existe des solutions à base de javascript, je ne pense pas qu'il y ait tant de laissés pour compte que ça. Bien sûr si tu vises IE6, la réponse risque quand même de changer passablement....

Pour moi, l'argument de la légèreté va plutôt du côté de <meter>. Pour ceux qui n'ont pas besoin de patch de rétrocompatibilité, c'est beaucoup plus léger, pratique, maintenable et respectueux de la sémantique.

a écrit :
Je n'arrivais pas à trancher.J'ai donc regardé les gros noms du secteur...et ils ont opté pour un élément graphique avec des div.

C'est pas parce que les gros font comme ça que c'est forcément la meilleure solution et qu'il faut faire pareil sans se poser de question. En général je pense que c'est plutôt les petits qui innovent.

Cela dépend.
La problématique d'un gros site est d'être fonctionnel et pas forcement de coller aux derniers standards du web.
Là, il souhaite faire fonctionner des éléments html5, dont la version vient d'être finalisée en octobre 2014, sur un navigateur obsolète qui n'a jamais respecté aucun standard (ie8).
Il peut bidouiller, mais il y aura toujours des cas ou html5 ne va pas fonctionner correctement.

Personnellement, je suis pour un passage progressif au html5.
Progress et meter ne sont pas encore bien implémenté sur les navigateurs donc en attendant qu'ils le soient, j'ai opté pour une solution éprouvée... le bon vieux div

Pour voir les navigateurs qui supportent progress et meter :
http://caniuse.com/#feat=progressmeter
Modifié par semantic (17 Jun 2015 - 00:13)

a écrit :
Là, il souhaite faire fonctionner des éléments html5, dont la version vient d'être finalisée en octobre 2014, sur un navigateur obsolète qui n'a jamais respecté aucun standard (ie8).
Il peut bidouiller, mais il y aura toujours des cas ou html5 ne va pas fonctionner correctement.

Certes, mais c'est pour ça qu'il existe un patch à base de javascript. Après la question est bien sûr de savoir si cette solution marche et si c'est acceptable ou non d'y avoir recours et d'en dépendre.

Perso je pense que ça vaut le coup d'essayer. Le patch fonctionne jusqu'à IE9 donc bon... Windows XP n'est plus officiellement supporté par Microsoft, donc IE8 non plus logiquement.

a écrit :
Personnellement, je suis pour un passage progressif au html5.

Comme à peu près tout le monde ici je pense.

Oui tu peux simuler les éléments avec des polyfills mais c'est fastidieux et lourd. Personnellement j'utilise les polyfills que dans des cas spécifiques. Pour des éléments que je ne peux pas simuler autrement. C'est mon coté flemmard
Je te donne ma version avec div.

<div role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">10 %</div>

Cette solution à l'avantage d'être fonctionnel tout en restant accessible. Tu peux aussi lui appliquer un style commun aux différents navigateurs.
C'est pas idéal, mais ça reste fonctionnel même avec un lecteur d'écran.
Après c'est une question de goût et d'investissement au niveau temps Ta position est parfaitement louable et légitime. Je suis même assez d'accord avec toi. Il faut innover