¿Qué nuevas funciones o selectores de CSS te parecen más prometedores?

Explora las funciones y selectores CSS más prometedores como :has(), subgrid, animaciones por scroll, nesting, View Transitions y más.

LucusHost, el mejor hosting

Algunas de las capacidades que (a mediados de 2025) están redefiniendo o prometen redefinir nuestro trabajo como desarrolladores web son:

  1. Selector :has() (Selector relacional o «Padre»):
    Permite estilizar un elemento basándose en el contenido de sus hijos o en la presencia de hermanos posteriores. Por ejemplo, article:has(img.destacada) seleccionaría un artículo solo si contiene una imagen destacada. Esto abre un sinfín de posibilidades para diseños adaptativos al contenido sin necesidad de JavaScript.
  2. subgrid (para CSS Grid Layout):
    Permite que los elementos de una cuadrícula que son, a su vez, contenedores de cuadrícula, hereden y se alineen perfectamente con las pistas (filas y columnas) definidas por su cuadrícula padre. Simplifica enormemente los diseños complejos y anidados, garantizando una coherencia visual que antes era muy difícil de lograr.
  3. Animaciones controladas por desplazamiento (Scroll-driven Animations):
    Permite vincular el progreso de las animaciones CSS directamente al desplazamiento (scroll) del usuario en una página o dentro de un elemento específico. Esto facilita la creación de efectos como parallax, barras de progreso que reaccionan al scroll, o la revelación gradual de contenido, todo de forma declarativa en CSS y con un excelente rendimiento.
  4. Anidamiento nativo en CSS (CSS Nesting):
    Permite escribir selectores CSS de forma anidada. Esto mejora significativamente la legibilidad, la organización y el mantenimiento del código, ya que los estilos relacionados con un componente o bloque se pueden agrupar de manera más intuitiva y se reduce la repetición de selectores.
  5. Transiciones de vista (View Transitions API):
    Facilita la creación de transiciones animadas suaves y significativas entre diferentes estados de una página o entre distintas «vistas» en Single Page Applications (SPAs). Esto permite lograr experiencias de usuario mucho más pulidas y con un aspecto de aplicación nativa, gestionando cómo los elementos se transforman, aparecen o desaparecen durante la navegación.
  6. Posicionamiento anclado (Anchor Positioning):
    Busca simplificar el posicionamiento de un elemento con respecto a otro elemento diferente (el «ancla»), independientemente de su relación en el DOM. Es ideal para elementos como tooltips, menús desplegables, o popovers que necesitan ubicarse de forma inteligente y adaptable cerca de su elemento «disparador» sin recurrir a complejos cálculos con JavaScript.
  7. Funciones Trigonométricas en CSS (sin(), cos(), tan(), etc.):
    Con un soporte ya bastante extendido, estas funciones matemáticas integradas en CSS están desbloqueando un nuevo nivel de creatividad para diseños geométricos, distribuciones de elementos no lineales (como en círculo), transformaciones complejas y animaciones orgánicas.

Estas innovaciones, junto con la madurez y el poder continuo de herramientas ya establecidas como Flexbox, Grid, las variables CSS y las container queries, hacen que el presente y el futuro del diseño y desarrollo con CSS sean increíblemente estimulantes.

¿Tienes alguna duda o pregunta?Envía el formulario y procuraré darle respuesta
Formulario de pregunta
Responsable » Jose Ramón Bernabeu Guillem. Finalidad » Ponernos en contacto. Legitimación » Tu consentimiento al marcar la casilla verificación. Destinatarios » Los datos que proporciones estarán ubicados en los servidores de LucusHost, proveedor de hosting de este sitio. Derechos » por supuesto tendrás derecho, entre otros, a acceder, rectificar, limitar y suprimir tus datos.
Si creees que esto puede ser de utilidad a alguien más, pues... compártelo que es gratis 🙂
Sitio alojado en un servidor verde según The Green Web Foundation

LucusHost, el mejor hosting

Aviso legal | Condiciones de contratación | Política de privacidad | Política de cookies
© 2017-2025 · Jose R. Bernabeu ·
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram