{"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":[],"aioseo_head":"\n\t\t<!-- All in One SEO 4.9.8 - aioseo.com -->\n\t<meta name=\"description\" content=\"CSS depuis sa version 2.1 propose un syst\u00e8me de compteur relativement m\u00e9connu du fait d&#039;une compatibilit\u00e9 relativement r\u00e9cente sur IE. D&#039;autant plus que certains d\u00e9fendront la position suivante : CSS n&#039;est pas fait pour cela, il faut utiliser JavaScript. Soit ! Mais sachez que \u00e7a existe. Petite introduction ! Comme je vous le disais, les compteurs existent\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Geoffrey Crofte\"\/>\n\t<meta name=\"keywords\" content=\"counter,css 2.1,,astuce,css2.1,css3,tutoriel,css \/ css3,tutoriels\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/les-compteurs-en-css\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 4.9.8\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/tutoriels\\\/les-compteurs-en-css#article\",\"name\":\"Les compteurs en CSS\",\"headline\":\"Les compteurs en CSS\",\"author\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/auteur\\\/geoffrey#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/#person\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/css-counters@2x.png\",\"width\":1980,\"height\":990,\"caption\":\"CSS Counters\"},\"datePublished\":\"2012-12-17T08:56:37+01:00\",\"dateModified\":\"2019-12-29T16:20:22+01:00\",\"inLanguage\":\"fr-FR\",\"commentCount\":7,\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/tutoriels\\\/les-compteurs-en-css#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/tutoriels\\\/les-compteurs-en-css#webpage\"},\"articleSection\":\"CSS \\\/ CSS3, Tutoriels, astuce, counter, CSS2.1, CSS3, tutoriel, CreativeJuiz\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/tutoriels\\\/les-compteurs-en-css#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog#listItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/theme\\\/tutoriels#listItem\",\"name\":\"Tutoriels\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/theme\\\/tutoriels#listItem\",\"position\":2,\"name\":\"Tutoriels\",\"item\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/theme\\\/tutoriels\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/tutoriels\\\/les-compteurs-en-css#listItem\",\"name\":\"Les compteurs en CSS\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog#listItem\",\"name\":\"Accueil\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/tutoriels\\\/les-compteurs-en-css#listItem\",\"position\":3,\"name\":\"Les compteurs en CSS\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/theme\\\/tutoriels#listItem\",\"name\":\"Tutoriels\"}}]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/#person\",\"name\":\"Geoffrey Crofte\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/tutoriels\\\/les-compteurs-en-css#personImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c9e2509009badcdf656faf5019ef0f567c4dd4e6e49beca151c21d23995db473?s=96&d=monsterid&r=g\",\"width\":96,\"height\":96,\"caption\":\"Geoffrey Crofte\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/auteur\\\/geoffrey#author\",\"url\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/auteur\\\/geoffrey\",\"name\":\"Geoffrey Crofte\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/tutoriels\\\/les-compteurs-en-css#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c9e2509009badcdf656faf5019ef0f567c4dd4e6e49beca151c21d23995db473?s=96&d=monsterid&r=g\",\"width\":96,\"height\":96,\"caption\":\"Geoffrey Crofte\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/tutoriels\\\/les-compteurs-en-css#webpage\",\"url\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/tutoriels\\\/les-compteurs-en-css\",\"name\":\"Les compteurs en CSS\",\"description\":\"CSS depuis sa version 2.1 propose un syst\\u00e8me de compteur relativement m\\u00e9connu du fait d'une compatibilit\\u00e9 relativement r\\u00e9cente sur IE. D'autant plus que certains d\\u00e9fendront la position suivante : CSS n'est pas fait pour cela, il faut utiliser JavaScript. Soit ! Mais sachez que \\u00e7a existe. Petite introduction ! Comme je vous le disais, les compteurs existent\",\"inLanguage\":\"fr-FR\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/tutoriels\\\/les-compteurs-en-css#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/auteur\\\/geoffrey#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/auteur\\\/geoffrey#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/css-counters@2x.png\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/tutoriels\\\/les-compteurs-en-css\\\/#mainImage\",\"width\":1980,\"height\":990,\"caption\":\"CSS Counters\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/tutoriels\\\/les-compteurs-en-css#mainImage\"},\"datePublished\":\"2012-12-17T08:56:37+01:00\",\"dateModified\":\"2019-12-29T16:20:22+01:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/\",\"name\":\"Creative Juiz\",\"description\":\"HTML5, CSS3, JavaScript, WordPress Tutorials\",\"inLanguage\":\"fr-FR\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/#person\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Les compteurs en CSS","description":"CSS depuis sa version 2.1 propose un syst\u00e8me de compteur relativement m\u00e9connu du fait d'une compatibilit\u00e9 relativement r\u00e9cente sur IE. D'autant plus que certains d\u00e9fendront la position suivante : CSS n'est pas fait pour cela, il faut utiliser JavaScript. Soit ! Mais sachez que \u00e7a existe. Petite introduction ! Comme je vous le disais, les compteurs existent","canonical_url":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/les-compteurs-en-css","robots":"max-image-preview:large","keywords":"counter,css 2.1,,astuce,css2.1,css3,tutoriel,css \/ css3,tutoriels","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/les-compteurs-en-css#article","name":"Les compteurs en CSS","headline":"Les compteurs en CSS","author":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/auteur\/geoffrey#author"},"publisher":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/#person"},"image":{"@type":"ImageObject","url":"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/12\/css-counters@2x.png","width":1980,"height":990,"caption":"CSS Counters"},"datePublished":"2012-12-17T08:56:37+01:00","dateModified":"2019-12-29T16:20:22+01:00","inLanguage":"fr-FR","commentCount":7,"mainEntityOfPage":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/les-compteurs-en-css#webpage"},"isPartOf":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/les-compteurs-en-css#webpage"},"articleSection":"CSS \/ CSS3, Tutoriels, astuce, counter, CSS2.1, CSS3, tutoriel, CreativeJuiz"},{"@type":"BreadcrumbList","@id":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/les-compteurs-en-css#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.creativejuiz.fr\/blog#listItem","position":1,"name":"Accueil","item":"https:\/\/www.creativejuiz.fr\/blog","nextItem":{"@type":"ListItem","@id":"https:\/\/www.creativejuiz.fr\/blog\/theme\/tutoriels#listItem","name":"Tutoriels"}},{"@type":"ListItem","@id":"https:\/\/www.creativejuiz.fr\/blog\/theme\/tutoriels#listItem","position":2,"name":"Tutoriels","item":"https:\/\/www.creativejuiz.fr\/blog\/theme\/tutoriels","nextItem":{"@type":"ListItem","@id":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/les-compteurs-en-css#listItem","name":"Les compteurs en CSS"},"previousItem":{"@type":"ListItem","@id":"https:\/\/www.creativejuiz.fr\/blog#listItem","name":"Accueil"}},{"@type":"ListItem","@id":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/les-compteurs-en-css#listItem","position":3,"name":"Les compteurs en CSS","previousItem":{"@type":"ListItem","@id":"https:\/\/www.creativejuiz.fr\/blog\/theme\/tutoriels#listItem","name":"Tutoriels"}}]},{"@type":"Person","@id":"https:\/\/www.creativejuiz.fr\/blog\/#person","name":"Geoffrey Crofte","image":{"@type":"ImageObject","@id":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/les-compteurs-en-css#personImage","url":"https:\/\/secure.gravatar.com\/avatar\/c9e2509009badcdf656faf5019ef0f567c4dd4e6e49beca151c21d23995db473?s=96&d=monsterid&r=g","width":96,"height":96,"caption":"Geoffrey Crofte"}},{"@type":"Person","@id":"https:\/\/www.creativejuiz.fr\/blog\/auteur\/geoffrey#author","url":"https:\/\/www.creativejuiz.fr\/blog\/auteur\/geoffrey","name":"Geoffrey Crofte","image":{"@type":"ImageObject","@id":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/les-compteurs-en-css#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/c9e2509009badcdf656faf5019ef0f567c4dd4e6e49beca151c21d23995db473?s=96&d=monsterid&r=g","width":96,"height":96,"caption":"Geoffrey Crofte"}},{"@type":"WebPage","@id":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/les-compteurs-en-css#webpage","url":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/les-compteurs-en-css","name":"Les compteurs en CSS","description":"CSS depuis sa version 2.1 propose un syst\u00e8me de compteur relativement m\u00e9connu du fait d'une compatibilit\u00e9 relativement r\u00e9cente sur IE. D'autant plus que certains d\u00e9fendront la position suivante : CSS n'est pas fait pour cela, il faut utiliser JavaScript. Soit ! Mais sachez que \u00e7a existe. Petite introduction ! Comme je vous le disais, les compteurs existent","inLanguage":"fr-FR","isPartOf":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/les-compteurs-en-css#breadcrumblist"},"author":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/auteur\/geoffrey#author"},"creator":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/auteur\/geoffrey#author"},"image":{"@type":"ImageObject","url":"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/12\/css-counters@2x.png","@id":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/les-compteurs-en-css\/#mainImage","width":1980,"height":990,"caption":"CSS Counters"},"primaryImageOfPage":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/les-compteurs-en-css#mainImage"},"datePublished":"2012-12-17T08:56:37+01:00","dateModified":"2019-12-29T16:20:22+01:00"},{"@type":"WebSite","@id":"https:\/\/www.creativejuiz.fr\/blog\/#website","url":"https:\/\/www.creativejuiz.fr\/blog\/","name":"Creative Juiz","description":"HTML5, CSS3, JavaScript, WordPress Tutorials","inLanguage":"fr-FR","publisher":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/#person"}}]}},"aioseo_meta_data":{"post_id":"3072","title":null,"description":null,"keywords":[{"label":"counter","value":"counter"},{"label":"CSS 2.1,","value":"CSS 2.1,"}],"keyphrases":null,"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"","isEnabled":true},"graphs":[],"defaultGraph":"","defaultPostTypeGraph":""},"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"location":null,"local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":null,"created":"2020-12-21 17:18:18","updated":"2025-07-09 23:28:56","seo_analyzer_scan_date":null},"_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}]}}