CSS 2026: 6 funciones más que puedes usar ya

Hace tiempo te conté 8 funciones de CSS que ya podías usar sin polyfill. Desde entonces, Chrome ha seguido sumando cosas nuevas: pasó de la versión 148 a la 151 entre mayo y julio de 2026.

Aquí tienes la segunda tanda. Son 6 funciones con soporte real en Chrome, con ejemplos de código y mi opinión sobre cuáles usar ya y cuáles esperar todavía.

Decoraciones de espacio en grid y flexbox

Llegó en Chrome 149. Hasta ahora, column-rule solo servía para diseños multicolumna. Ahora puedes aplicar el mismo tipo de línea divisoria a los espacios entre elementos de un grid o un flexbox.

Las propiedades nuevas son column-rule-inset, row-rule-inset, column-rule-visibility-items y row-rule-visibility-items. Además, el ancho, el color y los insets de la línea se pueden animar. Es justo lo que antes tenías que simular con bordes o pseudoelementos colocados a mano.

text-fit: tipografía que se ajusta sola

Llegó en Chrome 150. La propiedad text-fit ajusta el tamaño de fuente de un texto para que llene el ancho de su contenedor. Piensa en un titular dinámico que debe verse igual de ancho tenga 10 o 30 caracteres.

Antes esto se resolvía con JavaScript, calculando el tamaño a mano según la longitud del texto. Ahora es una línea de CSS nativa, sin cálculos ni reflows adicionales provocados por scripts.

.titular-dinamico {
  text-fit: max-height;
  max-width: 100%;
}

Con esas dos líneas, el titular ocupa siempre el ancho disponible, sin importar cuántos caracteres tenga cada vez que cambie el contenido.

Bordes con degradado nativo

También en Chrome 150. Con background-clip: border-area puedes aplicar un degradado directamente al borde de un elemento. Ya no hace falta el truco clásico de simularlo con border-image y una imagen generada aparte.

Es una de esas funciones pequeñas que ahorran minutos reales. Un borde con degradado es bastante habitual en tarjetas y botones destacados.

.tarjeta-destacada {
  border: 3px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #6d28d9, #22c55e) border-area;
}

Fíjate en el valor border-area al final del segundo degradado. Es lo que le dice al navegador que pinte ese degradado justo en el borde, y no en el fondo del elemento.

Pseudoclases para audio y vídeo

Chrome 150 también suma siete pseudoclases nuevas para los elementos <audio> y <video>: :playing, :paused, :seeking, :buffering, :stalled, :muted y :volume-locked.

Puedes cambiar el estilo de tu reproductor personalizado según el estado real de la reproducción. Ya no dependes de clases que añadías y quitabas con JavaScript en cada evento. Forma parte de las áreas de foco de Interop 2026, así que es de esperar que otros navegadores la adopten pronto.

focusgroup: navegación con teclado declarativa

El atributo focusgroup, también de Chrome 150, da navegación con flechas a un grupo de widgets sin escribir JavaScript. Piensa en una barra de pestañas o un menú de radio buttons personalizado.

Es una mejora directa para la accesibilidad de tus componentes propios. Antes tenías que gestionar tú mismo el foco entre elementos con tabindex y controladores de eventos de teclado.

ruby-overhang para tipografía especial

La última llegó en Chrome 151. ruby-overhang controla cómo se desborda el texto ruby, esas pequeñas anotaciones fonéticas típicas de la tipografía japonesa o china. Admite los valores auto, spaces y none.

Es una función de nicho para la mayoría de proyectos en español. Si alguna vez maquetas contenido en japonés o chino, te va a interesar. Si no, puedes saltártela sin problema.

Cuáles usar ya y cuáles esperar

Todas estas funciones llegaron primero a Chrome. Antes de usarlas en producción, comprueba su soporte real en Can I Use. Hazlo sobre todo si tu web recibe bastante tráfico de Safari o Firefox.

Mi recomendación práctica: usa ya text-fit y los bordes con degradado como mejora progresiva. Si el navegador no las soporta, el diseño se ve un poco menos pulido, no roto. Con las pseudoclases de audio y vídeo y con focusgroup, ten a mano una alternativa en JavaScript si tu proyecto depende de navegadores más antiguos.

Más recursos relacionados

• Todos los artículos de CSS: el resto de guías y novedades de CSS en el blog.
• CSS 2026: 8 funciones que ya puedes usar sin polyfill: la primera parte de esta serie.
• Microinteracciones útiles: 15 ejemplos para inspirarte: para aplicar estas funciones a casos reales.
• Hoja de ruta para aprender CSS con más de 60 recursos gratis: si vienes de fuera del mundo CSS y quieres nivelarte.

Preguntas frecuentes

¿Estas funciones ya funcionan en todos los navegadores?

No. Todas llegaron primero a Chrome. Comprueba siempre su soporte en Can I Use antes de depender de ellas en un proyecto importante.

¿Necesito un polyfill para usarlas?

No existen polyfills fiables para la mayoría de estas funciones, porque tocan el motor de renderizado del navegador. Trátalas como mejora progresiva, no como base de tu diseño.

¿Cuál de las seis recomiendas probar primero?

Los bordes con degradado nativo. Resuelven un problema muy habitual en tarjetas y botones. Si el navegador no los soporta, el elemento se ve bien igualmente, solo sin el degradado.

¿Sirve ruby-overhang para algo si mi web está en español?

Solo si incluyes contenido en japonés o chino con anotaciones fonéticas. Para el resto de proyectos en español, puedes ignorarla sin ningún problema.

¿Habrá una parte 3 de esta serie?

Sí, en cuanto Chrome sume suficientes funciones nuevas como para justificar otra entrega, la publico aquí mismo.

Guárdate esta página como referencia junto a la primera parte. Si te ha sido útil, compártela con quien todavía simule degradados en bordes con imágenes de fondo.