Cómo utilizar la etiqueta Summary HTML

summary

Cómo utilizar la etiqueta Summary HTML

¿Cómo utilizar la etiqueta <Summary> ?

 

Esta etiqueta llamada Summary, se utiliza conjuntamente con el elemento <details> /<details open> y después se le añade el <summary>, de esta forma lo que va a hacer es aplicar un desplegable en forma de ficha descriptiva. Lo que va a hacer es que toda la información que contenga dentro del <summary> se mantendrá como una lista y en una columna, siempre que lo declares.

Voy a mostraros parte de un código en el cual estoy utilizando la etiqueta <summary> para una página web que está destinada a la adopción de gatos y perros, en el cual es necesario tener fichas para los animales en adopción y que muestre las características de cada animal, que contiene la página.

Código HTML y ESTRUCTURA

 

<div class="faq-container">
             <picture>
                       <img src="ASSETS/adopta_gatos/img_gato_01.jpg" alt="">
             </picture>
             <details open>
                      <h2><u>RODOLPHE</u></h2>
                      <summary>Ficha:</summary>
                      <h3><u>Descripción:</u></h3>
                      <p>Definición de cómo es el gato</p>
                      <h3><u>Características:</u></h3>
                                <p>Sexo:</p>
                                <p>Medidas:</p>
                                <p>Edad:</p>
                                <p>Estado:</p>
                                <p><span>!!!!!URGENTE ADOPTAR !!!!</span></p>
                                <p>Color:</p>
                                <p>Raza:</p>
                                <p>Nacimiento:</p>
             </details>
</div>

Definición HTML

Para que el elemento <summary> funcione en su totalidad, deberemos siempre poner como primera etiqueta <details open> y a continuación se le puede poner un h2, h3 o lo que creáis más conveniente, después de haberle puesto en el caso de la captura un h3 le añado la etiqueta <summary>, que lo que va a hacer es un desplegable que abrirá la ficha técnica de ese gato en concreto, que es lo que viene a continuación según la captura del código.

Si copiáis el código en vuestro ordenador, vais a ver que aparecerá un icono de flecha a la izquierda de Ficha que aquí es donde va la etiqueta <details open>, al hacer clic en la flecha se abre un desplegable en el cual va a contener toda la información que hay dentro, lo que en si hace la etiqueta <summary> es colocar todo lo que hay dentro de ese elemento en una lista manteniendo todo lo que va a continuación.

  • La etiqueta <details open> le puedes colocar algún icono del que más te guste o prefieras colocar para tu página web, debes acordarte de que lo tienes que declarar en tu hoja de estilos.css, en el cual lo indicaras donde aparecerá el icono.
  • El elemento <details> es usado como un widget de revelación a través del cual el usuario puede obtener información adicional, siempre utilizando conjuntamente la etiqueta <summary> que ira después del <details>. Para que haga la función correctamente y aparezca el desplegable.

 

CÓDIGO CSS

Especificación del Icono

details summary::before {

position: absolute;

content: «»;

font-size: 1.75rem;

top: 10px;

right: 16px;

}

details[open] summary::before {

-webkit-animation: rotate 0.6s ease-in-out both;

animation: rotate-emoji 0.6s ease-in-out both;

}

Definición CSS

Como podéis observar el código CSS, es corto y conciso. En el cual voy a colocar las definiciones de las características debajo para que se pueda entender mucho mejor.

  • En el Content, allí vamos a poner el (icono/emoticono/flecha) o lo que queráis añadir para que al hacer el clic, se habrá el desplegable.
  • Tiene unas especificaciones claras y concisas, debido al poco código introducido, para su utilidad y mejor entendimiento.
  • La etiqueta <details open>, sirve para agregar el contenido que se incluya dentro del <summary>.
  • El -webkit-animation : es una función multimedia que hace de Booleano, mientras que el valor es verdadero siempre y cuando se admita en el CSS con el prefijo del proveedor y el navegador admita consultas de medios de la propiedad del prefijo.
  • ::before : es un pseudo-elemento que es el primer hijo del elemento seleccionado. Es usado normalmente para añadir contenido estético a un elemento, usando la propiedad 'content'. Este elemento se muestra en línea con el texto de forma predeterminada.

Condición Desplegable y Rotación

@-webkit-keyframes rotate-emoji {

0% {

-webkit-transform: rotate(0);

transform: rotate(0);

}

100% {

-webkit-transform: rotate(180deg);

transform: rotate(180deg);

}

}

Definición

En esta parte me refiero a la condición de rotación, para el icono que hemos añadido en el css. De esta manera le estamos dando los valores que queremos que haga para la rotación para cuando haga el desplegable, y además que el icono también tenga una rotación de 180º y poder ver que se cumplan las condiciones.

Para añadir iconos deberás incorporar el código que se te marca en Font Awesome por ejemplo, si decides coger el icono de esta página web. Y lo deberás incluir en la parte del códigos html y css, para implementarlo en tu documento.

  • @-webkit-keyframespermite a los autores controlar los pasos intermedios en una secuencia de animación CSS mediante el establecimiento de keyframes (o puntos de trayectoria) a lo largo de la secuencia de animación que debe ser alcanzado por determinados puntos durante la animación. Esto le da un control más específico sobre los pasos intermedios de la secuencia de animación que se obtiene al dejar que el navegador maneje todo automáticamente.
  • -webkit-transform : te permite modificar el espacio de coordenadas del modelo de formato visual CSS. Usando los elementos que pueden ser trasladados, rotados, escalados o sesgados de acuerdo a los valores establecidos.
ASÍ QUEDARIA EL RESULTADO FINAL

 Esta es la captura sin clicar el icono para que haga el desplegable.

summary

Esta segunda, es haciendo clic en el icono que esta señalizado con un cuadrado de color amarillo, para hacer el desplegable.

summary.2

Así es como quedaría el desplegable completo

summary completo

Para poder visualizar el código completo de la etiqueta <details open> y <summary>, te recomiendo que accedas en el link:https://codepen.io/Wilchard89

Escribe un comentario