[Résolu] CSS3 counter sur <ol>

Bonjour,

Je me bats avec les counters sur <ol>
Il me semblait avoir lu qu'on pouvait commencer à compter à partir d'un chiffre précis.

J'entame une liste:

<ol id="wrapper">
	<li>Mon contenu</li>
	<li>La suite</li>
	<li>Et encore</li>
</ol>

Avec le css suivant, c'est ok, ça fonctionne:

ol { counter-reset: son; } /* on initialise et nomme un compteur */
ol li {
    list-style-type: none;
    counter-increment: son; /* on incrémente le compteur à chaque nouveau li */
}
ol li:before {
    content: counter(son)". "; /* on affiche le compteur */
}

J'obtiens bien:
1. Mon contenu
2. La suite
3. Et encore

Mais un peu plus bas dans ma page, je souhaite faire une autre liste qui ne commence pas à 1, mais à 4…
Par exemple, je souhaite la liste ci-dessous:
4. mon titre
5. un autre
6. un suivant
7. ainsi de suite

Quelqu'un a une piste?

Merci
Modifié par speedlab (07 Dec 2013 - 21:44)

bonsoir,
il ne faut pas faire le reset sur ol , mais un conteneur parent.
http://codepen.io/gc-nomade/pen/IJKed

sinon , les attributs start et value ... a verifier et a voir http://forum.alsacreations.com/topic-4-53532-1.html

Merci Cyril, tu m'évites une loooongue soirée…
Et merci également pour les exemples
Modifié par speedlab (07 Dec 2013 - 23:24)

Salut,

En HTML 4 (sauf en mode strict), en XHTML 1.0 (sauf en mode strict) et en HTML 5, pas besoin de bidouiller en CSS : il suffit d'utiliser l'attribut start au niveau de l'élément ol, comme suit :

<ol start="4">
  <li>quatrièmement</li>
</ol>

Merci pour cette précision… Mais je voulais bosser avec counter-reset et counter-increment pour apprendre. Effectivement en utilisant start, ça fonctionne très bien

JE déconseille les compteurs parce qu'ils posent un problème d'accessibilité.

En effet, le contenu de la propriété CSS Content n'est pas rendu et lu par tous les lecteurs d'écran, et certains navigateurs texte ignorent totalement les CSS.

Le fait qu'une liste commence à 4 et pas à 1 est une information sémantique trop importante pour qu'elle ne soit pas rendue dans certains contextes.

Donc pour les listes numérotées, je conseille vivement d'utiliser type, start et value en tant qu'attributs HTML à la place de list-style-type et les compteurs en CSS, n'en déplaise au validateur W3C (le type 1,a,A,i,I peut aussi avoir son importance pour la compréhension, surtout dans les listes multi-niveaux)

Pour les listes à puces par contre, pas de contre-indication à list-style-type, car la forme de la puce n'apporte pas d'information; c'est juste une question esthétique.
Modifié par QuentinC (07 Dec 2013 - 23:56)

gc-nomade a écrit :
sinon , les attributs start et value ... a verifier et a voir

Victor BRITO a écrit :
Salut,

En HTML 4 (sauf en mode strict), en XHTML 1.0 (sauf en mode strict) et en HTML 5, pas besoin de CSS[/code]

Merci d'avoir apporter les précisions manquantes

P.S. @Victor je ne considère pas les counter CSS comme une bidouille, je suis curieux de comprendre ta remarque.

gc-nomade a écrit :
P.S. @Victor je ne considère pas les counter CSS comme une bidouille, je suis curieux de comprendre ta remarque.

Appliqués à l'élément ol, c'est pour moi de la bidouille, compte tenu de ce que j'ai dit.