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.
Donate To Address
Donate Via Wallets- Bitcoin
Ethereum
Bitcoin cash
Tether
Stellar
Bitcoin!
Si el artículo te resultó útil, no dudes en colaborar con nosotros con Bitcoin. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Bitcoin
Ethereum!
Si el artículo te resultó útil, no dudes en colaborar con nosotros con Ethereum. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Ethereum
Bitcoin cash!
Si el artículo te resultó útil, no dudes en colaborar con nosotros con Bitcoin cash. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Bitcoin cash
Tether!
Si el artículo te resultó útil, no dudes en colaborar con nosotros con Tether. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Tether
Stellar!
Si el artículo te resultó útil, no dudes en colaborar con nosotros con Stellar. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Stellar
Please Add coin wallet address in plugin settings panel
9 comentarios para “Interactividad en HTML5: los elementos details y summary”
Dejar un comentario
¿Quieres saber más?
¡La mejor información en tu correo!
(proximamente importantes novedades)
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
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!
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!
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
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!
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.
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?
Graciasssssssssss son lo maximooooooooo
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