Desde la llegada del diseño web responsivo, los desarrolladores han estado solicitando la capacidad de aplicar estilos a los elementos DOM en función de su tamaño real en lugar del tamaño de la ventana gráfica del navegador (mediante consultas de medios ). De hecho, las consultas de contenedores (originalmente consultas de elementos) son probablemente la característica CSS más solicitada que los navegadores aún no ofrecen .
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.