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 .
The whole thing then looks like this:
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:
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.