{"id":3072,"date":"2012-12-17T08:56:37","date_gmt":"2012-12-17T07:56:37","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=3072"},"modified":"2019-12-29T16:20:22","modified_gmt":"2019-12-29T15:20:22","slug":"les-compteurs-en-css","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/les-compteurs-en-css","title":{"rendered":"Les compteurs en CSS"},"content":{"rendered":"<p>CSS depuis sa version 2.1 propose un syst\u00e8me de compteur relativement m\u00e9connu du fait d&rsquo;une compatibilit\u00e9 relativement r\u00e9cente sur IE. D&rsquo;autant plus que certains d\u00e9fendront la position suivante : CSS n&rsquo;est pas fait pour cela, il faut utiliser JavaScript. Soit\u00a0! Mais sachez que \u00e7a existe. Petite introduction\u00a0!<!--more--><\/p>\n<p>Comme je vous le disais, les compteurs existent et sont <a href=\"http:\/\/www.w3.org\/TR\/CSS2\/syndata.html#counter\">d\u00e9finis depuis CSS2.1 par le W3C<\/a>. L&rsquo;arriv\u00e9e de CSS3 a permis de compl\u00e9ter quelque peu la d\u00e9finition et de l&rsquo;inclure dans un module nomm\u00e9 \u00ab\u00a0<a href=\"http:\/\/www.w3.org\/TR\/css3-content\/#counters\">Generated and Replaced Content<\/a>\u00ab\u00a0.<\/p>\n<p>Au cours de cet article, nous allons jouer avec trois propri\u00e9t\u00e9s et une fonction\u00a0:<\/p>\n<ul>\n<li><code>counter-reset<\/code>\u00a0: cette propri\u00e9t\u00e9 permet d&rsquo;initialiser un compteur (le cr\u00e9er). Il suffit pour cela de renseigner un ou plusieurs noms de compteurs suivi de sa valeur num\u00e9rique initiale.<br \/>\nExemple :<br \/>\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\">counter-reset: compteur1 4 compteur2 0;<\/code><\/pre> <div class=\"code-embed-infos\"> <\/div> <\/div><\/p>\n<p>Ici nous avons deux compteurs initialis\u00e9s : compteur1 qui d\u00e9marre \u00e0 4, et compteur 2 qui d\u00e9marre \u00e0 0.<\/li>\n<li><code>counter-set<\/code>\u00a0: cette propri\u00e9t\u00e9 permet de red\u00e9finir la valeur d&rsquo;un compteur, sans en cr\u00e9er un nouveau. Il suffit pour cela de renseigner un ou plusieurs noms de compteurs existant suivi de sa nouvelle valeur num\u00e9rique.<br \/>\nExemple :<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\">counter-set: compteur1 0 compteur2 3;<\/code><\/pre> <div class=\"code-embed-infos\"> <\/div> <\/div><\/p>\n<p>Ici nous avons deux compteurs red\u00e9finis : compteur1 qui red\u00e9marre \u00e0 0, et compteur 2 qui red\u00e9marre \u00e0 3.<\/li>\n<li><code>counter-increment<\/code>\u00a0: cette propri\u00e9t\u00e9 permet d&rsquo;incr\u00e9menter un compteur. Il suffit pour cela de renseigner le nom d&rsquo;un ou plusieurs compteurs, chacun suivi du chiffre \u00e0 incr\u00e9menter.<br \/>\nExemple :<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\">counter-increment: compteur1 2 compteur2 4;<\/code><\/pre> <div class=\"code-embed-infos\"> <\/div> <\/div><\/p>\n<p>Ici nos deux compteurs initiaux seront augment\u00e9s de 2 pour le compteur1 et 4 pour le compteur2.<\/li>\n<li><code>counter()<\/code>\u00a0: cette fonction associ\u00e9e au pseudo-\u00e9l\u00e9ment <code>::before<\/code> ou <code>::after<\/code> et \u00e0 la propri\u00e9t\u00e9 <code>content<\/code> permet d&rsquo;ins\u00e9rer le compteur dans votre page. Cela g\u00e9n\u00e8re un contenu dynamique. Elle attend un param\u00e8tre et un second optionnel. Le premier est le nom du compteur, le second et <a href=\"http:\/\/www.w3.org\/TR\/css3-content\/#counter\">le style de compteur<\/a>. (m\u00eame valeurs que <code>list-style-type<\/code>)<br \/>\nExemple :<br \/>\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\">li::before {<br\/>\tcontent: counter(compteur1, decimal-leading-zero) &quot; \u2013 &quot;;<br\/>}<\/code><\/pre> <div class=\"code-embed-infos\"> <\/div> <\/div><\/p>\n<p>Dans cet exemple, le contenu d&rsquo;un \u00e9l\u00e9ment <code class=\"element\">li<\/code> sera pr\u00e9c\u00e9d\u00e9 d&rsquo;un contenu de type \u00ab\u00a004 \u2013\u00a0\u00bb<\/li>\n<\/ul>\n<p class=\"note message\">Concernant le style du counter, il est possible de sp\u00e9ficier les valeurs \u00ab\u00a0disc\u00a0\u00bb, \u00ab\u00a0circle\u00a0\u00bb, \u00ab\u00a0square\u00a0\u00bb et \u00ab\u00a0none\u00a0\u00bb, ce qui fait qu&rsquo;il est possible de ne rien g\u00e9n\u00e9rer. Je n&rsquo;ai pas encore trouv\u00e9 d&rsquo;utilit\u00e9 r\u00e9elle \u00e0 ces valeurs.<\/p>\n<p class=\"important message\">\u00c0 l&rsquo;heure o\u00f9 j&rsquo;\u00e9cris ces lignes la propri\u00e9t\u00e9 <code>counter-set<\/code> n&rsquo;est pas reconnue par les navigateurs, et c&rsquo;est bien dommage.<\/p>\n<h2>D\u00e9monstration par l&rsquo;exemple<\/h2>\n<p>Le plus simple pour pr\u00e9senter les fonctionnalit\u00e9s des compteurs, c&rsquo;est de vous proposer un document bien hi\u00e9rarchis\u00e9 avec quelques titres de diff\u00e9rents niveaux.<br \/>\nVoici la d\u00e9monstration en ligne :<br \/>\n<a class=\"demonstration\" href=\"\/blog\/doc\/css-counters.html\">D\u00e9monstration des compteurs CSS<\/a><\/p>\n<p>Le code utilis\u00e9 en HTML est relativement simple\u00a0: il suffit de faire en sorte d&rsquo;avoir des <code>h2<\/code>, <code>h3<\/code> et <code>h4<\/code> dans un bloc de texte, par exemple.<br \/>\nJe vous donne quand m\u00eame un extrait si vous voulez tester\u00a0:<\/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;h2&gt;This is the new way of life&lt;\/h2&gt;<br\/>&lt;p&gt;Lorem ipsum dolor sit amet, [\u2026]&lt;\/p&gt;<br\/><br\/>&lt;h3&gt;Lorem ipsum dolor sit amet, consectetur&lt;\/h3&gt;<br\/><br\/>&lt;h4&gt;Adipisicing elit&lt;\/h4&gt;<br\/>&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing[\u2026]&lt;\/p&gt;<br\/>&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do [\u2026]&lt;\/p&gt;<br\/><br\/>&lt;h4&gt;Anim id est laborum&lt;\/h4&gt;<br\/>&lt;p&gt;Lorem ipsum [\u2026]&lt;\/p&gt;<br\/><br\/>&lt;h3&gt;Reprehenderit in voluptate&lt;\/h3&gt;<br\/>&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore[\u2026]&lt;\/p&gt;<br\/><br\/>&lt;h2&gt;Come back later&lt;\/h2&gt;<br\/>&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore [\u2026]&lt;\/p&gt;<\/code><\/pre> <div class=\"code-embed-infos\"> <\/div> <\/div>\n<p>La CSS est relativement courte en ce qui concerne les compteurs, il faut juste pr\u00eater attention aux d\u00e9tails.<\/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\">\/* on initialise nos compteurs<br\/>   nomm\u00e9s title2, title3 et title4 *\/<br\/>body {<br\/>\tcounter-reset: title2 title3 title4;<br\/>}<br\/><br\/>\/* on incr\u00e9mente la valeur de<br\/>   title2 d\u00e8s qu&#039;on voit un h2 *\/<br\/>h2 {<br\/>\tcounter-increment: title2 1;<br\/>}<br\/><br\/>\/* puis on g\u00e9n\u00e8re un contenu avant<br\/>   compos\u00e9 du chiffre en lettre<br\/>   romaine et d&#039;un tiret *\/<br\/>h2::before {<br\/>\tcontent: counter(title2, upper-roman) &quot; \u2013 &quot;;<br\/>}<br\/><br\/>h3 {<br\/>\tcounter-increment: title3 1;<br\/>}<br\/><br\/>h3::before {<br\/>\tcontent: counter(title3, decimal) &quot; \u2013 &quot;;<br\/>}<br\/><br\/>h4 {<br\/>\tcounter-increment: title4 1;<br\/>}<br\/><br\/>\/* ici on compose le compteur<br\/>   \u00e0 l&#039;aide du chiffre du titre<br\/>   sup\u00e9rieur, puis d&#039;une lettre<br\/>   du compteur courant *\/<br\/>h4::before {<br\/>\tcontent: counter(title3, decimal) &quot;.&quot; counter(title4, lower-alpha) &quot; \u2013 &quot;;<br\/>}<\/code><\/pre> <div class=\"code-embed-infos\"> <\/div> <\/div>\n<h3>D\u00e9monstration sur une liste num\u00e9rot\u00e9e<\/h3>\n<p>Vous allez me dire : \u00c0 quoi bon ? Puisque la liste <code class=\"element\">ol<\/code> est d\u00e9j\u00e0 num\u00e9rot\u00e9e.<br \/>\nOui, c&rsquo;est vrai, mais l&rsquo;utilisation du contenu g\u00e9n\u00e9r\u00e9 permet d&rsquo;appliquer des styles plus riches gr\u00e2ce \u00e0 CSS.<br \/>\nUn exemple en image sur ce qui est un vieux site de ma composition :<\/p>\n<p class='codepen'  data-height='365' data-theme-id='0' data-slug-hash='abzyRXX' data-default-tab='css,result' data-animations='run' data-editable='' data-embed-version='2'>\n<\/p>\n\n<p>Il y a pas mal de choses \u00e0 savoir sur les listes, notamment l&rsquo;\u00e9l\u00e9ment <code>ol<\/code>. <a href=\"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/attributs-html-start-reversed-type-element-ol\">Apprenez-en plus sur les attributs start, reversed et les types de compteur<\/a>.<\/p>\n<p>N&rsquo;h\u00e9sitez pas si vous avez des questions \ud83d\ude09<\/p>\n<div class=\"sources\">\n<h2>Liens utiles et sources<\/h2>\n<ul>\n<li><a href=\"http:\/\/dev.w3.org\/csswg\/css3-lists\/#counter-properties\">Les propri\u00e9t\u00e9s de Counter selon le CSSWG<\/a><\/li>\n<li><a href=\"http:\/\/www.w3.org\/wiki\/CSS\/Properties\/counter-increment\">Le wiki du W3C<\/a><\/li>\n<li><a href=\"http:\/\/www.css3create.com\/counters\">Une autre explication en fran\u00e7ais sur les counters<\/a><\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>CSS depuis sa version 2.1 propose un syst\u00e8me de compteur relativement m\u00e9connu du fait d&rsquo;une compatibilit\u00e9 relativement r\u00e9cente sur IE. D&rsquo;autant plus que certains d\u00e9fendront la position suivante : CSS n&rsquo;est pas fait pour cela, il faut utiliser JavaScript. Soit\u00a0! Mais sachez que \u00e7a existe. Petite introduction\u00a0!<\/p>\n","protected":false},"author":4,"featured_media":7103,"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":[17,9],"tags":[228,526,288,428,15],"coauthors":[597],"class_list":["post-3072","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-css3","category-tutoriels","tag-astuce","tag-counter","tag-css2-1","tag-css3","tag-tutoriel"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/3072","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=3072"}],"version-history":[{"count":3,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/3072\/revisions"}],"predecessor-version":[{"id":7108,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/3072\/revisions\/7108"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media\/7103"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media?parent=3072"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=3072"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=3072"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=3072"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}