Todo lo que necesita saber sobre la brecha después del marcador de lista

Todo lo que necesita saber sobre la brecha después del marcador de lista |  consejos CSS

 

Estaba leyendo "Creative List Styling" en el blog web.dev de Google y noté algo extraño en uno de los ejemplos de código en el ::marker parte del artículo. Los marcadores de lista integrados son viñetas, números ordinales y letras. EL ::marker El pseudo-elemento nos permite diseñar estos marcadores o reemplazarlos con un carácter o imagen personalizados.

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

El ejemplo que me llamó la atención utiliza un icono SVG como marcador personalizado para los elementos de la lista. Pero también hay un solo espacio (" ") en el valor CSS junto a url() función. El propósito de este espacio parece ser insertar un espacio después del marcador personalizado.

Cuando vi este código, inmediatamente me pregunté si había una mejor manera de crear la brecha. Agregar un espacio a content parece más una solución alternativa que la solución óptima. CSS proporciona margin Y padding y otras formas estándar de espaciar elementos en la página. ¿Ninguna de estas propiedades podría usarse en esta situación?

 

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

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

No funcionó. Como resulta, ::marker solo admite un pequeño conjunto de propiedades CSS principalmente relacionadas con el texto. Por ejemplo, puede cambiar el font-size Y color del marcador y establezca un marcador personalizado configurando content a una cadena o URL, como se muestra arriba. Pero margin Y padding Las propiedades no son compatibles, por lo que configurarlas no tiene ningún efecto. Que decepción.

¿Podría ser realmente que un carácter de espacio sea la única forma de insertar un espacio después de una etiqueta personalizada? necesitaba saber Mientras investigaba este tema, hice algunos descubrimientos interesantes que me gustaría compartir en este artículo.

Agregar relleno y márgenes

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

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

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

Tenga en cuenta que incluso cuando el elemento de la lista es padding-left Este 0px, todavía hay un espacio mínimo después del marcador. Esta brecha no se puede reducir con margin O padding. La longitud exacta del espacio mínimo depende del navegador.

Las tres primeras propiedades: UL margin-left, UL padding-left, LI margin-left. Cuarta propiedad: LI padding-left.
Las tres primeras propiedades empujan todo el elemento de la lista (incluido el marcador) hacia la derecha. La cuarta propiedad solo empuja el contenido del elemento de la lista hacia la derecha.

Básicamente, el contenido del elemento de la lista se coloca a una distancia mínima específica del navegador desde el marcador, y esta distancia se puede aumentar aún más agregando un padding-left para <li>.

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

Mover marcador dentro del elemento de la lista

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

Una lista de compras. Cada elemento tiene un borde inferior delgado que se extiende desde el borde izquierdo hasta el borde derecho de la lista.
El marcador de lista se coloca dentro del elemento de la lista, de modo que el borde inferior del elemento de la lista pueda extenderse hasta el borde izquierdo del cuadro de lista.

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

Como se puede ver, padding-left seguro <li> ahora aumenta el espaciado a la IZQUIERDA del marcador Esto significa que perdimos la capacidad de aumentar la brecha después del marcador. En esta situación, sería útil poder agregar margin-right En ::marker sí mismo, pero no funciona, como establecimos anteriormente.

Las cuatro propiedades: UL margin-left, UL padding-left, LI margin-left, LI padding-left.
Las cuatro propiedades empujan todo el elemento de la lista hacia la derecha. El espacio mínimo no se puede aumentar por medios estándar.

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

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

Seis elementos de la lista con diferentes espacios entre el marcador y el texto.
Solo Firefox mantiene el mismo tamaño de espacio entre los dos modos de posicionamiento del marcador. Esto puede considerarse un problema de interoperabilidad (interoperabilidad) del navegador.

Para resumir, vaya a list-style-position: inside introduce dos problemas. Ya no puede aumentar la brecha a través de padding-left seguro <li>y el tamaño de la brecha es inconsistente entre navegadores.

Finalmente, veamos qué sucede cuando reemplazamos el marcador de lista predeterminado con un marcador personalizado.

Cambiar a un marcador personalizado

Hay dos formas de definir un marcador personalizado:

  • list-style-type Y list-style-image propiedades
  • content propiedad en el ::marker pseudo-elemento

EL content la propiedad es más potente. Por ejemplo, nos permite utilizar el counter() función para acceder al número ordinal del elemento de la lista (el valor predeterminado list-item mostrador) y decóralo con cuerdas personalizadas.

