Est-ce que « affiche :Marker » fonctionne dans tous les navigateurs actuels, et si oui, comment ?

Question

Je ne peux pas être sûr si mon code est nul ou si c'est simplement que les navigateurs n'ont pas encore rattrapé les spécifications.

Mon objectif est de simuler des marqueurs de liste en utilisant le contenu généré, afin d'obtenir par exemple.continuation des compteurs de liste en liste en CSS pur.

Donc le code ci-dessous, que j'ai pense est correct selon la spécification, est comme ça:

html {
  counter-reset: myCounter;
}
li {
  counter-increment: myCounter;
}
li:before {
  content: counter(myCounter)". ";
  display: marker;
  width: 5em;
  text-align: right;
  marker-offset: 1em;
}

<ol>
  <li>The<li>
  <li>quick</li>
  <li>brown</li>
</ol>
<ol>
  <li>fox</li>
  <li>jumped</li>
  <li>over</li>
</ol>

Mais cela ne semble pas générer de marqueurs, ni dans FF3, ni dans Chrome, ni dans IE8 beta 2, et si je me souviens bien, pas non plus dans Opera (même si j'ai depuis désinstallé Opera).

Alors, est-ce que quelqu'un sait si les marqueurs sont censé travailler?Quirksmode.org n'est pas aussi utile que d'habitude à cet égard :(.

Answer 1

Apparemment, le marqueur a été introduit en tant que valeur dans CSS 2 mais n'a pas été intégré à CSS 2.1 en raison du manque de prise en charge du navigateur.Je suppose que cela n’a pas aidé sa popularité…

Source: http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display (Allemand)

Answer 2

Oh aïe, je ne le savais pas :-|.Cela scelle probablement son cas, alors.Parce que la plupart du temps, je pensais qu'une propriété CSS2 aussi basique devrait certainement être prise en charge dans les navigateurs modernes, mais si elle ne figure pas dans CSS 2.1, il est alors beaucoup plus logique que ce ne soit pas le cas.

Pour référence future, il n'apparaît pas dans le centre de développement Mozilla, donc probablement Firefox ne le prend pas en charge du tout.

Également pour référence future, j'ai mon exemple original avec lequel travailler inline-block plutôt:

li:before
{
    content: counter(myCounter)". ";
    display: inline-block;
    width: 2em;
    padding-right: 0.3em;
    text-align: right;
}