Listas: todos hemos trabajado con ellos de una forma u otra. Estoy hablando de HTML <ol> y <ul>. La mayor parte del tiempo, debido a que deseamos controlar el estilo, desactivamos los marcadores de la lista por completo con list-style-type: noney empieza a peinar a partir de ahí. Otras veces, elegimos entre un conjunto muy limitado de marcadores de lista desordenados, como disc, circle, o square; o una gama (mucho) más amplia de marcadores de lista ordenados. Incluso, de vez en cuando, podríamos proporcionar la URL de una imagen que se utilizará.
Pero, ¿qué pasa si queremos diseñar los marcadores de manera diferente al contenido de los elementos de la lista? Eso siempre ha sido difícil en el mejor de los casos. Ahora, gracias a la ::marker pseudo-elemento, es mucho más fácil. No obtiene la gama completa de CSS para aplicar a los marcadores, pero todavía hay mucho que se puede hacer.
::marker está disponible en Firefox y, gracias al trabajo de Igalia, también en Chrome.
Considere esta lista:
De forma predeterminada, eso producirá una lista ordenada numerada del 1 al 5, utilizando números arábigos (1, 2, 3, etc.), cada uno seguido de un punto (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 el ::before contadores de pseudoelementos y CSS y sangría de texto negativo y … bueno, se necesitaría un científico para explicarlo 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 empezar a reescribir todo su CSS, tenga cuidado: las propiedades que puede aplicar a través de ::marker son bastante limitados en este momento. A partir de febrero de 2021, las propiedades que los marcadores deben reconocer son:
- Todas las propiedades de la fuente (
font-face,font-size, etc.) - El
white-spacepropiedad - El
colorpropiedad - Las propiedades de la internacionalización
text-combine-upright,unicode-bidi, ydirection - El
contentpropiedad - Todas las propiedades de animación y transición
Hay algunas adiciones en algunos navegadores, pero casi todas las adiciones se relacionan con el estilo del texto, no con el modelo de caja. Entonces, si pensaba que podría poner todos los números de su lista en círculos con fondos sombreados, ::marker no te llevará allí, tendrás que volver al hackfest de ::before contenido generado. Por ahora, de todos modos: la especificación dice explícitamente que se pueden permitir más propiedades para ::marker en el futuro.
También hay una limitación alrededor white-space, que tiene errores de renderizado en distintos navegadores. Chrome, por ejemplo, trata todos los espacios en blanco en los marcadores como white-space: pre como dice la especificación, pero no le permitirá cambiarlo. Esto debería arreglarse cuando se envíe LayoutNG (Next Generation) de Chrome, pero no hasta entonces. Firefox, por otro lado, ignora cualquier white-space valores y trata los espacios en blanco como texto de flujo normal de forma predeterminada.
Con esos límites en mente, aún puede animar sus marcadores con el content propiedad. 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 paréntesis de cierre en el content valor. Eso se incluye para proporcionar un poco de espacio entre el marcador y el contenido de la lista. Por lo general, podría pensar en usar una marca o un relleno, pero como vimos anteriormente, esas propiedades no se pueden aplicar con ::marker. ¡Qué frustrante! También tenga en cuenta el contador de CSS list-item. Eso no se definió en ningún otro lugar del CSS; es un contador integrado que todos los navegadores (que comprenden los contadores CSS) utilizan para contar elementos de lista, como los de 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 ::marker, o puede hacerlo con el nuevo soporte de varios navegadores para valores de cadena en el list-style-type propiedad.
li.warning {
list-style-type:"⚠";
}Eso es lo nuevo en el mundo de los marcadores de lista. 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 que se espera que sean aún mejores en el futuro. ¡Háganos saber si se le ocurren algunos marcadores inteligentes!