() translation by (you can also view the original English article)
Muchas librerías de JavaScript son desarrolladas para darnos componentes interactivos adicionales en sitios web. De la misma manera, HTML5 también ha interpretado un número de componentes interactivos populares, convirtiéndolos en elementos web nativos. En este artículo vamos a examinar uno de aquellos elementos, llamado <details> (y al hacer esto, también el elemento <summary>), el cual nos provee con una función interactiva similar a la de un acordeón.
Usando <details> y <summary>
El elemento <details> se puede encontrar en cualquier lugar dentro de <body>. Para dar un ejemplo, podríamos usarlo de esta forma:
1 |
<details>
|
2 |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, impedit.</p> |
3 |
</details>
|
Aquí vemos al elemento <details> conteniendo un párrafo, resaltando su similitud con otros elementos HTML de seccionamiento. Define una sección semántica que puede contener elementos secundarios, como imágenes en conjunto con el elemento <figure>, elementos de formulario como <input> y <textarea>, e incluso una jerarquía con más <details>.
La única diferencia significante yace en cómo los buscadores representan este elemento. Buscadores como Chrome, Safari y la última versión de Opera muestran una pequeña flecha en forma de triángulo junto a la palabra “Details”.
El elemento <details> funciona como un acordeón, donde el contenido permanece inicialmente escondido. Haciendo clic sobre la flecha o el texto adjunto revela el contenido. También se puede seleccionar con la tecla Tab y revelar con las teclas Space o Enter.
Nota: Accessible Culture tiene un extenso artículo acerca de la accesibilidad en Screen Readers y details/summary.
El Estado Abierto
Una vez abierto el elemento <details>, ver el código fuente revelará que el buscador ha añadido el atributo “open” durante este estado. Podemos añadir dicho atributo manualmente para que el elemento <details> esté abierto por defecto.
1 |
<details open> |
2 |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, impedit.</p> |
3 |
</details>
|
El Elemento Summary
El elemento <details> viene con uno extra llamado <summary>, con el propósito de usarlos en conjunto. Sin embargo, usar <summary> queda totalmente opcional.
¿Pero qué sucede si decides usarlo?
1 |
<details open> |
2 |
<summary>Hello World</summary> |
3 |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, impedit.</p> |
4 |
</details>
|
En el ejemplo superior, el texto predeterminado “Details” va a ser reemplazado por “Hello World”.
Anidamiento
Como mencionado previamente, el elemento <details> puede anidar otros elementos <details>, así:
1 |
<details>
|
2 |
<summary>Hello World</summary> |
3 |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, impedit.</p> |
4 |
<details>
|
5 |
<summary>Hi, How are you?</summary> |
6 |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, impedit.</p> |
7 |
</details>
|
8 |
</details>
|
Esto presenta un problema visual debido al estilo predeterminado del buscador (algo que no sucedería con, por ejemplo, listas jerarquizadas). Como puede ser visto en el ejemplo a continuación, el elemento anidado (hijo) <details> carece de un margen izquierdo, lo cual no permite tener una visión clara sobre la jerarquía.
No obstante, esto puede ser arreglado con unos cuantos simples estilos CSS, así que veamos cómo añadirlos:
Añadiendo Estilos CSS a Details
Los elementos <details> y <summary> aceptan estilos CSS como cualquier otro elemento de bloque; a través de un selector de elemento, una clase o un ID:
1 |
details { |
2 |
padding: 15px; |
3 |
background-color: #f6f7f8; |
4 |
margin-bottom: 20px; |
5 |
}
|
Además, puedes usar el selector de atributo para especificar estilos al estado abierto (“open”).
1 |
details[open] { |
2 |
/* the style goes here */ |
3 |
}
|
El elemento <summary> también recibe estilos CSS. Hablando de eso, si pasas el cursor sobre un elemento cliqueable como botones o enlaces, el cursor se convertirá en un puntero. Este no es el caso con <summary>, a pesar de también ser un elemento cliqueable: el cursor se convertirá en el cursor de texto, lo cual se siente algo anormal. Por eso quizás quieras definir un estilo de cursor para <summary>, así:
1 |
summary { |
2 |
cursor: pointer; |
3 |
}
|
Dándole Estilo a la Flecha
Y ahora a la pregunta que seguramente tenías en la cabeza: ¿Se puede modificar aquella flecha triangular? Todavía no existe un estándar, pero WebKit tiene un pseudo-elemento para esto: ::-webkit-details-marker. Con esto podemos cambiar los estilos predeterminados de flechas, como el color, el fondo y también el tamaño.
1 |
summary::-webkit-details-marker { |
2 |
color: #fff; |
3 |
background-color: #000; |
4 |
}
|
Reemplazar la flecha directamente a través de ::-webkit-details-marker no es posible – por lo menos no al escribir este artículo.
1 |
summary::-webkit-details-marker {
|
2 |
display: none; |
3 |
} |
4 |
summary:before {
|
5 |
content: "\2714"; /* the new icon */ |
6 |
color: #696f7c; |
7 |
margin-right: 5px; |
8 |
} |
Soporte de Buscadores
El soporte para ambos elementos ha mejorado mucho en los últimos dos años. En el 2011 y 2012 solamente Chrome podía representar estos elementos – aunque la implementación sufría de algunos problemas de accesibilidad. Safari y Opera se han unido recientemente al club.
En cuanto a Firefox e Internet Explorer, existen algunas opciones polyfill para imitar la funcionalidad, como la desarrollada por Mathias Bynens: jQuery Details. A pesar de que esta opción requiere de jQuery, sigue pesando mucho menos que su equivalente: la librería de jQuery UI.
Una vez implementado, el proceso de añadir estilos CSS sigue siendo el mismo.
1 |
summary:before { |
2 |
content: "\25B8"; /* unicode character of the litle triangle */ |
3 |
color: #000; |
4 |
margin-right: 5px; |
5 |
}
|
Para más información acerca del soporte de buscadores visita caniuse.com.
Ejemplos de Uso
Probablemente ya has visto estos elementos en uso. Tiendas en línea, por ejemplo, suelen empacar las largas descripciones de sus productos en acordeones. O para filtrar resultados, como Payless.
Los elementos <details> y <summary> también son convenientes para organizar FAQs o para presentar artículos especiales, como suele ser visto en tablas de precios. Siéntanse libres de abusar de la demostración que he creado aquí.
Conclusión
Como Aaron Lumsden dijo en éste artículo [traducido]:
"sitios web están asimilándose cada vez más a aplicaciones móbiles y se están basando cada vez más en datos"
Por eso este elemento es realmente apreciado. Algún día, quizás con la llegada de componentes web, la creación de una página o aplicación web va a dejar de ser tan dependiente de JavaScript al añadir algo como un simple acordeón.
Así que, ¿ya has usado <details> y <summary> en tu sitio web?
¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!
