{"id":3367,"date":"2013-09-02T08:56:41","date_gmt":"2013-09-02T06:56:41","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=3367"},"modified":"2020-09-02T20:26:08","modified_gmt":"2020-09-02T18:26:08","slug":"html5-element-progress-avancement-tache","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/veille-technologique\/html5-element-progress-avancement-tache","title":{"rendered":"HTML5 : l&rsquo;\u00e9l\u00e9ment progress, avancement d&rsquo;une t\u00e2che"},"content":{"rendered":"<p>L&rsquo;\u00e9l\u00e9ment progress en HTML5 permet de visualiser l&rsquo;avancement d&rsquo;une t\u00e2che. C&rsquo;est un \u00e9l\u00e9ment encore assez m\u00e9connu mais qui peut \u00eatre pratique dans quelques cas o\u00f9 vous avez besoin de permettre \u00e0 l&rsquo;utilisateur de visualiser une \u00e9volution ou un stade pr\u00e9cis dans un processus. Voyons comment l&rsquo;int\u00e9grer et styler cet \u00e9l\u00e9ment.<!--more--><\/p>\n<h2>Quelques exemples d&rsquo;utilisation<\/h2>\n<p>Avant de nous lancer dans du code, voici quelques id\u00e9es ou exemples d&rsquo;int\u00e9gration d&rsquo;un tel \u00e9l\u00e9ment dans votre code.<\/p>\n<ul>\n<li>Progression dans le remplissage d&rsquo;un formulaire,<\/li>\n<li>Progression dans le remplissage d&rsquo;un profil utilisateur,<\/li>\n<li>Progression du chargement d&rsquo;un fichier,<\/li>\n<li>Niveau d&rsquo;avancement de votre refonte\/construction de site web,<\/li>\n<li>\u00c9tat de compl\u00e9tion d&rsquo;une t\u00e2che, quelle qu&rsquo;elle soit.<\/li>\n<\/ul>\n<p>Le W3C d\u00e9finit cet \u00e9l\u00e9ment comme :<\/p>\n<blockquote><p>[\u2026] repr\u00e9sentant l&rsquo;\u00e9tat d&rsquo;avancement d&rsquo;une t\u00e2che. [\u2026] L&rsquo;utilisation pour quelque chose qui ne d\u00e9finit qu&rsquo;une jauge est inappropri\u00e9e.<\/p><\/blockquote>\n<p>En somme, par exemple, si vous avez besoin d&rsquo;indiquer l&rsquo;\u00e9tat d&rsquo;occupation d&rsquo;un disque dur (ex: 250\/500 Go), cet \u00e9l\u00e9ment HTML5 n&rsquo;est pas appropri\u00e9. Dans ce cas l&rsquo;\u00e9l\u00e9ment HTML5 <code class=\"element\">meter<\/code> serait plus appropri\u00e9.<\/p>\n<h2>\u00c0 quoi ressemble <code class=\"element\">progress<\/code>\u00a0?<\/h2>\n<p>Faisons simple et utilisons ce morceau de code.<\/p>\n<div class=\"code-embed-wrapper\"> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;progress max=&quot;100&quot; value=&quot;25&quot; form=&quot;form-id&quot;&gt;25%&lt;\/progress&gt;<\/code><\/pre> <div class=\"code-embed-infos\"> <\/div> <\/div>\n<p>Nous retrouvons trois attributs sur cet \u00e9l\u00e9ment :<\/p>\n<ul>\n<li><code>value<\/code> : repr\u00e9sente le curseur d&rsquo;avancement<\/li>\n<li><code>max<\/code> : repr\u00e9sente la valeur max (peut \u00eatre diff\u00e9rent de 100 bien entendu)<\/li>\n<li><code>form<\/code> : doit cibler l&rsquo;ID d&rsquo;un formulaire. Par d\u00e9faut l&rsquo;\u00e9l\u00e9ment est associ\u00e9 au formulaire parent le plus proche.<\/li>\n<\/ul>\n<p>Voici l&rsquo;\u00e9l\u00e9ment une fois int\u00e9gr\u00e9 (si votre navigateur le supporte, vous le verrez juste en dessous de cette phrase) :\n<progress value=\"25\" max=\"100\">25%<\/progress>\n<p>Grosso-modo, voici les rendus par d\u00e9faut sur les diff\u00e9rents navigateurs.<\/p>\n<p class=\"center\"><a class=\"fancy\" href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2013\/08\/progress-html5-element.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-3618\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2013\/08\/progress-html5-element.png\" alt=\"\u00c9l\u00e9ment progress sur les diff\u00e9rents navigateurs\" width=\"601\" height=\"326\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2013\/08\/progress-html5-element.png 601w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2013\/08\/progress-html5-element-300x162.png 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2013\/08\/progress-html5-element-600x325.png 600w\" sizes=\"(max-width: 601px) 100vw, 601px\" \/><\/a><\/p>\n<p>Les styles par d\u00e9faut correspondent souvent aux styles de la barre de progression de votre <abbr title=\"Operating System\">OS<\/abbr>. Bien s\u00fbr les styles ci-dessus pourront \u00e9voluer avec le temps, il est probable que cette image devienne obsol\u00e8te rapidement.<\/p>\n<h2>Personnalisation des styles de l&rsquo;\u00e9l\u00e9ment <code class=\"element\">progress<\/code><\/h2>\n<p>Venons-en aux possibilit\u00e9s de styler cet \u00e9l\u00e9ment : c&rsquo;est un peu la gal\u00e8re !<br \/>\nConcr\u00e8tement il faut utiliser des pseudos-classes qui ne sont pas norm\u00e9es, et surtout sur des \u00e9l\u00e9ments et pseudo-\u00e9l\u00e9ments qui n&rsquo;ont pas la m\u00eame hi\u00e9rarchie.<br \/>\nDans Firefox par exemple, l&rsquo;\u00e9l\u00e9ment <code class=\"element\">progress<\/code> se trouve \u00eatre la totalit\u00e9 de la zone d&rsquo;accueil de la valeur repr\u00e9sent\u00e9e par le pseudo-\u00e9l\u00e9ment <code>::-moz-progress-bar<\/code>. Pour Chrome, l&rsquo;\u00e9l\u00e9ment <code class=\"element\">progress<\/code> est le premier conteneur, dans lesquels se trouvent <code>::-webkit-progress-bar<\/code> puis <code>::-webkit-progress-value<\/code>.<\/p>\n<p>Sch\u00e9matis\u00e9e nous avons donc la hi\u00e9rarchie suivante :<\/p>\n<div class=\"code-embed-wrapper\"> <pre class=\"language-haml code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-haml code-embed-code\">\/\/ Firefox<br\/>|- progress<br\/>|-- ::-moz-progress-bar<br\/><br\/>\/\/ Chrome<br\/>|- progress<br\/>|-- ::-webkit-progress-bar<br\/>|---- ::-webkit-progress-value<\/code><\/pre> <div class=\"code-embed-infos\"> <\/div> <\/div>\n<p>Cette diff\u00e9rence peut proposer des probl\u00e8mes d&rsquo;incoh\u00e9rence dans les styles. Nous allons travailler sur un style que voici pour exemple.<\/p>\n<p class=\"center\"><a href=\"\/trytotry\/progress-element-css3-html5.html\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-3620\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2013\/08\/progress-html5-styles-css.png\" alt=\"\u00c9l\u00e9ment progress styl\u00e9\" width=\"600\" height=\"100\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2013\/08\/progress-html5-styles-css.png 600w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2013\/08\/progress-html5-styles-css-300x50.png 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>Pour cr\u00e9er ce style, il va falloir dupliquer une partie du code CSS. Mon processus personnel est de commencer par Firefox, puis ajouter les pseudo-classes pour Chrome, mais chacun ses pr\u00e9f\u00e9rences \ud83d\ude09<\/p>\n<div class=\"code-embed-wrapper\"> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">progress {<br\/>\tdisplay: block; \/* default: inline-block *\/<br\/>\twidth: 300px;<br\/>\tmargin: 1em auto;<br\/>\tpadding: 4px;<br\/>\tborder: 0 none;<br\/>\tbackground: #444;<br\/>\tborder-radius: 14px;<br\/>\tbox-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);<br\/>}<br\/><br\/>progress::-moz-progress-bar {<br\/>\tbackground: #FFF;<br\/>\tborder-radius: 12px;<br\/>\tbox-shadow: inset 0 -2px 4px rgba(0,0,0,0.4), 0 2px 5px 0px rgba(0,0,0,0.3);<br\/>}<\/code><\/pre> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">Style pour Firefox<\/span> <\/div> <\/div>\n<p>Voil\u00e0 pour Firefox, ainsi nous avons les effets de base, mais nous allons devoir compl\u00e9ter pour Chrome, qui ne comprend pour le moment dans notre code que la partie ciblant <code>progress<\/code>.<\/p>\n<div class=\"code-embed-wrapper\"> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">\/* une m\u00e9thode pour ne cibler que Chrome *\/<br\/>@media screen and (-webkit-min-device-pixel-ratio:0) {<br\/>\tprogress {<br\/>\t\theight: 25px; \/* l\u00e9g\u00e8rement plus fin sur Chrome par d\u00e9faut *\/<br\/>\t}<br\/>}<br\/><br\/>\/* on enl\u00e8ve le fond de cet \u00e9l\u00e9ment suppl\u00e9mentaire *\/<br\/>progress::-webkit-progress-bar {<br\/>\tbackground: transparent;<br\/>}<br\/><br\/>\/* on applique les m\u00eames styles que sur ::-moz-progress-bar *\/<br\/>progress::-webkit-progress-value {<br\/>\tbackground: #FFF;<br\/>\tborder-radius: 12px;<br\/>\tbox-shadow: inset 0 -2px 4px rgba(0,0,0,0.4), 0 2px 5px 0px rgba(0,0,0,0.3);<br\/>}<\/code><\/pre> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">Code pour Chrome<\/span> <\/div> <\/div>\n<p>Il existe d&rsquo;autres m\u00e9thodes ressemblantes que je vous invite \u00e0 consulter en lisant les quelques articles fournis juste en dessous dans les liens et sources utiles.<br \/>\nN&rsquo;h\u00e9sitez pas \u00e0 partager vos rendus ou vos astuces \ud83d\ude09<br \/>\nAmusez-vous bien !<\/p>\n<p class=\"center\"><a class=\"demonstration\" href=\"\/trytotry\/progress-element-css3-html5.html\" hreflang=\"en\">D\u00e9mo du tutoriel<\/a> <a class=\"demonstration\" href=\"http:\/\/codepen.io\/CreativeJuiz\/pen\/DKsjm\" hreflang=\"en\">Sur CodePen.io<\/a><\/p>\n<h2>Compatibilit\u00e9<\/h2>\n<p>Le support navigateur est le suivant : Firefox 16+, Opera 11+, Chrome, Safari 6+, IE10+ (avec support partiel).<br \/>\nPour les autres navigateurs, il existe un polyfill cr\u00e9\u00e9 par Lea Verou : <a lang=\"en\" href=\"http:\/\/lea.verou.me\/polyfills\/progress\/\" hreflang=\"en\">progress-polyfill.js<\/a>.<br \/>\nIl permet d&rsquo;amener le support \u00e0 : Firefox 3.5-5, Opera 10.5-10.63, IE9-10 (et presque IE8).<\/p>\n<h2>Quelques articles pour aller plus loin<\/h2>\n<p>Si vous ne le saviez pas, vous pouvez \u00e9galement styler certains \u00e9l\u00e9ments de formulaire comme les boutons radio, les checkbox, ou les input de type file.<\/p>\n<ul>\n<li><a href=\"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/personnaliser-aspect-boutons-radio-checkbox-css\">Styler des checkboxes et boutons radio en CSS<\/a><\/li>\n<li><a href=\"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/input-file-personnalise-css-js\">Styler des \u00e9l\u00e9ments input de type file en CSS<\/a><\/li>\n<\/ul>\n<div class=\"sources\">\n<h2>Liens et sources utiles<\/h2>\n<ul>\n<li><a lang=\"en\" href=\"http:\/\/html5doctor.com\/the-progress-element\/\" hreflang=\"en\">HTML5 Doctor &#8211; Progress Element<\/a><\/li>\n<li><a lang=\"en\" href=\"http:\/\/css-tricks.com\/html5-element\/\" hreflang=\"en\">CSS Tricks &#8211; HTML5 Element<\/a><\/li>\n<li><a lang=\"en\" href=\"http:\/\/www.hongkiat.com\/blog\/html5-progress-bar\/\" hreflang=\"en\">Hong Kiat &#8211; HTML5 progress bar<\/a><\/li>\n<li><a href=\"http:\/\/www.alsacreations.com\/article\/lire\/1416-html5-meter-progress.html\">Alsacr\u00e9ations &#8211; Meter et progress<\/a><\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>L&rsquo;\u00e9l\u00e9ment progress en HTML5 permet de visualiser l&rsquo;avancement d&rsquo;une t\u00e2che. C&rsquo;est un \u00e9l\u00e9ment encore assez m\u00e9connu mais qui peut \u00eatre pratique dans quelques cas o\u00f9 vous avez besoin de permettre \u00e0 l&rsquo;utilisateur de visualiser une \u00e9volution ou un stade pr\u00e9cis dans un processus. Voyons comment l&rsquo;int\u00e9grer et styler cet \u00e9l\u00e9ment.<\/p>\n","protected":false},"author":4,"featured_media":3624,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bluesky_dont_syndicate":"","_bluesky_syndication_accounts":"","_bluesky_syndication_text":"","footnotes":""},"categories":[12],"tags":[560,16,543,542,268],"coauthors":[597],"class_list":["post-3367","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-veille-technologique","tag-forms","tag-html5","tag-meter","tag-progress","tag-w3c"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/3367","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/comments?post=3367"}],"version-history":[{"count":1,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/3367\/revisions"}],"predecessor-version":[{"id":7518,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/3367\/revisions\/7518"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media\/3624"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media?parent=3367"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=3367"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=3367"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=3367"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}