CSS en 2026: nuevas funciones que están redefiniendo el desarrollo frontend

• La evolución de la plataforma CSS ha llegado al punto en que ahora incluso las animaciones e interacciones complejas pueden implementarse sin JavaScript
• Las funciones recién añadidas permiten personalizar <select>, detectar el estado del scroll, calcular elementos hermanos y aplicar estilos basados en atributos, entre otras cosas
• Con appearance: base-select y ::picker(select) es posible tener control total del estilo manteniendo la accesibilidad y el comportamiento nativo
• Con sibling-index() y attr() se pueden implementar de forma concisa animaciones y estilos de color basados en datos
• Estos cambios representan un cambio de paradigma en el desarrollo frontend que reduce la dependencia de JavaScript y mejora la accesibilidad y la mantenibilidad

---

Panorama general de las nuevas funciones de CSS

• En CSS de 2026 se incorporan muchas funciones nuevas para interacciones y animaciones
  • appearance: base-select cambia el elemento <select> a un modo personalizable
  • select::picker(select) es un pseudoelemento que representa la superficie del desplegable y permite aplicar estilos como sombra, borde y espaciado
  • selectedcontent permite dar estilo al área donde se muestra la opción seleccionada
• Las funciones relacionadas con el scroll también se amplían considerablemente
  • ::scroll-button() son botones de desplazamiento horizontal generados automáticamente en contenedores con scroll
  • ::scroll-marker y ::scroll-marker-group cumplen la función de puntos de paginación o indicadores visuales
  • scroll-target-group y :target-current permiten resaltar automáticamente el enlace correspondiente a la sección visible en ese momento
• También se agregan container queries basadas en el estado del scroll
  • Con container-type: scroll-state y @container scroll-state(snapped: x) se pueden cambiar estilos según la posición de desplazamiento
• Se añaden funciones de conteo en árbol y referencias tipadas a atributos
  • sibling-index() y sibling-count() devuelven el orden y la cantidad de elementos hermanos
  • attr() permite leer valores de atributos como tipos, por ejemplo color, y usarlos directamente en propiedades CSS
• @starting-style es una sintaxis experimental para definir el estilo al inicio de una animación

Demo: personalización nativa de <select> en HTML

• El elemento <select> ofrece accesibilidad y estructura semántica, pero antes tenía limitaciones importantes de estilo
• Con las nuevas funciones de CSS ahora es posible una personalización completa sin JavaScript
  • Activar el modo personalizable con appearance: base-select
  • Definir el estilo de la superficie del desplegable con select::picker(select)
• Funciones que el navegador gestiona automáticamente
  • Manejo del overflow: aplica scroll de forma automática para evitar que el desplegable se salga de la pantalla
  • Ajuste de posición anclada: elige automáticamente la mejor ubicación según el espacio disponible en el viewport
  • Gestión del foco y navegación con teclado: soporte para las teclas Arrow, Enter y Escape
  • Opciones con contenido enriquecido: pueden incluir contenido estructurado como íconos y etiquetas
• En navegadores sin soporte, hace fallback al <select> predeterminado, sin necesidad de polyfill adicional

Animación escalonada con sibling-index()

• Permite implementar una animación en la que las opciones del desplegable se deslizan secuencialmente al abrirse
• sibling-index() devuelve la posición entre los elementos hermanos (empezando en 1)
  • Ejemplo: la primera opción tiene retraso de 0s, la segunda de 0.2s y la tercera de 0.4s
• Incluso al agregar o eliminar elementos, los tiempos se recalculan automáticamente, lo que facilita el mantenimiento
• Simplifica un proceso que antes había que definir manualmente con :nth-child() o propiedades personalizadas

Estilos basados en datos con attr()

• Con la versión tipada de attr(), los valores de atributos HTML pueden usarse directamente en los estilos
  • Ejemplo: leer el atributo data-bg-color con background-color: attr(data-bg-color color, transparent)
• Al especificar el tipo del atributo, el navegador lo interpreta correctamente y también permite definir un color de fallback
• Esto permite una estructura de estilos centrada en los datos, donde basta con cambiar el color en HTML sin tocar el CSS

Comparación: desplegable hecho con CSS vs versión en JavaScript

• Si se implementa el mismo desplegable con JavaScript, se requieren más de 150 líneas de código
• La versión en CSS logra la misma funcionalidad con un solo <select> y unos pocos atributos
• La accesibilidad nativa, el foco y el control por teclado se proporcionan automáticamente a nivel de plataforma

El futuro de CSS y la dirección del desarrollo

• Las nuevas funciones de CSS permiten crear interfaces complejas con código declarativo y simple
• Gracias a lo que ya ofrece la plataforma, disminuyen el código repetido y la dependencia de librerías externas
• En la era de la IA, esta estructura simple y declarativa mejora la estabilidad de la generación automatizada de código
• En la práctica, se recomienda
  • Replantear los componentes de UI centrados en JavaScript existentes con un enfoque basado en CSS
  • Realizar pruebas de accesibilidad para verificar compatibilidad con teclado y lectores de pantalla
  • Monitorear continuamente el soporte de los navegadores e introducir estas funciones de forma gradual
• Estos cambios muestran que CSS está emergiendo como la tecnología central para las interacciones en frontend