HTML5 Cómo usar las etiquetas y
Entre varias etiquetas nuevas que están disponibles en HTML5, Especificaciones (como: figura, figcaption, y aparte), detalle y resumen Las etiquetas, en mi opinión, son las más útiles. Con estas nuevas etiquetas puede ocultar parte del contenido largo y mostrar solo el resumen.
En realidad, a menudo observamos este efecto, pero la mayoría de ellos aún se basan en JavaScript o su hermano: jQuery, que la mayoría de la gente no entiende. Ahora, con estos nuevos elementos. - detalles y resumen - las cosas se pondrán más fáciles.
Entonces, veamos cómo funcionan las etiquetas en un caso real..
En esta demostración vamos a resumir una descripción del producto. Primero, creemos una etiqueta de 'detalles' y luego pongamos todo el contenido junto con la etiqueta 'resumen' dentro de ella, como en el siguiente ejemplo:
Especificación de MacBook Pro
- Pantalla panorámica brillante retroiluminada por LED de 13.3 pulgadas con vidrio ininterrumpido de borde a borde (resolución de 1280 x 800 píxeles).
- Procesador Intel Core i5 de doble núcleo a 2,4 GHz con 3 MB de caché L3 compartido para una excelente multitarea.
- Intel HD Graphics 3000 Con 384 MB de SDRAM DDR3 compartido con la memoria principal.
- Disco duro Serial ATA de 500 GB (5400 RPM)
- 4 GB de RAM instalada (1333 MHz DDR3; soporta hasta 8 GB)
En ese ejemplo, he agregado detalles de la especificación de MacBook Pro, y ahora veamos cómo el navegador procesa esas etiquetas.
También he agregado un título y más descripciones del producto sobre los detalles para hacer que la demostración anterior sea más adecuada para usted. ¿Entonces, qué piensas? Es bastante fácil, ¿verdad??
Ayudas del navegador
Sin embargo, antes de apresurarse a aplicar esta etiqueta a todo su sitio web, se debe tener en cuenta que los detalles y la etiqueta de resumen actualmente solo se admiten en Chrome 12 y versiones posteriores..
Incluso el último Firefox aún no los admite.
Por lo tanto, si desea aplicar esta etiqueta, debe incluir una función de respaldo para los navegadores no compatibles. La buena noticia es que es simple; puede utilizar este polyfill de detalles, que replicará automáticamente la funcionalidad de la etiqueta para los navegadores antiguos.
Descargue este archivo y vincúlelo al documento html junto con jQuery (1,7+ como mínimo) y asegúrese de colocar el polyfill antes de la etiqueta de cuerpo cerrado.
Y dentro de la etiqueta principal, inserte la siguiente etiqueta condicional para incluir HTML5shiv para IE8 y versiones anteriores, de lo contrario, Internet Explorer no reconocerá estas nuevas etiquetas.
Ahora veamos cómo resulta en Internet Explorer:
Y ahora también funciona en Internet Explorer..
- Manifestación
- Descargar fuente
Conclusión
Crear un efecto de ocultar y mostrar con JavaScript o jQuery es relativamente sencillo, pero tenerlo de forma nativa desde el navegador es definitivamente una solución mucho más fácil para muchas personas. Si quieres hacerlo en JavaScript o en HTML5, es tu decisión. Gracias por leer, y espero que lo hayan disfrutado..
