HTML’s forgotten native accordion: styling the details/summary element

As frontend developers or designers, many times we’re requierd to design or implement accordion-style components. While there are plenty of libraries out there, the easiest way to accomplish the same results without adding bloat is to use the <details> HTML element.

The HTML Details Element (<details>) creates a disclosure widget in which information is visible only when the widget is toggled into an “open” state. A summary or label can be provided using the <summary> element.

<details> on MDN

Out of the box, the details element looks pretty decent, but not really appealing:

12319

Styled details

12319

Further styling

Here’s another version, very similar to what I had to implement for a client:

See the Pen details styled by Nacho Toledo (@iign) on CodePen.12319

Notice how you can also change the default disclosure widget (the little arrow/triangle), by using the list-style property or the ::-webkit-details-marker pseudo-element selector for Chrome based browsers.

In this case, I’m removing the disclosure widget altogether and using a pseudo-element to display a chevron. I also added a subtle animation to flip it on expand/collapse.

A note on Firefox vs Webkit

On Webkit-based browsers you can declare summary::-webkit-details-marker { display: none; } to hide the marker. However, on Firefox you need this declaration summary { list-style-type: none; }

LocalWP styled FAQs

I came across this beautiful and subtle implementation on the pricing page of the Flywheel site. Interestingly, they’re actually using <dl> and <dt> tags instead of a <detail>, which would seem semantically more correct. Also, looking at their HTML I see they refer to it as an accordion item (<dl class="accordion">).

See the Pen details reveal widgets — Flywheel style by Nacho Toledo (@iign) on CodePen.12319

Other stuff and behaviour

Of course, you could add some JavaScript on top of this to collapse other elements on click, to make it behave more like a traditional accordion. However, I think that’s often not necessary or even expected from the user’s point of view.

Useful links

How to maintain the aspect ratio of an element with CSS

As Una Kravets announced on Twitter, we can now set an aspect ratio to any HTML element via CSS, without any padding hacks. This is still an experimental feature so support is still not great.

To test this feature, go to chrome://flags in Chrome Canary and enable Experimental Web Platform Features.

Here’s a quick Pen on how to implement this:

See the Pen Aspect ratio in CSS by Nacho Toledo (@iign) on CodePen.12319

On supported browsers, you should see something like this:

With this feature comes also a set of media queries, such as min-aspect-ratio, max-aspect-ratio and aspect-ratio:

/* Force an aspect ratio of 1:1 */
.square {
  aspect-ratio: 1/1;
}

/* Force an aspect ratio of 3:2 */
.photo {
  aspect-ratio: 3/2;
}

/* aspect-ratio media query */
@media (aspect-ratio: 1/1) {
  .element {
    background: gold;
  }
}

Further reading

Tag <label>

Falso

Intenten clickear verdadero. Luego el falso. ¿Se nota la diferencia?

Es frustrante. Quizá hay muchos usuarios que ni se percatan de que clickeando el texto al lado de un checkbox (o cualquier otro tipo de input) pueden accionar sobre él. Pero hay una mayoría (espero) que sabe que al hacer click en el texto de rótulo de un elemento, el mismo se accionará.

Al perder este comportamiento rompemos con la consistencia y eso afecta la experiencia de usuario, en particular la usabilidad del sistema.

Cómo usarlo

Para utilizar un rótulo de este tipo lo único que hay que hacer es utilizar el tag <label for="element-id">, donde el atributo for define el ID del elemento que queremos accionar. También se puede lograr poniendo el input dentro del label, pero no es tan limpio y no se puede hacer en todos los casos.

Como ejemplo, el código de Verdadero/Falso:

<input type="checkbox" id="verdadero" /> <label for="verdadero" id="label-usuario-ok" >Verdadero</label>
<input id="falso" type="checkbox" /> <span id="label-usuario-mal" >Falso</span>

Como comentario aparte, este “error”  es uno de los tantos que pasan desapercibidos por más que el HTML valide perfectamente.

Referencia

  • https://developer.mozilla.org/en/HTML/Element/label

Detectar soporte HTML5 con Modernizr

Modernizr es una biblioteca de funciones que permite detectar el soporte nativo de nuevas y futuras tecnologías en los navegadores web. Dichas tecnologías son implementaciones de las especificaciones de HTML5 y CSS3.

El principal objetivo de Modernizr es proveer una forma confiable de detectar estas implementaciones, para poder sacar provecho de los navegadores o bien proveer una alternativa en caso de que el navegador no implemente la tecnología en cuestión.

Para usarlo simplemente basta con descargar el archivo Javascript y cargarlo desde una página. Automáticamente Modernizr realiza las pruebas correspondientes para detectar las capacidades del navegador y las almacena en forma de booleano en un objeto llamado “Modernizr”, al que podemos acceder dentro de nuestro Javascript.

Por ejemplo, para saber si el navegador soporta la etiqueta <video>, debemos chequear:

if(Modernizr.video){
//código HTML5
}
else{
//código alternativo
}

Al momento de la detección, Modernizr también agrega a la etiqueta <html> clases según las capacidades de nuestro navegador. Por ejemplo, si soporta video, audio y canvas, la etiqueta pasa a ser <html class="audio canvas video">.

Por lo tanto, otro método válido para chequear si el navegador soporta cierta implementación es ver si dicha etiqueta posee la clase correspondiente, acorde a la documentación de Modernizr.

En el ejemplo utilizo este último método para hacer la comprobación.

Demo: HTML5 Tester

Links