Ever since responsive web design has existed, developers have been asking about the possibility of designing DOM elements based on their actual size and not on the size of the viewport in the browser (with the help of media queries ). In fact, container queries (initially element queries) are probably the most requested CSS function that browsers still don't have .
There are already many , many , many posts that explain exactly why container queries are difficult to implement in CSS and why browser manufacturers are hesitant to implement them. If you want to enjoy it now, a little JavaScript can help:
c51c33e1533e68c3f8fd24633700789f
The whole thing then looks like this:
See the Pen by David Vielhuber (@vielhuber) on CodePen.
The breakpoints , selector and style attributes can be used to define the various breakpoints, the automatic selector and the type of classes added. If you are using the script, you can address the newly generated classes as follows:
c51c33e1533e68c3f8fd24633700789f
The use of container queries is particularly worthwhile for elements in overlays, popups, sidebars or custom elements - even now, for example, with the above script.