Las listas ordenadas se encuentran entre los elementos más antiguos y semánticamente más ricos en HTML. Siempre que necesite comunicar secuencia o clasificación, el <ol> etiqueta está ahí para ayudar. La apariencia predeterminada del <ol> La etiqueta presenta números junto a cada elemento de la lista. Puedes usar el list-style-type en CSS para cambiar el valor predeterminado para usar números romanos o las letras del alfabeto. Si te sientes exótico, incluso puedes usar la numeración de otras culturas como el hebreo o el griego. La lista completa de valores disponibles está bien documentada y es fácil de usar.
Recientemente, vi la oportunidad de usar dados en lugar de números para varias listas ordenadas que explican las características de un juego HTML5 que creé llamado Triple Score Bopzee. Para lograr mi objetivo, primero experimenté con una técnica ahora familiar para usar un archivo de imagen pequeño como fondo para el li::before selector en una lista. Un cambio que hice al procedimiento habitual es que decidí evitar list-style-type: none a favor de usar list-style-type: decimal y ambientación list-style-image a un GIF transparente 1 × 1. Ese pequeño cambio ayuda a que la página pase las pruebas de accesibilidad porque los lectores de pantalla seguirán viendo la lista como una lista numerada válida.
Creé un bolígrafo para demostrar esta técnica clásica utilizando GIF de números que contienen las bolas utilizadas en cuatro deportes principales.
Vea la lista ordenada por lápiz con imágenes de Steven Estrella (@sgestrella) en CodePen.
Esta técnica habría funcionado para mis necesidades en el sitio web de bopzee, pero sentí curiosidad por saber cómo podría hacerlo sin usar ninguna imagen. La respuesta fue usar los símbolos Unicode 2680 a 2685 para los seis dados. Creé un selector de clases llamado “dicey” y usé el n-ésimo niño y antes de los pseudo selectores para posicionar y elegir el carácter Unicode para cada elemento de la lista. Agregué un enlace a la biblioteca Normalize.css para suavizar las sutiles diferencias del navegador.
Aquí está el bolígrafo para la lista de dados completa:
Consulte las listas ordenadas por lápiz con dados Unicode de Steven Estrella (@sgestrella) en CodePen.
Entonces, para una lista como esta:
<ol class="dicey">
<li>I rolled a one.</li>
<li>I rolled a two.</li>
<li>I rolled a three.</li>
<li>I rolled a four.</li>
<li>I rolled a five.</li>
<li>I rolled a six.</li>
</ol>Este fue el truco:
/* Still use a decimal based list for a11y */
ol {
margin-left:40px;
list-style:decimal url(https://css-tricks.com/data:image/gif;base64,https://css-tricks.com/R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}
.dicey li:nth-child(1n):before {position:absolute;left:-1em;}
/* Actually set markers with pseudo element unicode */
.dicey li:nth-child(1):before {content: "2680";}
.dicey li:nth-child(2):before {content: "2681";}
.dicey li:nth-child(3):before {content: "2682";}
.dicey li:nth-child(4):before {content: "2683";}
.dicey li:nth-child(5):before {content: "2684";}
.dicey li:nth-child(6):before {content: "2685";}Inicialmente, no especifiqué la fuente que mostraría los símbolos Unicode. El resultado no fue malo porque hoy en día todos los navegadores web modernos y dispositivos habilitados para la web tienen acceso a al menos una fuente que contiene los símbolos necesarios del bloque Unicode llamado “Símbolos varios”. Hubo alguna variación en la apariencia, pero fue bastante tolerable. Pero sabía que si quería un control real, tendría que encontrar una fuente web gratuita. Identifiqué una fuente llamada DejaVu que funcionaría revisando la lista de fuentes admitidas en la tabla de glifos para el bloque de Símbolos varios.
Una vez que supe el nombre de la fuente, pude crear un kit de WebFont en Font Squirrel. Al crear un kit de WebFont, es importante elegir la opción “Sin subconjuntos” para asegurarse de que las fuentes contengan todas las bondades Unicode que necesita para sus iconos. O si le preocupa el tamaño del archivo, puede descargar la fuente TrueType u OpenType original, luego use el generador WebFont de Font Squirrel en modo experto para incluir solo el rango Unicode 2600 a 26FF que captura todos los caracteres en el bloque Unicode llamado “Símbolos varios”. “
Una vez que comienzas con Unicode, la diversión nunca se detiene. Pasé demasiado tiempo explorando los muchos íconos que forman parte de la fuente DejaVu (lista completa). Allí encontré iconos para naipes, signos astrológicos, flechas, balas, símbolos musicales, formas geométricas y una gran cantidad de garabatos que no puedo ni empezar a nombrar. Así que tomé algunos de mis favoritos y creé un lápiz que contenía varios tipos diferentes de listas.
El bolígrafo completo:
Consulte las listas ordenadas por lápiz con símbolos Unicode de Steven Estrella (@sgestrella) en CodePen.
¿Qué pasa con las listas desordenadas?
Puedes dar tu <ul> elementos del mismo gran amor Unicode utilizando una forma modificada de esta técnica. Aquí hay un bolígrafo para comenzar:
Consulte la Lista desordenada de Pen con viñetas Unicode de Steven Estrella (@sgestrella) en CodePen.
¿Qué pasa con el futuro?
Hay una nueva regla CSS llamada @counter-style lo que nos permitirá crear más fácilmente estilos de contador personalizados para listas ordenadas, especificando los símbolos que se utilizarán, el rango de la lista y muchas otras opciones. La especificación CSS Counter Styles Level 3 es ahora una recomendación candidata en el W3C, pero a partir de mayo de 2017 solo Firefox la admite (con algunos problemas). Esperaría que Chrome, Edge y Safari agreguen soporte pronto, pero la versión final de Internet Explorer (versión 11) probablemente nunca lo tendrá. Entonces, si tiene que admitir ese navegador, se quedará atrapado con trucos como el que se describe en esta publicación hasta que la gente deje de usar IE11 (¿quizás el año 2020?).
Tenga en cuenta que el @counter-style La regla no proporciona ninguna forma de diseñar el símbolo del contador usando CSS. Entonces, incluso cuando es adoptado por todos los navegadores, puede haber casos de uso para soluciones alternativas como la que se presenta aquí. Puede leer más sobre @ counter-style en MDN. Aquí hay un bolígrafo con una demostración.
Asegúrese de usar Firefox para ver el efecto:
Vea la demostración de estilo de contador de Pen @ (Firefox solo a partir de mayo de 2017) de Steven Estrella (@sgestrella) en CodePen.
Sobre los hombros de gigantes
Todos aprendemos del trabajo de otros y deseo dar crédito al trabajo de varios escritores cuyos artículos encontré informativos al preparar este artículo.
- Jose Vargas: Estilos CSS de lista ordenada
- Roger Johannson: Estilo de números de lista ordenados
- David McFarland: Números de lista personalizados
- Chris Coyier: Codificación Base 64 de 1x1px GIF transparente
- Chris Coyier: Numeración con estilo
Aquí hay un lápiz con la lista desordenada anterior que usa varios estilos de íconos diferentes.
Consulte la Lista de créditos de lápiz con viñetas Unicode de Steven Estrella (@sgestrella) en CodePen.