CSS moderno: dialog, oklch y más

⏱ 30 minutos
📶 Nivel: intermedio
⭐ Extra opcional (no cuenta para el progreso)

⚠️ Soporte de navegadores

Estas funciones son modernas. Antes de usarlas en un proyecto real, comprueba el soporte en MDN y en Can I use. Todo funciona en las versiones actuales de Chrome, Edge, Firefox y Safari salvo lo marcado como soporte parcial.

1.<dialog> y popover: ventanas nativas

El elemento <dialog> es una ventana modal nativa: trae foco, tecla Esc y fondo (::backdrop). El atributo popover crea paneles que se abren con un botón y se cierran al pulsar fuera, sin una línea de JS.

✏️ Popover nativo

Código (edítalo)

<style>
  body { font-family: sans-serif; padding: 12px; }
  [popover] { padding: 16px; border: 0; border-radius: 12px; box-shadow: 0 8px 30px #0004; }
  [popover]::backdrop { background: #0003; }
</style>
<button popovertarget="info">Abrir panel</button>
<div id="info" popover>
  <strong>Hola</strong><p>Me cierro con Esc o al pulsar fuera.</p>
  <button popovertarget="info" popovertargetaction="hide">Cerrar</button>
</div>

Resultado

Dialog modal (necesita una línea de JS)

<dialog id="modal">
  <p>¿Seguro que quieres continuar?</p>
  <form method="dialog"><button>Cancelar</button><button value="ok">Aceptar</button></form>
</dialog>
<button onclick="modal.showModal()">Abrir</button>

💡 Consejo

Usa <dialog> con showModal() para bloquear el resto de la página, y popover para menús y avisos ligeros. Ambos son accesibles por defecto, algo difícil de lograr con un div a mano.

2.Colores modernos: oklch(), color-mix() y light-dark()

oklch(luminosidad croma tono) describe colores como los percibimos: cambiar la luminosidad no altera el tono, ideal para paletas. color-mix() mezcla dos colores y light-dark() elige uno según el tema del usuario.

✏️ Paleta con oklch y light-dark

Código (edítalo)

<style>
  :root { color-scheme: light dark; --marca: oklch(60% 0.2 280); }
  body { font-family: sans-serif; padding: 12px;
         background: light-dark(#fff, #1b1b22); color: light-dark(#222, #eee); }
  .caja { padding: 12px; margin: 6px 0; border-radius: 8px; }
  .a { background: var(--marca); color: #fff; }
  .b { background: oklch(80% 0.2 280); color: #000; }
  .c { background: color-mix(in oklch, var(--marca), white 50%); color: #000; }
</style>
<div class="caja a">Marca</div>
<div class="caja b">Misma tonalidad, más clara</div>
<div class="caja c">Marca mezclada con blanco</div>

Resultado

💡 Truco

Define un solo color de marca y deriva los demás con color-mix() o cambiando la luminosidad en oklch(): tu sistema de variables (lección 11) se vuelve más corto.

3.@property: variables con tipo

Las variables normales son texto, por eso no se pueden animar. Con @property declaras su tipo y el navegador puede transicionarlas.

✏️ Degradado animado

Código (edítalo)

<style>
  @property --angulo { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
  .caja { height: 120px; border-radius: 12px;
          background: linear-gradient(var(--angulo), #4f46e5, #ec4899);
          animation: gira 4s linear infinite; }
  @keyframes gira { to { --angulo: 360deg; } }
</style>
<div class="caja"></div>

Resultado

4.Funciones con soporte parcial o reciente

Estas tres son muy prometedoras, pero no están disponibles igual en todos los navegadores. Úsalas como mejora progresiva (la página debe verse bien sin ellas) y verifica el soporte actual.

Función	Para qué sirve	Documentación
Animaciones por scroll (`animation-timeline: scroll()`)	Animar según el desplazamiento, sin JS	MDN
Anchor positioning (`anchor-name`, `position-anchor`)	Anclar tooltips y menús a otro elemento	MDN
View transitions (`document.startViewTransition()`)	Transiciones animadas entre estados o páginas	MDN

Mejora progresiva con @supports

@supports (animation-timeline: scroll()) {
  .barra { animation: crece linear; animation-timeline: scroll(); }
}
/* Si no hay soporte, la barra simplemente no se anima. */

⚠️ Regla de oro

Nunca dejes que una función con soporte parcial rompa el contenido: encapsúlala en @supports y asegúrate de que sin ella todo siga funcionando.

📒 Apuntes para llevar

<dialog> y popover dan ventanas accesibles sin librerías.
oklch(), color-mix() y light-dark() simplifican paletas y temas.
@property permite animar variables con tipo.
Scroll-driven animations, anchor positioning y view transitions: soporte parcial; usa @supports y verifica en MDN.

🧠 Comprueba lo aprendido

Elige una respuesta en cada pregunta.

¿Qué atributo crea un panel que se cierra al pulsar fuera?

¿Qué hace light-dark(a, b)?

¿Para qué sirve @property?

Con una función de soporte parcial, lo correcto es…