Las listas y sus novedades. El pseudoelemento ::marker exclusivo de los list-item 11.8.13

Las listas y sus novedades. El pseudoelemento ::marker exclusivo de los list-item

Un aspecto apenas cubierto por Css es la posibilidad de personalizar de forma sencilla las "viñetas" o números generados por los elementos de una lista.

Las distintas propiedades que conforman el grupo de las list-style-* apenas si ofrecen margen para dotarlas de personalidad y adaptarlas al diseño que tengas entre manos.

El color, tamaño, familia tipográfica y demás valores quedan definidos por los del elemento li siendo del todo punto imposible apuntar y modificar las marcas de forma independiente.

Pero comencemos por el principio. Son elementos de listas (sus ítems) no sólo los li o dt/dd hijos de los elementos ul/ol/dl (las listas desordenadas, las ordenadas y las de definición).
La especificación aclara que:

Un ítem de lista es cualquier elemento en el que su valor de la propiedad 'display' está declarado o computado como 'list-item' o 'inline-list-item'.

Otra particularidad exclusiva de aquellos elementos que tienen su display: list-item/inline-list-item es que generan las viñetas o marcas que mencionaba al inicio siempre que no se impida por declaración expresa. Las mismas no son sino la representación del pseudoelemento ::marker. Y el número o detalle gráfico que muestra el navegador para cada ítem es el valor computado de la propiedad content de este pseudoelemento.

La modificación del contenido generado por este pseudoelemento ::marker sólo se podía hacer a través de la propiedad list-style y sólo en aquellos aspectos que ésta propiedad abreviada permite:

1. list-style-type define el tipo de viñeta generada: disc/circle/square/decimal...
2. list-style-image para sustituir las anteriores por una imagen. No es posible el uso de sprites ni otras variaciones.
3. list-style-position: Sólo admite los valores inside y outside. Dentro o fuera de la caja generada por el elemento de lista. No admite valores numéricos y por lo tanto tampoco unidades como px, em...

Si se quería algo distinto a ello había que añadir etiquetado dentro de los ítems (como spans) o utilizar el pseudoelemento ::before

Esto era así de limitado hasta ahora porque el pseudoelemento ::marker era del todo punto inaccesible por el usuario. No había la posibilidad de acceder a él vía Css.

Novedades respecto a Css2.1

Todo lo anterior era así en Css2.1. Pero con la llegada del documento CSS Lists and Counters Module Level 3 hay algunos aspectos que cambian y se amplía el control del usuario sobre ellos.

Las novedades más significativas que introduce el documento son:

1. El pseudoelemento ::marker se ha introducido para permitir aplicar estilos directamente al marcador de lista.
2. Se ha añadido el valor inline-list-itemr a la propiedad 'display'.
3. Se ha añadido el valor marker a la propiedad 'position'.
4. Se han ampliado los valores posibles para la propiedad list-style-type y sus algoritmos correspondientes para cada uno de ellos.
5. Se ha introducido el identificador predefinido del contador.

Nota: en este artículo no entramos en los aspectos relativos a los contadores Css. Tienes un extenso artículo ya publicado.

El pseudoelemento ::marker en los ítems de listas

Dice la especificación sobre él:

Esta especificación define un nuevo tipo de pseudoelemento, el pseudoelemento '::marker', que es generado por los elementos de la lista para representar el marcador (la viñeta o el número de identificación de cada elemento).

Características del pseudoelemento ::marker

• El pseudoelemento ::marker sólo es generado por los elementos de lista. En cualquier otro elemento el valor de su ‘content’ es computado como ‘none’ y por lo tanto no se crea.
• Al igual que ocurre con los pseudoelementos ::before y ::after, el ::marker admite todas las propiedades css con sus valores.
• El pseudoelemento ::marker se genera al inicio del contenido de su contenedor padre (el item), antes incluso que el pseudoelemento ::before (en el DOM se coloca primero el ::marker)
• Por definición el pseudoelemento ::marker es un elemento 'inline'. No obstante, ciertos valores de ‘list-style-position’ en el ítem de la lista pueden posicionar la caja del marcador, lo que inplicaría cambios en el valor computado de ‘display’

Para ilustrar toda la potencialidad que encierra el poder acceder directamente a las viñetas de los elementos de lista y aplicar cualquier estilo (propiedad/valor) un par de ejemplos (imagen) obtenido del documento del consorcio. Pincha para ver ampliada en lightbox

Como ahora ya tendremos accesible el pseudoelemento ::marker y todas las propiedades css para jugar, será posible, entre otros divertimentos, aplicar, por ejemplo, sprites a los ítems o tipografías de iconos.

Estado y soporte del documento y del pseudoelemento ::marker

A día de hoy el documento del W3c está marcado en su estatus como:

This is a public copy of the editors' draft. It is provided for discussion only and may change at any moment. Its publication here does not imply endorsement of its contents by W3C. Don't cite this document other than as work in progress.

Así que nada de lo mencionado en este artículo está soportado, aún por los navegadores. Al menos yo no he optenido resultados en Firefox v23 y Chrome v28.

Pero siempre es bueno saber qué se aproxima. Aunque cuando llegue lo haga con cambios.

Kseso

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso