Durante anos asumimos que ciertas interacciones requieren JavaScript: acordeones, modales, tooltips, tabs. Pero CSS ha evolucionado masivamente desde 2020.

El acordeon con details/summary

La etiqueta details con summary resuelve el 90% de los casos de acordeon sin una sola linea de JS. Es accesible por defecto, funciona sin JavaScript deshabilitado, y tiene transiciones nativas en Chrome 131+.

<details>
  <summary>Titulo del panel</summary>
  <p>Contenido colapsable...</p>
</details>

Dialog nativo

La etiqueta dialog con el metodo showModal() maneja focus trapping, backdrop, Escape para cerrar, y aria-hidden automaticamente. Todo eso que antes requeria una libreria de 5KB ahora es nativo.

Container queries

Los media queries basados en viewport son una abstraccion incorrecta. Un componente no deberia saber el tamano de la ventana; deberia saber el tamano de su contenedor. Las container queries resuelven esto desde 2022.

.card-container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: auto 1fr;
  }
}

Con :has(), anchor positioning, y scroll-driven animations en el horizonte, JavaScript para UI visual se esta volviendo opcional en lugar de obligatorio.