Desde que existió el diseño web receptivo, los desarrolladores han estado preguntando sobre la posibilidad de diseñar elementos DOM basados en su tamaño real y no en el tamaño de la ventana gráfica en el navegador (con la ayuda de consultas de medios ). De hecho, las consultas de contenedor (inicialmente consultas de elementos) son probablemente la función CSS más solicitada que los navegadores aún no tienen .
Ya hay muchas , muchas , muchas publicaciones que explican exactamente por qué las consultas de contenedor son difíciles de implementar en CSS y por qué los fabricantes de navegadores dudan en implementarlas. Si quieres disfrutarlo ahora, un poco de JavaScript puede ayudarte:
c51c33e1533e68c3f8fd24633700789f
Entonces todo se ve así:
See the Pen by David Vielhuber (@vielhuber) on CodePen.
Los puntos de interrupción , el selector y los atributos de estilo se pueden utilizar para definir los distintos puntos de interrupción, el selector automático y el tipo de clases añadidas. Si está utilizando el script, puede abordar las clases recién generadas de la siguiente manera:
c51c33e1533e68c3f8fd24633700789f
El uso de consultas de contenedor es particularmente útil para elementos en superposiciones, ventanas emergentes, barras laterales o elementos personalizados , incluso ahora, por ejemplo, con el script anterior.