Desafortunadamente, Safari no es compatible con la content propiedad en ::marker de nuevo (error de WebKit). Por esta razón, usaré el list-style-type propiedad para establecer el marcador personalizado. Todavía puedes usar el ::marker selector para diseñar la etiqueta personalizada declarada a través de list-style-type. Este aspecto de ::marker es compatible con Safari.

Cualquier carácter Unicode puede servir potencialmente como un marcador de lista personalizado, 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 apellido punto de código palabra clave CSS
Pelota U+2022 disc
bola triangular U+2023
Chip de guión U+2043
Bola negra a la izquierda U+204C
Bola negra a la derecha U+204D
bola inversa U+25D8
bola blanca U+25E6 circle
Bola de corazón floral de giro inverso U+2619
Bala pesada rotada del corazón negro U+2765
Disparo de bola de corazón floral U+2767
Viruta blanca rodeada U+29BE
⦿ Bala en un círculo U+29BF

Nota: CSS square la palabra clave no tiene el carácter "Bullet" correspondiente en Unicode. El carácter más cercano es el emoji de Cuadrado negro pequeño (▪️) (U+25AA).

Ahora veamos qué sucede cuando cambiamos el marcador de lista predeterminado a list-style-type: "•" (U+2022 Pelota). Es el mismo carácter que la viñeta predeterminada, por lo que no debería haber grandes diferencias de representación. En mi página de prueba, habilite el list-style-type y observe cualquier cambio en el marcador.

Como puedes ver, hay dos cambios importantes:

  1. Ya no hay un espacio mínimo después de la marca.
  2. La pelota se hizo más pequeña, como si regresara a un lugar más pequeño. font-size.

De acuerdo con CSS Counter Styles Level 3, el marcador de lista predeterminado (disc) debe ser “similar a • U+2022 BULLET". Parece que los navegadores aumentan 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.

:marcador seleccionado en el inspector. Fuentes utilizadas: -moz-bullet-font.
El panel "Fuentes" del inspector DOM de Firefox revela la fuente especial.

¿Se puede resolver el problema del tamaño pequeño con CSS? En mi página de prueba, habilite el estilo de marcador y observe lo que sucede cuando cambia el font-size, line-heightY font-family del marcador

Como puede ver, al aumentar la font-size provoca una desalineación vertical del marcador personalizado, y esto no se puede corregir disminuyendo el line-height. EL vertical-align propiedad, que podría resolver fácilmente este problema, no se admite en ::marker.

Pero, ¿has notado que cambiar el font-family puede hacer crecer el marcador? Intenta configurarlo en Tahoma. Esto podría ser una solución alternativa suficiente para el problema del tamaño pequeño, aunque no he probado qué fuente funciona mejor en los principales navegadores y sistemas operativos.

También puede haber notado que el error de Chromium ya no ocurre al colocar el marcador dentro del elemento de la lista. Esto significa que una etiqueta personalizada puede servir como solución para este error. Y eso me lleva al problema principal y por qué comencé a investigar este tema. Si define un marcador personalizado y lo coloca dentro del elemento de la lista, no hay espacio después del marcador y no hay forma de insertar un espacio por medios estándar.

  1. No hay espacio mínimo después de los marcadores personalizados.
  2. ::marker no puedo soportar padding O margin.
  3. padding-left seguro <li> no aumenta el espacio ya que el marcador está posicionado inside.

Resumen

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

  1. Los navegadores aplican un valor predeterminado padding-inline-start de 40px para <ul> Y <ol> elementos.
  2. Hay un espacio mínimo después de los marcadores de lista incorporados (disc, decimal, etc.). No hay un espacio mínimo después de las etiquetas personalizadas (cadena o URL).
  3. La longitud del espacio se puede aumentar agregando un padding-left para <ul>pero solo si el marcador se coloca fuera del elemento de la lista (el modo predeterminado).
  4. Los marcadores de cadena personalizados tienen un tamaño predeterminado más pequeño que los marcadores integrados. Cambiar el font-family seguro ::marker puede aumentar de tamaño.

Conclusión

Mirando el código de muestra desde el principio del artículo, creo que ahora entiendo por qué hay un espacio en el content valor. Simplemente no hay mejor manera de insertar un espacio después del marcador SVG. Esta es una solución que es necesaria porque ninguna cantidad de margin Y padding puede crear un espacio después de un marcador personalizado colocado dentro del elemento de la lista. A margin-right seguro ::marker podría hacer eso fácilmente, pero eso no es compatible.

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

 

Si quieres conocer otros artículos parecidos a Todo lo que necesita saber sobre la brecha después del marcador de lista puedes visitar la categoría Estilo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas