Todo lo que necesita saber sobre el espacio después de la etiqueta de lista | trucos CSS

estaba leyendo "Estilo de lista creativa" en el blog web.dev de Google y notó algo extraño en uno de los ejemplos de código en ::marker sección del artículo. Los marcadores de lista integrados son viñetas, números de serie y letras. ::marker el pseudo-elemento nos permite diseñar estas etiquetas o reemplazarlas con un símbolo o imagen personalizada.

::marker {
  content: url('/marker.svg') ' ';
}

El ejemplo que me llamó la atención utiliza un icono SVG como etiqueta personalizada para los elementos de la lista. Pero también hay un carácter de espacio (" ") en el valor CSS para url() El propósito de este espacio parece ser insertar un espacio después de la etiqueta personalizada.

Cuando vi este código, inmediatamente me pregunté si había una mejor manera de crear la brecha. content parece una solución alternativa en lugar de una solución óptima. CSS proporciona margin y padding y otras formas estándar de asignar elementos de página ¿Ninguna de estas propiedades se puede usar en esta situación?

Primero intenté reemplazar el carácter de espacio con un margen adecuado:

::marker {
  content: url('/marker.svg');
  margin-right: 1ch;
}

Eso no funcionó. Como se vio despues, ::marker solo admite un un pequeño conjunto de propiedades CSS en su mayoría relacionadas con el textoPor ejemplo, puede cambiar font-size y color de la etiqueta y defina una etiqueta personalizada configurando content a una cadena o URL como se muestra arriba margin y padding las propiedades son No soportadopor lo que configurarlos no tiene ningún efecto. Que decepcion.

¿Podría un espacio ser realmente la única forma de insertar un espacio después de una etiqueta de usuario? Tenía que averiguarlo. Mientras investigaba este tema, hice varios descubrimientos interesantes que me gustaría compartir en este artículo.

Adición de almohadillas y márgenes

Primero, confirmemos lo que margin y padding hacer en <ul> y <li> elementos. Creé una página de prueba para este propósito. Arrastre los controles deslizantes apropiados y observe el efecto en la distancia a cada lado del marcador de lista. Sugerencia: use el botón Restablecer generosamente para devolver todos los controles a sus valores originales.

Nota: Los navegadores aplican la configuración predeterminada padding-inline-left en 40px a <ol> y <ul> elementos La lógica padding-inline-left la propiedad es equivalente a la física padding-left propiedad en sistemas de escritura con dirección incorporada de izquierda a derecha En este artículo usaré propiedades físicas para simplificar.

Como ves, padding-left En <li> aumenta el espacio después del marcador de lista Las otras tres propiedades controlan la distancia a la izquierda del marcador, en otras palabras, la sangría del elemento de lista.

Tenga en cuenta que incluso cuando el elemento de la lista es padding-left es 0pxtodavía hay un espacio mínimo después del marcador. Esta brecha no puede ser reducida por margin o padding。 La longitud exacta del espacio mínimo depende del navegador.

Para resumir, el contenido del elemento de la lista se coloca a una distancia mínima específica del navegador de la etiqueta, y esta brecha se puede aumentar aún más agregando padding-left a <li>.

A continuación, veamos qué sucede cuando posicionamos el marcador. adentro el elemento de la lista.

Mover el marcador dentro del elemento de la lista

El list-style-position property toma dos palabras clave: outsideque es el predeterminado, y insideque mueve el marcador dentro del elemento de la lista. Este último es útil para crear diseños con elementos de lista de ancho completo.

Si el marcador es ahora adentro el elemento de la lista, ¿eso significa que padding-left En <li> ya no aumenta el hueco tras el marcador? Vamos a averiguar. En mi página de prueba incluyen list-style-position: inside a través de la casilla de verificación ¿Cómo están los cuatro? padding y margin propiedades afectadas por este cambio?

Como ves, padding-left En <li> ahora aumenta la distancia a A la izquierda en el marcador. Esto significa que hemos perdido la capacidad de aumentar la brecha después de la etiqueta. En esta situación, sería útil poder agregar margin-right a ::marker en sí mismo, pero eso no funciona como descubrimos anteriormente.

Además, hay Errores de cromo lo que causa la brecha después de la etiqueta triple después de cambiar a inside De forma predeterminada, la longitud del espacio es aproximadamente un tercio del tamaño del texto. Así que por defecto font-size en 16pxla diferencia es de aprox 5.5pxDespués de cambiar a insidela brecha se ensancha 16px en cromo. Este error afecta disc, circley square marcadores pero marcadores no ordinales.

La siguiente imagen muestra la representación predeterminada de los marcadores de lista posicionados interna y externamente en tres de los principales navegadores macOS. Para su conveniencia, alineé horizontalmente todos los elementos de la lista por sus etiquetas para que sea más fácil comparar las diferencias en los tamaños de los espacios.

Para resumir, vaya a list-style-position: inside introduce dos problemas. Ya no podemos aumentar la diferencia por padding-left En <li>y el tamaño del espacio es incompatible entre navegadores.

Finalmente, veamos qué sucede cuando reemplazamos la etiqueta de lista predeterminada con una etiqueta personalizada.

Cambiar a etiqueta personalizada

Hay dos formas de definir una etiqueta de usuario:

• list-style-type y list-style-image Propiedades
• content propiedad de ::marker pseudo elemento

