5 trucos de CSS que cambiarán tu front-end en 2025

CSS sigue sorprendiendo: ahora puedes crear ventanas emergentes, animaciones y formularios adaptables sin una línea de JavaScript. A continuación se muestra una selección de las características CSS más interesantes de 2025 que vale la pena adoptar.

💬 1. API de ventana emergente: elementos emergentes sin JS

Ahora puedes crear ventanas modales, sugerencias y listas desplegables solo con HTML y CSS!

<!-- Кнопка-триггер -->
<button popovertarget="myPopover">Подписаться</button>

<!-- Всплывающее окно -->
<div id="myPopover" popover>
  Спасибо за подписку! ❤️
</div>

Al hacer clic en el botón, aparece una ventana emergente. Se puede cerrar pulsando Escape o haciendo clic fuera de la ventana.

Para añadir una animación suave:

#myPopover {
  transform: translateY(-2rem);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

#myPopover:open {
  transform: translateY(0);
  opacity: 1;
}

✨ 2. @starting-style: aparición suave de elementos

Por lo general, cuando aparece un elemento, CSS aplica inmediatamente el estilo final. La animación resulta abrupta. El nuevo @starting-style permite establecer estado inicial, que luego se convertirá gradualmente en la final.

#myPopover {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

#myPopover:open {
  transform: translateY(0);
  opacity: 1;
}

@starting-style {
  #myPopover:open {
    transform: translateY(-2rem);
    opacity: 0;
  }
}

📌 El elemento comienza un poco más arriba y se vuelve transparente, luego se mueve suavemente hacia abajo y aparece.

📏 3. Animación de tamaño con palabras clave

CSS ahora puede animar suavemente la transición entre height: 0 y height: auto, así como min-content, max-content, fit-content.

Para ello, debe permitir el uso de palabras clave:

:root {
  interpolate-size: allow-keywords;
}

Ejemplo:

<details>
  <summary>Показать</summary>
  <div class="content">Скрытое содержимое.</div>
</details>

.content {
  overflow: hidden;
  height: 0;
  transition: height 0.5s ease;
}

details[open] .content {
  height: auto;
}

Antes no había tal animación en absoluto. Ahora — una apertura suave.

📝 4. Entrada adaptativa y área de texto con tamaño de campo

Por fin aprendí CSS ajustar automáticamente el tamaño de input, textarea y select para el contenido. Solo tienes que añadir:

input, textarea, select {
  field-sizing: content;
  max-width: 100%; /* ограничение по ширине */
}

Ejemplo:

<textarea placeholder="Write as much as you want..."></textarea>
<input type="text" placeholder="Name">
<select>
  <option>Коротко</option>
  <option>Очень длинный вариант</option>
</select>

Este formulario se ve limpio y se adapta al usuario sin JS. 💡

🌗 5. Función light-dark() para temas oscuros y claros

Ya no es necesario construir @media (prefers-color-scheme) — ahora todo se puede hacer en una línea con la función light-dark():

:root {
  color-scheme: light dark;
  --text-color: light-dark(#000000, #ffffff);
  --bg-color: light-dark(#ffffff, #000000);
}

💡 Los colores se ajustarán automáticamente al tema del sistema del usuario.

CSS 2025 demuestra que cada año podemos hacer más y más bonito sin una sola línea de JavaScript. Prueba nuevas funciones y tu código no solo será más simple, sino también más moderno ✨