Actualmente el ecosistema de los navegadores y CSS viven cambios importantes:
- Las consultas de contenedor @container
- El selector relacional :has()
Hoy ambas propiedades cuentan con soporte en Chrome, Firefox, Safari y Edge. Estas propiedades pueden usarse en producción sin ningún tipo de polyfill.
También podemos definir el nombre del contenedor con la propiedad: container-name y procedemos a realizar la consulta indicando el nombre.
Consultas de contenedor: diseños adaptados al espacio
¿Qué son?
Las consultas de contenedor nos permiten definir un componente y que los estilos cambien dependiendo del tamaño del contenedor superior (padre) en el que está ubicado, en lugar de depender del ancho total de la ventana @media (viewport). Esto nos da la posibilidad de volver los componentes modulares y autónomos, adaptados inteligentemente a su contexto.
¿Cómo funcionan? Y un ejemplo pŕactico
Según el ancho del contenedor, es como adapta las columnas:
Selector :has() estilos condicionales en CSS
¿Qué es?
El selector :has() permite aplicar estilos a un elemento en función de si contiene cierto descendiente.
¿Cómo funcionan? Y un ejemplo
En este ejemplo evaluamos mediante la consulta de contenedor si el elemento h1 está inmediatamente seguido por el elemento h2 para aplicar un margin distinto:
Tips pŕacticos:
Usar @container para componentes reutilizables y modulares.
Combinar :has() con consultas de contenedor para crear diseños condicionales.
Si tu HTML tiene un árbol DOM muy grande, evita usar :has() en elementos de nivel superior (por ejemplo, body, main o section con muchos descendientes), porque el navegador tendría que revisar demasiados nodos cada vez que aplique estilos.
En su lugar, usa :has() en elementos más específicos o finales, como un form, una .card o un .list-item. Esto mantiene las reglas rápidas y eficientes, sin afectar el rendimiento de la página.
Conclusiones
Las consultas de contenedor y :has() han pasado de ser experimentales a convertirse en herramientas del CSS moderno.
- Con @container los componentes se adaptan al espacio disponible.
- Con :has() puedes definir estilos condicionales según el contenido.
Estas propiedades permiten crear interfaces más modulares, adaptativas y legibles, si aún no las usas, ahora que conoces como funcionan es momento de incorporarlas a tus proyectos para darles mayor calidad y profesionalismo.
