Viñetas personalizadas con CSS :: marcador

Gracias a Igalia, patrocinada por Bloomberg, finalmente podemos guardar nuestros trucos para las listas de estilos. ¡Ver!

Gracias a CSS ::marker podemos cambiar el contenido y algunos de los estilos de viñetas y números.

Compatibilidad del navegador

Cuando Lanzamientos de Chromium 86, ::marker será compatible con Firefox para escritorio y Android, Safari de escritorio e iOS Safari, y navegadores de escritorio y Android basados ​​en Chromium. Ver MDN Compatibilidad del navegador tabla de actualizaciones.

Pseudo-elementos

Considere la siguiente lista desordenada HTML esencial:

<ul>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit</li>
<li>Dolores quaerat illo totam porro</li>
<li>Quidem aliquid perferendis voluptates</li>
<li>Ipsa adipisci fugit assumenda dicta voluptates nihil reprehenderit consequatur alias facilis rem</li>
<li>Fuga</li>
</ul>

Lo que da como resultado la siguiente representación poco sorprendente:

El punto al comienzo de cada <li> ¡El artículo es gratis! El navegador está dibujando y creando un cuadro de marcador generado para usted.

Hoy estamos emocionados de hablar sobre el ::marker pseudoelemento, que le da la capacidad de diseñar el elemento de viñeta que los navegadores crean para usted.

Creando un marcador

los ::marker El cuadro de marcador de pseudo-elemento se genera automáticamente dentro de cada elemento del elemento de la lista, antes del contenido real y el ::before pseudo-elemento.

li::before {
content: "::before";
background: lightgray;
border-radius: 1ch;
padding-inline: 1ch;
margin-inline-end: 1ch;
}

Normalmente, los elementos de la lista son <li> Elementos HTML, pero otros elementos también pueden convertirse en elementos de lista con display: list-item.

<dl>
<dt>Lorem</dt>
<dd>Lorem ipsum dolor sit amet consectetur adipisicing elit</dd>
<dd>Dolores quaerat illo totam porro</dd>
<dt>Ipsum</dt>
<dd>Quidem aliquid perferendis voluptates</dd>
</dl>

dd {
  display: list-item;
  list-style-type: "🤯";
  padding-inline-start: 1ch;
}

Peinar un marcador

Hasta ::marker, las listas se pueden diseñar usando list-style-type y list-style-image para cambiar el símbolo del elemento de la lista con 1 línea de CSS:

li {
list-style-image: url(/right-arrow.svg);
list-style-type: '👉';
padding-inline-start: 1ch;
}

Eso es útil, pero necesitamos más. ¿Qué hay de cambiar el color, el tamaño, el espaciado, etc.? Ahí es donde ::marker viene al rescate. Permite la orientación individual y global de estos pseudoelementos de CSS:

li::marker {
color: hotpink;
}
li:first-child::marker {
font-size: 5rem;
}

los list-style-type La propiedad ofrece posibilidades de estilo muy limitadas. los ::marker pseudoelemento significa que puede apuntar al marcador en sí y aplicarle estilos directamente. Esto permite un mayor control.

Dicho esto, no puede utilizar todas las propiedades CSS en un ::marker. La lista de propiedades permitidas y no permitidas se indica claramente en la especificación. Si prueba algo interesante con este pseudoelemento y no funciona, la lista a continuación es su guía sobre lo que se puede y no se puede hacer con CSS:

CSS permitido ::marker Propiedades

• animation-*
• transition-*
• color
• direction
• font-*
• content
• unicode-bidi
• white-space

Cambiar el contenido de un ::marker está hecho con content Opuesto a list-style-type. En el siguiente ejemplo, el estilo del primer elemento se usa list-style-type y el segundo con ::marker. Las propiedades en el primer caso se aplican a todo el elemento de la lista, no solo al marcador, lo que significa que el texto se anima al igual que el marcador. Cuando usas ::marker podemos apuntar solo al cuadro de marcador y no al texto.

Además, tenga en cuenta cómo los no permitidos background la propiedad no tiene ningún efecto.

li:nth-child(1) {
list-style-type: '?';
font-size: 2rem;
background: hsl(200 20% 88%);
animation: color-change 3s ease-in-out infinite;
}

li:nth-child(2)::marker {
content: '!';
font-size: 2rem;
background: hsl(200 20% 88%);
animation: color-change 3s ease-in-out infinite;
}

Cambiar el contenido de un marcador

Estas son algunas de las formas en que puede diseñar sus marcadores.

Cambiar todos los elementos de la lista

li {
list-style-type: "😍";
}
li::marker {
content: "😍";
}

Cambiar solo un elemento de la lista

li:last-child::marker {
content: "😍";
}

Cambiar un elemento de la lista a SVG

li::marker {
content: url(/heart.svg);
content: url(#heart);
content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='24' width='24'><path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' fill='none' stroke='hotpink' stroke-width='3'/></svg>");
}

Cambio de listas numeradas
¿Qué tal un <ol> ¿aunque? El marcador en un elemento de lista ordenado es un número y no una viñeta por defecto. En CSS, estos se llaman Contadoresy son bastante poderosos. Incluso tienen propiedades para establecer y restablecer donde comienza y termina el número, o cambiarlos a números romanos. ¿Podemos diseñar eso? Sí, e incluso podemos usar el valor del contenido del marcador para crear nuestra propia presentación de numeración.

li::marker {
content: counter(list-item) "› "; 
color: hotpink;
}

Depuración

Chrome DevTools está listo para ayudarlo a inspeccionar, depurar y modificar los estilos que se aplican a ::marker pseudo elementos.

Estilo futuro de pseudoelementos

Puede obtener más información sobre :: marcador en:

Es genial tener acceso a algo que ha sido difícil de diseñar. Es posible que desee poder diseñar otros elementos generados automáticamente. Podrías estar frustrado con <details> o el indicador de autocompletar de entrada de búsqueda, cosas que no se implementan de la misma manera en todos los navegadores. Una forma de compartir lo que necesita es creando un deseo en https://webwewant.fyi.