htmlcinco

HTML 5, encontrá novedades, tutoriales y traducciones sobre este lenguaje.

Interactividad en HTML5: los elementos details y summary

Interactividad en HTML5: los elementos details y summary

Pensar en interactividad cuando hacemos un sitio web es, en la gran mayoría de los casos, pensar en Javascript (¿o en Flash?). Acordeones, pestañas o menús son algunos de los comportamientos que puede tener una página web. Ahora puedes hacer una de ellas con el uso HTML5… sin Javascript.

Generalmente, hacer cualquiera de las cosas antes mencionadas requiere Javascript o alguna de sus tantas librerías. Esto ya no será necesario, ya que los nuevos elementos details y summary nos brindan la posibilidad de mostrar o esconder contenido solamente con usar sus etiquetas de la forma correcta. Así es, además de proporcionar un valor semántico, estos elementos se convierten en interactivos. Aquí un código de ejemplo básico:

1
2
3
4
5
6
7
<details>
  <summary>Cliqueame para mostrar o esconder</summary>
  <p>Aquí va el contenido que se muestra o esconde dependiendo de nuestro
       clic. Recuerda, aquí no se está usando absolutamente nada de
       Javascript!
  </p>
</details>

Puedes ver un ejemplo de este código, siempre y cuando tengas la última versión de Chrome.

Utilizando el ejemplo anterior, el estado inicial del contenido es escondido, si queremos que el mismo sea abierto, solo debemos agregar el atributo open al elemento details.

Con estilo

Si, además de los obvios estilos como tamaño, tipo de letra o fondo; con la pseudo clase ::-webkit-details-marker podemos darle estilo a la pequeña flecha que indica el estado actual del contenido.

Veamos un código de ejemplo:

1
2
3
4
5
details summary::-webkit-details-marker {
    background: red;
    color: blue;
    font-size: 30px;
}

Puedes ver una demo del mismo código html con estilo.

¿Qué te parece este nuevo elemento?

Actualización: en el blog de Outbook publicaron un plugin en jQuery que simula la funcionalidad en los navegadores que todavía no la soportan.

Comparte conocimiento:
Tweet about this on Twitter0Share on LinkedIn0Share on Facebook0Share on Google+0
¿Quieres saber más?
¡Suscríbete a nuestro newsletter!

Respetamos tu privacidad y tu tiempo, no recibirás ningún tipo de correo basura.

9 comentarios para “Interactividad en HTML5: los elementos details y summary”

  1. angerrising dice:

    lo encontraré util a la hora que funcione en la gran mayoria de los navegadores, realizaré las pruebas a ver si lo hecho correr en firefox con algun plugin

  2. admin dice:

    Esperemos que tanto estos elementos como todos los nuevos y de utilidad que vayan apareciendo, sean soportados por la gran mayoría de navegadores lo antes posible. No tengo duda de que Firefox muy pronto soportará details y summary, el gran problema, como siempre, es Internet Explorer.

    Gracias a tu pregunta busqué una solución alternativa, aquí está: http://blog.outbook.es/desarrollo-web/jquery-soporte-de-elemento-details-en-html-5

    Saludos!

  3. Jonathan Lerma dice:

    Lo encuentro muy util, y la verdad, me importa muy poco si hay o no support de browsers para esto, el tema es que nosotros como desarrolladores siempre esperamos a que ellos nos den soporte en las etiquetas nuevas, pero si empujamos usandolas (en general a toda la tecnologia HTML5)son ellos los que se tienen que poner las pilas, asi como opera esta pensando en usar el motor de webkit para renderizar los estilos nuevos (que en este caso se da por pereza de “algunos” desarrolladores que no usan todos los prefijos, con lo que no estoy de acuerdo porque tampoco todo se tiene que centrar en webkit)asi podemos hacer que los navegadores se sienta empujados a apurar este proceso, HTML5 no es para el futuro, cuando haya esto o lo otro, HTML5 es ahora!

  4. j@vier dice:

    Jonathan,
    entiendo tu postura, a mi también me enoja que este tipo de cosas, tan buenas, solo funcionen en “ciertos” navegadores.

    Pero también tenemos que dar una solución (fallback como se le dice en inglés) a los usuario que usen navegadores que no soporten esto. Una solución que se puede usar es esa que da admin más arriba, con jquery.

    Lo que digo basicamente es que, no todos están en esta industria, no todos tienen porque saber que existen otros navegadores que no sean el maldito Internet Explorer.

    j@vier

  5. Alexander dice:

    En donde se aplica el código de estilo:

    details summary::-webkit-details-marker {
    background: red;
    color: blue;
    font-size: 30px;
    }

    Dentro de este codigo:

    Cliqueame para mostrar o esconder
    Aquí va el contenido que se muestra o esconde dependiendo de nuestro
    clic. Recuerda, aquí no se está usando absolutamente nada de
    Javascript!

  6. J. Bravo dice:

    Excelente aporte colegas, estaba batallanado para eliminar esa pequeña viñeta en forma de triangulo y pues con esto me naciò una idea, les agradezco.

  7. Alejandro dice:

    Hola, tengo un problema y es que al usar la etiqueta y meterle dentro una tabla, la tabla se oculta, pero debajo de la etiqueta details (cuando ésta está contraída) me reserva un espacio en la web de aproximadamente el 50% de lo que ocupa la tabla al desplegarse. Alguien sabe porque sucede esto?

  8. kkck dice:

    Graciasssssssssss son lo maximooooooooo

  9. Javi dice:

    Buenas recientemente e iniciado una petición en change.org para que añadan estas etiquetas en todos los navegadores web para que hagamos un poco de fuerza y las integren, si alguien desea echar una mano que la firme.Saludos y gracias de antemano

    https://www.change.org/p/mozilla-microsoft-apple-opera-integrar-los-elementos-details-y-summary-de-html5-en-todos-los-navegadores

Dejar un comentario