Element Queries, Please

Media queries give web designers the ability to vary the CSS styles (so how the website’s information is presented) depending on the device or viewport width. For example this allows us to increase font sizes when a website is viewed on a larger desktop computer screen.

The problem with media queries is that they don’t suit all situations. Often when taking an object-orientated approach to CSS (OOCSS) we might have a component, such as a contact or call me back form, that could exist in a narrow sidebar and also a wider content area. In both positions (sidebar and content area) the device/viewport is identical but the layout of the component needs to adapt to the narrower space when it’s in the sidebar. This is the situation where media queries are of no use as the device/viewport width has not changed only the width of the element.

So what do we need to resolve this? We need element or selector-based media queries that would allow us to adapt the CSS for a component based not upon the width of the device/viewport but rather the width of the element itself.