Marcadores de lista y estilos de cadena

Listas: todos hemos trabajado con ellas de una forma u otra. Estoy hablando de HTML oly ul. La mayor parte del tiempo, debido a que deseamos controlar el estilo, desactivamos completamente los marcadores de la lista list-style-type: noney comenzamos a diseñar desde allí. Otras veces, elegimos entre un conjunto muy limitado de marcadores de lista desordenados, como disc, circleo square; o una gama (mucho) más amplia de marcadores de lista ordenada. Incluso podríamos, de vez en cuando, proporcionar la URL de una imagen que se utilizará.

Pero, ¿qué pasa si queremos darle un estilo a los marcadores de manera diferente al contenido de los elementos de la lista? Eso siempre ha sido, en el mejor de los casos, difícil. Ahora, gracias al ::markerpseudoelemento, es mucho más fácil. No obtienes toda la gama de CSS para aplicar a los marcadores, pero todavía hay mucho que se puede hacer.

::markerestá disponible en Firefox y, gracias al trabajo de Igalia, también en Chrome.

Considere esta lista:

De forma predeterminada, esto producirá una lista ordenada numerada del 1 al 5, usando números arábigos (1, 2, 3, etc.), cada uno seguido de un punto, todo lo cual coincidirá con el contenido del texto en la fuente. tamaño, estilo, color, etc.

Si tuviera una dirección de diseño que requiriera hacer los números más pequeños o de un color diferente, tendría que crear manualmente ese efecto suprimiendo los marcadores y usando los contadores ::beforede pseudoelementos y CSS y la sangría negativa del texto y… bueno, tomaría un científico para Explícalo todo.

Ingresar ::marker. Agregue estos estilos a la lista anterior y obtendrá el resultado que se muestra a continuación.

¡Eso es todo lo que necesitas!

Sin embargo, antes de comenzar a reescribir todo su CSS, tenga cuidado: las propiedades que pueden aplicar ::markerson bastante limitadas en este momento. En febrero de 2021, las propiedades que deben reconocer los marcadores son:

• Todas las propiedades de fuente ( font-face, font-size, etc.)
• la white-spacepropiedad
• la colorpropiedad
• Las propiedades de internacionalización text-combine-upright, unicode-bidiydirection
• la contentpropiedad
• Todas las propiedades de animación y transición.

Hay algunas adiciones en algunos navegadores, pero casi todas se relacionan con el estilo del texto, no con el modelo de cuadro. Entonces, si estaba pensando que podría poner todos los números de su lista en círculos con fondos sombreados, ::markerno lo llevará allí: tendrá que volver a la fiesta del ::beforecontenido generado. De todos los modos, por ahora: la especificación dice específicamente que se pueden permitir más propiedades ::markeren el futuro.

También hay una limitación en torno a white-space, que genera errores de renderizado en distintos navegadores. Chrome, por ejemplo, trata todos los espacios en blanco en los marcadores como white-space: predice la especificación, pero no le permitirá cambiarlos. Esto debería solucionarse cuando se envía LayoutNG (próxima generación) de Chrome, pero no hasta entonces. Firefox, por otro lado, ignora cualquier white-spacevalor y trata los espacios en blanco como texto de flujo normal de forma predeterminada.

Con esos límites en mente, aún puedes mejorar tus marcadores con la contentpropiedad. En lugar de números seguidos de un punto, puede poner cada número entre paréntesis con una combinación de contadores y cadenas.

Tenga en cuenta el espacio después del corchete de cierre en el contentvalor. Esto se incluye para proporcionar un poco de espacio entre el marcador y el contenido de la lista. Normalmente se podría pensar en utilizar una marca o un relleno, pero como vimos anteriormente, esas propiedades no se pueden aplicar con ::marker. ¡Lo cual es frustrante! Tenga en cuenta también el contador CSS list-item. Eso no se definió en ningún otro lugar del CSS; es un contador incorporado que todos los navegadores (que entienden los contadores CSS) usan para contar elementos de la lista, como los de las listas ordenadas. ¡También puedes usarlo en tu CSS!

Si todo lo que quiere hacer es cambiar el contenido de texto de un marcador de lista y no le importa cambiar ninguno de sus estilos, puede hacerlo con ::markero puede hacerlo con la nueva compatibilidad entre navegadores para valores de cadena en la list-style-typepropiedad.

li.warning {  list-style-type:"⚠";}

Eso es lo nuevo en el mundo de los marcadores de listas. Puede que no sea algo que deba hacer con frecuencia, pero si alguna vez lo hace, es bueno saber que las capacidades en esta área han aumentado y serán aún mejores en el futuro. ¡Cuéntanos si se te ocurren algunos marcadores inteligentes!