- Una lista, desde una perspectiva práctica, de funciones de CSS/HTML agregadas recientemente o con soporte ampliado este año, que abarca desde transiciones de UI, formularios y tipografía hasta CSS funcional
- Las novedades clave incluyen transiciones de tamaño hacia palabras clave como
auto, HTML popover/invoker y CSS @function·if(); muchas tienen soporte prioritario en Chrome, por lo que se necesita una estrategia de mejora progresiva
- Entradas con expansión automática mediante
field-sizing, Select personalizado, text-wrap: balance/pretty, easing linear() y rutas shape() permiten elevar fácilmente la calidad visual y de usabilidad
- Están aumentando herramientas de control de valores y flujo como
attr() mejorado, control del orden de lectura con reading-flow y calc-size(), ampliando el rango de diseño que puede resolverse solo con CSS
- Conviene seguir de cerca Masonry,
random(), margin-trim y las ampliaciones de View Transitions, que aún están en proceso de estandarización y soporte, mientras que Container Queries, :has(), dvh, etc. ya se consolidaron como base del trabajo diario
Animate to Auto
- Función que permite transiciones suaves entre un valor fijo ↔︎
auto en elementos con una altura de contenido variable
- Si declaras
interpolate-size: allow-keywords globalmente, se permiten transiciones como height: 0 → auto
- O bien, sin
interpolate-size, puedes usar calc-size() para hacer la transición con height: calc-size(auto, size)
- La ventaja es que elimina alternativas frágiles como el truco de
max-height o la medición fuera de pantalla + animación con JS, manteniendo el layout original
- El estado de soporte hoy está centrado en Chrome; como la animación es algo deseable pero no esencial, PE (Progressive Enhancement) encaja bien
Popovers & Invokers
- El atributo
popover es una función de HTML que otorga a cualquier elemento comportamiento de abrir/cerrar y la API de JS correspondiente; pertenece a la categoría de overlay ligero distinto de un modal
- Con el atributo Invoker se puede lograr control declarativo sin JS
- Su importancia está en que ofrece accesibilidad, teclado y manejo de foco de forma predeterminada a nivel HTML, reduciendo el riesgo de omisiones en la implementación
- En cuanto al soporte, Popover es amplio, Invoker va primero en Chrome y existen diferencias en funciones puntuales como
popover="hint"
- Hay polyfill, así que puede adoptarse incluso en UX esenciales
@function
- Introduce funciones definidas por el usuario en el sistema de funciones de valores de CSS; con una forma como
@function --foo(--x) { result: ... } se puede abstraer lógica común
- Ofrece mejoras en legibilidad y mantenimiento al eliminar duplicación (DRY) y simplificar declaraciones
- El soporte va primero en Chrome; si es razonable, puedes usar fallback elegante con
property: fallback y en la siguiente línea property: --func()
- Ojo: no es compatible con funciones de Sass
if()
- La primera función de bifurcación a nivel de valor en CSS; permite listar condiciones
media(), supports() y style() como si fuera un switch para devolver el primer valor coincidente
- Ejemplo: describir
grid-template-columns según breakpoints en una sola declaración
- Su efecto es mejorar la legibilidad y eliminar repeticiones, y además combina bien con
@function personalizado
- El soporte va primero en Chrome, por lo que se recomienda declarar primero un valor de fallback y aplicar el patrón de PE
field-sizing
- Presenta la propiedad
field-sizing, que hace que los elementos de entrada/edición crezcan automáticamente según su contenido
- El caso más representativo es la expansión automática en altura de
<textarea>, aunque también puede aplicarse a UX de redimensionado inline inmediato
- El soporte está en Chrome y Safari lo incorporará próximamente; si hace falta, puede sustituirse con JS ligero
- Como es una mejora de UX y no una función esencial, es adecuada para adopción progresiva
Custom Selects
- Permite, tras un opt-in explícito, no solo estilizar la apariencia de
select, sino personalizar por completo la propia UI del selector abierto
- Tiene una PE excelente: en entornos sin soporte hace fallback de forma segura al
<select> nativo
- El soporte va primero en Chrome y el área de control puede ampliarse con
appearance: base-select y ::picker(select)
text-wrap
text-wrap: balance equilibra la longitud de líneas en textos grandes como títulos, y text-wrap: pretty mejora líneas huérfanas y estética también en texto corrido- Su efecto es mejorar la legibilidad y la calidad tipográfica, con beneficios que se perciben de inmediato sin costo extra
- En soporte,
balance es amplio, mientras que pretty va antes en Chrome y Safari; es ideal para PE
linear() easing
- A diferencia de la palabra clave
linear, la función linear() define curvas de easing precisas con cualquier cantidad de puntos, lo que favorece comportamientos complejos como rebotes
- Mientras que
cubic-bezier() tiene limitaciones, linear() ofrece control fino del timing y ya tiene soporte completo
- Si hace falta, puede hacerse fallback con easing con nombre o
cubic-bezier()
shape()
- La función
shape() complementa a path(), cuyo uso estaba limitado a píxeles y una sintaxis compleja, permitiendo describir rutas arbitrarias con unidades responsivas y propiedades personalizadas
- Con
clip-path se pueden crear máscaras de forma arbitraria, y con offset-path lograr posicionamiento/animación sobre una ruta; más adelante se prevé su combinación con shape-outside
- El soporte está en Chrome y Safari, Firefox lo lleva bajo flag, y en desarrollo real se recomienda diseñar fallbacks cuidados
More Powerful attr()
attr() ahora admite tipado, por lo que puede leer directamente desde atributos HTML valores no textuales como números o colores y usarlos como valores CSS- Su significado está en ampliar patrones para inyectar desde el marcado cosas como colores de tema, contadores o tamaños
- El soporte va primero en Chrome, y se recomienda introducirlo progresivamente empezando por refuerzos visuales más que por dependencias del layout crítico
Reading Flow
- Se introduce la propiedad
reading-flow, que corrige lógicamente el orden de tabulación incluso en layouts donde el orden visual y el orden del código no coinciden
- Al reorganizar grids, puedes indicar un flujo de foco acorde al tipo de layout con algo como
reading-flow: grid-rows
- Reduce riesgos de accesibilidad con una sola línea de CSS, dando mayor libertad de layout
- Como el soporte va primero en Chrome, se recomienda evitar reordenamientos excesivos hasta que haya soporte más general
Stuff to Keep an Eye On
- El layout Masonry sigue en ajuste de especificación, y la propuesta
item-flow podría ampliar las posibilidades de distribución más allá del grid
- La función
random() ya está disponible en Safari y resulta útil para diseños con variaciones expresivas
margin-trim es útil pero sigue centrado en Safari, mientras que sibling-index()/count() está en Chrome y viene bien para animaciones escalonadas- Existen señales positivas para compatibilidad cruzada, como
view-transition-name: match-element; en View Transitions y el desarrollo en Firefox
- La racionalización de multiplicación/división en
calc() con mezcla de unidades está cerca de superar la fase experimental, lo que podría reducir la necesidad de antiguos hacks de conversión de tipos
- También se plantea el problema de no contar con un nombre de versión como “CSS4” y se presenta una lista de referencia con novedades de los últimos 5 años
Great Stuff to Remember
- Container Queries y sus unidades siguen siendo una mejora de productividad enorme desde las media queries y mantienen su lugar como base esencial
:has() permite selección basada en padre y estado, ofreciendo un uso muy amplio para resolver selectores combinados complejos solo con CSS- View Transitions, Anchor Positioning y Scroll-Driven Animations ya llegaron a Safari, bajando la barrera para adopción en trabajo real
- Las unidades de viewport adicionales como dvh ya forman parte de Baseline, mejorando la estabilidad del viewport en móviles
Puntos destacados de código/uso
- Transición de tamaño:
interpolate-size: allow-keywords global, o durante un cambio de estado height: calc-size(auto, size) para animar la altura según el contenido
- Bifurcación de grid: con el patrón
if(media(...): valor; ... else: valor;) puedes concentrar las columnas de plantilla por breakpoint en una sola declaración
- Custom Select:
select, ::picker(select) { appearance: base-select } activa un picker definido por el usuario
- Easing con rebote:
animation-timing-function: linear( ... múltiples puntos ... ) permite una curva detallada de rebote/amortiguación
- Ruta de recorte:
clip-path: shape( ... ) sirve para crear una máscara con forma responsiva basada en proporciones
Guía de aplicación práctica
- En elementos con gran variación de soporte entre navegadores, conviene introducirlos según fallback primero y según la relación entre costo de entrada y beneficio
- Animación, tipografía y efectos visuales son buenos candidatos para PE, mientras que elementos críticos de accesibilidad como foco/orden de tabulación conviene adoptarlos tras lograr soporte amplio
- Las funciones propias y bifurcaciones maximizan su ROI cuando se convierten en patrones compartidos del equipo mediante documentación de reglas de diseño y su combinación con tokens y propiedades personalizadas
- Las mejoras de UX en formularios (
field-sizing, Custom Select) tienen un beneficio especialmente perceptible en escenarios mobile-first
Conclusión
- El CSS moderno en su edición 2025 amplía funciones de valor, bifurcación lógica y control de formas, haciendo de este un año en el que “se puede hacer más con CSS”, con gran valor para una adopción gradual junto con una estrategia de PE
- Una hoja de ruta realista consiste en apoyarse en lo básico (Container Queries,
:has(), unidades de viewport) y priorizar elementos de alta eficiencia como animate-to-auto, if() y shape()
3 comentarios
CSS ya casi se ha vuelto un lenguaje. Ahora permite implementaciones lógicas hasta cierto punto... Ya hasta me pregunto si de verdad sigue siendo una hoja de estilos.
Parece que va a haber un montón de funciones buenísimas, cosas que hasta ahora había que implementar con JavaScript.
El CSS realmente ha mejorado muchísimo.