DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

14-12-2015

Siguiendo hablando sobre algunas etiquetas poco conocidas:

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 HtML ejemplo

Pruebalo tu mismo:

Título

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.

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

Tigre

Mi genial foto.

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:

details[open] {}
details[open] summary {}
El contenido dentro de summary puede ser cualquier HTML por complejo que sea el cual no solo debe constar de un simple texto.

Más experimentos usando la etiqueta 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:

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

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

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 -cabecera- cuando esta 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 maquetando HTML y CSS y esperemos que pronto la gente de Mozilla decida incorporar el soporte en próximas versiones de su navegador.


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Animacion SVG sencilla con solo HTML

Animacion SVG sencilla con solo HTML

3D Box Control conTweenMax

3D Box Control conTweenMax

Calendario de cubo

Calendario de cubo

Algunos artículos que te pueden interesar

El elemento datalist en HTML5

El elemento datalist en HTML5

El elemento datalist provisto en HTML5 permite crear un conjunto de opciones viables para establecer como valor en otros elementos de tipo input.

Andrés Cruz 01-12-2014

Mostrar contenido bajo demanda con solo HTML

Mostrar contenido bajo demanda con solo HTML

La etiqueta details es responsable para demarcar el contenido relevante, mientras que summary es responsable de demarcar el contenido secundario el cual es mostrado bajo demanda y en conjunto permiten mostrar/ocultar contenido bajo demanda.

Andrés Cruz 14-12-2015

El atributo pattern en HTML5

El atributo pattern en HTML5

Con este atributo podemos realizar validaciones sin necesidad de usar javascript.

Andrés Cruz 26-07-2013