El content la propiedad es más poderosa. Por ejemplo, nos permite usar counter() función para acceder al número de secuencia de un elemento de la lista (el implícitamente list-item encimera) y decóralo con cuerdas personalizadas.

Desafortunadamente, Safari no lo admite. content propiedad de ::marker más (Errores de WebKitPor esta razón usaré list-style-type propiedad para definir una etiqueta de usuario. Todavía puedes usar ::marker selector para diseñar la etiqueta personalizada declarada a través de list-style-typeEste aspecto de ::marker es compatible con Safari.

Cualquier carácter Unicode puede servir potencialmente como una etiqueta de lista personalizada, pero solo un pequeño conjunto de caracteres en realidad tiene "Bullet" en su nombre oficial, así que pensé en compilarlos aquí como referencia.

personaje	nombre	punto de código	Palabras clave de CSS
•	Balas	U+2022	disc
‣	Bala triangular	U+2023
⁃	bala de guión	U+2043
⁌	Bala negra a la izquierda	U+204C
⁍	Bala negra a la derecha	U+204D
◘	Bala inversa	U+25D8
◦	bala blanca	U+25E6	circle
☙	Bala con corazón floral arremolinado	U+2619
❥	Bala pesada girada con un corazón negro	U+2765
❧	Corazón floral arremolinado	U+2767
⦾	Viñeta blanca bordeada	U+29BE
⦿	bala redonda	U+29BF

Nota: CSS square la palabra clave no tiene un carácter Unicode 'Bullet' correspondiente. El personaje que más se acerca es el emoticón Black Small Square (▪️) (U+25AA).

Ahora veamos qué sucede cuando reemplazamos la etiqueta de lista predeterminada con list-style-type: "•" (U+2022 Bala). Este es el mismo carácter que la viñeta predeterminada, por lo que no debería haber mucha diferencia en la representación. En mi página de prueba incluyen list-style-type opción y monitorear cualquier cambio en la etiqueta.

Como puede ver, hay dos cambios importantes:

1. Ya no hay un espacio mínimo después del marcador.
2. La bala se ha vuelto más pequeña, como si fuera dibujada más pequeña. font-size.

De acuerdo a Estilos de contador CSS nivel 3la etiqueta de lista predeterminada (disc) debe ser "similar a • U+2022 BULLET". Los navegadores parecen aumentar el tamaño de la viñeta predeterminada para que sea más legible. Firefox incluso usa una fuente especial, -moz-bullet-fontpara el marcador.

¿Se puede solucionar el problema del tamaño pequeño con CSS? En mi página de prueba, active el estilo de etiqueta y vea qué sucede cuando cambia font-size, line-heighty font-family en el marcador.

Como puede ver, el aumento de font-size hace que el marcador personalizado se desalinee verticalmente y esto no se puede solucionar reduciendo el line-height.El vertical-align propiedad que puede resolver fácilmente este problema no se admite en ::marker.

¿Pero notaste que el cambio de font-family puede hacer que el marcador aumente? Intenta configurarlo en TahomaEsta podría ser una solución lo suficientemente buena para el problema del tamaño pequeño, aunque no he probado qué fuente funciona mejor en los principales navegadores y sistemas operativos.

Es posible que también haya notado que el error de Chromium ya no ocurre cuando coloca la etiqueta dentro del elemento de la lista. Esto significa que una etiqueta personalizada puede servir como solución para este error. Y esto me lleva al problema principal y la razón por la que comencé a investigar este tema. Si define una etiqueta personalizada y la coloca dentro del elemento de la lista, no hay espacio después de la etiqueta y no hay forma de insertar un espacio por medios estándar.

1. No hay espacio mínimo después de las etiquetas personalizadas.
2. ::marker no soporta padding o margin.
3. padding-left En <li> no aumenta el espacio a medida que se coloca el marcador inside.

Resumen

Aquí hay un resumen de todos los hechos clave que mencioné en el artículo:

1. Los navegadores aplican la configuración predeterminada padding-inline-start en 40px a <ul> y <ol> elementos.
2. Hay un espacio mínimo después de las etiquetas de lista en línea (disc, decimaletc.) No hay espacio mínimo después de las etiquetas personalizadas (cadena o URL).
3. La longitud del espacio se puede aumentar agregando un padding-left a <ul>pero solo si el marcador se coloca fuera del elemento de la lista (el modo predeterminado).
4. Las etiquetas de cadena personalizadas tienen un tamaño predeterminado más pequeño que las etiquetas integradas font-family En ::marker puede aumentar de tamaño.

conclusión

Mirando hacia atrás en el ejemplo de código desde el principio del artículo, creo que ahora entiendo por qué hay un carácter de espacio en el content valor. Simplemente no hay mejor manera de insertar un espacio después de la etiqueta SVG. Esta es una solución que es necesaria porque ninguna cantidad margin y padding puede crear un espacio después de una etiqueta de usuario que se coloca dentro del elemento de la lista margin-right En ::marker puede hacerlo fácilmente, pero esto no es compatible.

Hasta ::marker agrega soporte para más propiedades, los desarrolladores web a menudo no tendrán más remedio que ocultar la etiqueta y emularla con ::before pseudo-elemento Tuve que hacer esto yo mismo recientemente porque no podía cambiar la etiqueta background-color.Esperemos que no tengamos que esperar demasiado por uno más potente. ::marker pseudo elemento.