?

Siguiendo hablando sobre algunas etiquetas poco conocidas:

• 2 TAGS HTML QUE NO CONOCIAS <BASE> Y <ABBR>

Muchas veces empleamos librerías de JavaScript sin más para agregar componentes que de por sí no existen de forma natíva en nuestro navegador; como cuando queremos mostrar un simple diálogo en HTML que empleamos Bootstrap o una de las mil y una librerías o JavaScript que podemos encontrar en Internet; uno de esos casos es cuando queremos mostrar contenido bajo demanda que podemos hacerlo muy fácilmente empleando las etiquetas details y summary.

Funcionamiento de las etiquetas details y summary

Estas etiquetas tienen que estar en el cuerpo de nuestra web, en otras palabras nuestro body y las mismas al ser configuradas ofrecen un header en el que el usuario puede dar un click y el resto del contenido se muestra; en otras palabras, el contenido que definimos en details es mostrado cuando damos clic en una cabecera la cual definimos con summary.

En esta entrada se explica en detalle el funcionamiento de la etiqueta details que permite mostrar/ocultar contenido bajo demanda o a través de la interacción del usuario sobre este campo:

details y summary en la práctica

Antes de ponernos a definir estas etiquetas details y summary en conjunto, vamos a ver un ejemplo de lo cual explicamos anteriormente; así que de un clic en la cabecera y verá que aparece un contenido "Hola Mundo":

Da un clic sobre el texto anterior para mostrar el contenido secundario.

El experimento anterior corresponde al siguiente HTML:

    <details>
        <summary>Título</summary>
        <p>Hola Mundo</p>
    </details>

La etiqueta details es responsable para demarcar el contenido relevante, mientras que el contenido abarcado por la etiqueta summary es responsable de demarcar el contenido secundario el cual es mostrado bajo demanda; así de simple

Siempre mostrar el contenido abierto

Si deseas mostrar el contenido secundario abierto se debe especificar el atributo open dentro del elemento details:

Da un clic sobre el texto anterior para ocultar el contenido secundario.

El experimento anterior corresponde al siguiente HTML:

    <details open>
        <summary>Tigre</summary>
        <img src="tigre-200.jpg">
        <p>Mi genial foto.</p>
    </details>

La única diferencia con el anterior ejemplo es que este cuenta con el atributo open; además con este atributo es posible definir reglas CSS específicas para estas etiquetas como veremos en la siguiente sección:

CSS para las etiquetas details y summary

Como cualquier otro selector, es posible definir estilos para estas etiquetas; podemos aplicar lo que queramos, cambiar el estilo de letra, color, tamaño, márgenes y un largo etc:

details[open] {}
details[open] summary {}

Ejemplos final con summary y details

A partir de lo explicado anteriormente, se nos puede ocurrir algunos experimentos como los mostrados a continuación.

Detalle de compras en línea

Como se comentó anteriormente, se puede definir CSS compuestos por múltiples etiquetas anidadas como ocurre con las tablas; aquí la etiquetas summary y details funcionan perfectamente:

El experimento anterior corresponde al siguiente HTML:

    <details>
         <summary>Order #545645144</summary>
         <table>
             <tr>
                 <td>Fecha</td>
                 <td>10/12/2015 12:45 pm</td>
             </tr>
             <tr>
                 <td>Orden número</td>
                 <td>#545645144</td>
             </tr>
             <tr>
                 <td>Courier</td>
                 <td>UPS</td>
             </tr>
             <tr>
                 <td>Dirección</td>
                 <td>1600 Ave NW, Washington, DC 20500, EEUU.</td>
             </tr>
             <tr>
                 <td>Pedido</td>
                 <td>
                     <ul>
                         <li>Apple iPhone 5.......... $799.00</li>
                         <li>Amazon Fire TV Stick.... $39.00</li>
                         <li>PlayStation TV.......... $79.00</li>
                         <li>Total................... $917.00</li>
                     </ul>
                 </td>
             </tr>
         </table>
     </details>

También se puede cambiar el color, tamaño, etc del indicador del summary que está ubicado a la izquierda empleando el selector details-marker.

    summary::-webkit-details-marker {
        color: #222;
        font-size: 130%;
    }

Listados de controles con summary

No solo se puede usar la etiqueta details para mostrar un panel informativa como el caso anterior, también podemos colocar un panel adicional de controles como el siguiente experimento:

El experimento anterior corresponde al siguiente HTML:

    <details>
        <summary>Menú</summary>
        <ul>
            <li><a href="#Comprar">Comprar</a></li>
            <li><a href="#Devolver">Devolver</a></li>
            <li><a href="#Comparar">Comparar</a></li>
        </ul>
    </details>

Además, empleamos el selector:

    details[open] summary{
        background-color: #08B;
        color:#FFF;
        border-radius:5px 5px 0 0;
    }

Para cambiar el aspecto del elemento summary o la cabecera cuando está abierto.

Las transiciones en CSS...

Podemos emplear otras propiedades como transition para definir cambios suaves:

El experimento anterior corresponde al siguiente HTML:

    <details>
        <summary>Menú</summary>
        <ul>
            <li><a href="#Comprar">Comprar</a></li>
            <li><a href="#Devolver">Devolver</a></li>
            <li><a href="#Comparar">Comparar</a></li>
        </ul>
    </details>

Una consideración para el siguiente ejemplo (Si no deseas mostrar el pequeño indicador):

    summary::-webkit-details-marker {
        display: none;
    }

También es posible cambiar el icono del indicador por alguno personalizado; por ejemplo, una imagen:

El experimento anterior corresponde al siguiente HTML:

    <details>
        <summary>Menú</summary>
        <ul>
            <li><a href="#Comprar">Comprar</a></li>
            <li><a href="#Devolver">Devolver</a></li>
            <li><a href="#Comparar">Comparar</a></li>
        </ul>
    </details>

Para cambiar el icono indicador se emplea el selector after o before:

    details summary:before {
        display: inline-block;
        width: 32px;
        height: 18px;
        margin-right: 8px;
        content: "";
        float:left;
        background-image: url(navigation_collapse.png);
    }

Soporte de la etiqueta details en los navegadores

Lamentablemente parece ser que esta etiqueta details es inclusive desconocida hasta para la gente de Mozilla; ya que el navegador Firefox no cuenta con soporte para esta etiqueta; echa un vistazo a la tabla de "navegadores soportados" de la w3schools: HTML details Tag.

Conclusiones

En definitiva es un elemento provisto en HTML de lo más curioso y un poco desconocido que puede tener múltiples posibilidades al momento de estar maquetado HTML y CSS y esperemos que pronto la gente de Mozilla decida incorporar el soporte en próximas versiones de su navegador.