Consejo rápido: el elemento de detalles impresionantes

Una de mis nuevas etiquetas HTML5 favoritas, que se ha integrado recientemente en Chrome (a partir de la versión 12), es el elemento de detalles. Te mostraré cómo usarlo en el consejo rápido de hoy.

¿Qué hace la etiqueta de detalles?

Básicamente, nos permite mostrar y ocultar contenido con solo hacer clic en un botón. Seguro que estás familiarizado con este tipo de efecto, pero, hasta ahora, siempre se había logrado con JavaScript. Imagina un encabezado con una flecha al lado y, cuando hagas clic en él, se verá información adicional a continuación. Al hacer clic en la flecha nuevamente, se oculta el contenido. Este tipo de funcionalidad es muy común en las páginas de preguntas frecuentes.

Aquí hay un ejemplo de dos minutos de este tipo de efecto. (Escribe Control + Intro para procesar el JavaScript).

El elemento de detalles nos permite omitir el JavaScript por completo. O, mejor dicho, eventualmente lo hará. El soporte del navegador todavía es un poco escaso.

Un ejemplo

Así que profundicemos y aprendamos a usar esta nueva etiqueta. Comenzamos creando un nuevo elemento de detalles.

1

<details>

2

3

</details>

A continuación, debemos darle un título o un resumen del contenido.

1

<details>

2

	<summary> Who Goes to College? </summary>

3

</details>

De forma predeterminada, en los navegadores que comprenden el elemento de detalles, todo lo que contiene, excepto la etiqueta de resumen, estará oculto. Agreguemos un párrafo después del resumen.

1

<details>

2

	<summary> Who Goes to College? </summary>

3

  <p> Your mom. </p>

4

</details>

Continúa y prueba la demostración en Chrome 12 o superior (a partir del 17 de noviembre de 2011).

Bien, hagamos algo un poco más práctico. Quiero mostrar varios artículos de Nettuts+ usando el elemento de detalles. Primero creamos el marcado para un solo artículo.

1

<details>

2

   <summary>Dig Into Dojo</summary>

3

   <img src="https://d2o0t5hpnwv4c1.cloudfront.net/1086_dojo/dojo.jpg" alt="Dojo" />

4

   <div>

5

      <h3> Dig into Dojo: DOM Basics </h3>

6

      <p>Maybe you saw that tweet: “jQuery is a gateway drug. It leads to full-on JavaScript usage.” Part of that addiction, I contend, is learning other JavaScript frameworks. And that’s what this four-part series on the incredible Dojo Toolkit is all about: taking you to the next level of your JavaScript addiction.  			

7

     </p>

8

   </div>

9

</details>

A continuación, le daremos solo un toque de estilismo.

1

body { font-family: sans-serif; }

2

3

details {

4

  overflow: hidden;

5

  background: #e3e3e3;

6

  margin-bottom: 10px;

7

  display: block;

8

}

9

10

details summary {

11

  cursor: pointer;

12

  padding: 10px;

13

}

14

15

details div {

16

  float: left;

17

  width: 65%;

18

}

19

20

details div h3 { margin-top: 0; }

21

22

details img {

23

 float: left;

24

 width: 200px;

25

  padding: 0 30px 10px 10px;

26

}

Ten en cuenta que te estoy mostrando el estado abierto por conveniencia, pero, cuando se cargue la página, solo verás el texto de resumen.

Si prefieres estar en este estado de forma predeterminada, agrega el atributo abierto al elemento de detalles: <detalles abiertos>

Diseñando la Flecha

No es tan sencillo diseñar la flecha como podríamos esperar. No obstante, es posible; la clave es usar la pseudoclase -webkit-details-marker.

1

details summary::-webkit-details-marker {

2

  color: green; 

3

  font-size: 20px;

4

}

Si necesitas usar un icono personalizado, posiblemente la solución más fácil sea ocultar la flecha (usando la pseudoclase anterior) y luego aplicar una imagen de fondo al elemento de resumen, o usar los pseudo elementos :después o :antes.

Ver el proyecto final.

Conclusión

Ciertamente es un efecto simple, pero seguro que es bueno tener una característica tan común incorporada. Hasta que podamos usar de manera confiable el elemento de detalles en todos los navegadores, puedes usar este polyfill para brindar soporte de respaldo. Una nota final: en el momento de escribir este artículo, no parece haber una forma de alternar los contenidos con un teclado. Esto podría presentar algunos problemas de accesibilidad.