{"id":1383,"date":"2010-05-03T16:18:53","date_gmt":"2010-05-03T14:18:53","guid":{"rendered":"http:\/\/nyams.planbweb.com\/blog\/?p=1383"},"modified":"2010-05-03T16:18:53","modified_gmt":"2010-05-03T14:18:53","slug":"comment-styler-les-liste-ordonees-avec-css","status":"publish","type":"post","link":"https:\/\/nyamsprod.com\/blog\/comment-styler-les-liste-ordonees-avec-css\/","title":{"rendered":"Comment styler les listes ordon\u00e9es en CSS"},"content":{"rendered":"
\n

Attention:<\/strong> Les informations de ce billet sont susceptibles d'être obsolètes car vieux de plus 2 ans.<\/p>\n

Warning: <\/strong> The information you are reading may be obsolete, this post was published more than 2 years ago.<\/p>\n<\/div>

Une question qui revient r\u00e9guli\u00e8rement et qui est la hantise de tout bon Webdesigner est comment faire pour rendre agr\u00e9able une liste ordonn\u00e9e en CSS. La diff\u00e9rence entre une liste ordonn\u00e9e et une liste non-ordonn\u00e9e est dans le mot ordonn\u00e9e \ud83d\ude42 (bravo pour cette Lapalissade nyamsprod)<\/em>. Cela parait trivial \u00e0 dire mais cela a des cons\u00e9quences importantes ainsi il est de coutume pour maitriser au mieux une liste de “remettre \u00e0 z\u00e9ro” ses propri\u00e9t\u00e9s de style. Cela se fait tr\u00e8s simplement en utilisant le code qui suit:<\/p>\n

ol, ul { margin:0; padding:0; list-style:none; }<\/pre>\n
Mais une fois appliqu\u00e9e, cette r\u00e8gle a pour cons\u00e9quence de faire disparaitre la notion de liste ordonn\u00e9e car les rep\u00e8res de num\u00e9rotation ont disparu. Jusqu’\u00e0 tr\u00e8s r\u00e9cemment le “hack”<\/em> pourrave utilis\u00e9 pour contourner cette difficult\u00e9 \u00e9tait simplement de renommer au niveau de chaque \u00e9l\u00e9ment de liste son ordre, cela avait pour effet d’enlever l’utilit\u00e9 s\u00e9mantique de la balise ol<\/code>.
\nMais tout cela c’est du pass\u00e9, vu que tous les navigateurs modernes supportent le CSS 2.1 <\/strong>il existe maintenant une m\u00e9thode simple et efficace pour r\u00e9cup\u00e9rer les fonctionnalit\u00e9s perdues voire en ajouter d’autres encore plus int\u00e9ressantes. Laissez-moi vous pr\u00e9senter les propri\u00e9t\u00e9 counter-*<\/code> du CSS 2.1.<\/p>\n
Comme un exemple vaut mieux qu’un long discours, je vous pr\u00e9sente la recette pour faire une omelette<\/a> que je viens de copier\/coller sur un site de recette. En utilisant les propri\u00e9t\u00e9s du CSS 2.1 content et la pseudo class :before<\/code> en conjonction avec les propri\u00e9t\u00e9 counter-*<\/code>, je retrouve facilement la num\u00e9rotation des \u00e9tapes et en bonus je peux rajouter des effets de style qui m’\u00e9tais impossible avec la propri\u00e9t\u00e9 list-style<\/code> .<\/p>\n
ol { margin:0; padding:5px; list-style:none; counter-reset:section; }\nli:before { content: counter(section) " "; counter-increment:section; }<\/pre>\n
la variable section<\/code> peut prendre n’importe quel nom et sert uniquement \u00e0 garder et a incr\u00e9menter la variable utilis\u00e9e pour afficher la num\u00e9rotation via la propri\u00e9t\u00e9 content<\/code> et la fonction counter<\/code>.<\/p>\n
Et, pour les chanceux avec un navigateur qui supporte certaines propri\u00e9t\u00e9s du CSS3 on\u00a0 pourra encore mieux visualiser la recette en survolant les instructions, bonne app\u00e9tit \ud83d\ude09 .<\/p>\n
Voir l’exemple final<\/a><\/p>\n
PS: n’h\u00e9sitez pas \u00e0 triturer le code source pour comprendre comment j’ai fait.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
Comment utiliser les propri\u00e9t\u00e9 du CSS 2.1 pour mieux style une liste ordonn\u00e9e en HTML<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[5],"tags":[125,126,139,140,336,382],"class_list":["post-1383","post","type-post","status-publish","format-standard","hentry","category-web","tag-counter-increment","tag-counter-reset","tag-css2-1","tag-css3","tag-liste-ordonnees","tag-navigateurs"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/posts\/1383","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/comments?post=1383"}],"version-history":[{"count":0,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/posts\/1383\/revisions"}],"wp:attachment":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/media?parent=1383"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/categories?post=1383"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/tags?post=1383"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}