¿"muestra:marcador” funciona en cualquier navegador actual y, de ser así, ¿cómo?

StackOverflow https://stackoverflow.com/questions/50170

  •  09-06-2019
  •  | 
  •  

Pregunta

No puedo estar seguro de si mi código es muy malo o si es simplemente que los navegadores aún no se han puesto al día con las especificaciones.

Mi objetivo es simular marcadores de lista utilizando contenido generado, para obtener, por ejemplo.continuación de los contadores de lista en lista en CSS puro.

Entonces el siguiente código, que yo pensar es correcto según la especificación, es así:

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>

Pero esto no parece generar marcadores, ni en FF3, Chrome o IE8 beta 2, y si no recuerdo mal, tampoco en Opera (aunque desde entonces desinstalé Opera).

Entonces, ¿alguien sabe si los marcadores son supuesto ¿trabajar?Quirksmode.org no está siendo tan servicial como siempre en este sentido :(.

¿Fue útil?

Solución

Aparentemente, el marcador se introdujo como un valor en CSS 2 pero no llegó a CSS 2.1 debido a la falta de soporte del navegador.Supongo que eso no ayudó a su popularidad...

Fuente: http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display (Alemán)

Otros consejos

Ay, no lo sabía :-|.Entonces eso probablemente cierra el caso.Porque en general asumí que una propiedad CSS2 tan básica definitivamente debería ser compatible con los navegadores modernos, pero si no llegó a CSS 2.1, entonces tiene mucho más sentido que no lo sea.

Para referencia futura, no aparece. en el Centro de Desarrollo de Mozilla, por lo que presumiblemente Firefox no lo admite en absoluto.

También para referencia futura, obtuve mi ejemplo original para trabajar inline-block en cambio:

li:before
{
    content: counter(myCounter)". ";
    display: inline-block;
    width: 2em;
    padding-right: 0.3em;
    text-align: right;
}
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top