Element queries
We need media queries at the component level in order to target specific element sizes in CSS. Element queries allow us respond to changes in an element’s size even when the viewport size does not change.
Media queries are not sufficient, and they become frighteningly verbose when we have to style elements that may exist in a range of wide and narrow containers.
Many of us have pitched our own solutions to query the media features of an element, including new CSS pseudo classes, classless queries, or a new display type that scopes media queries to an element.
Pseudo class solution
.component .child {
padding: 16px;
}
.component:query(min-width: 960px) > .child {
padding: 32px;
}
In the above solution, a pseudo class like :query is used to query multiple features. This solution conforms with existing CSS features like :not and :contains.
Pseudo class-less solution
.component .child {
padding: 16px;
}
.component (min-width: 960px) > .child {
padding: 32px;
}
In the above solution, parentheses assume the presence of a media query. This solution is a unique pattern, and requires the least additional markup.
Multiple pseudo classes solution
.component .child {
padding: 16px;
}
.component:min-width(960px) > .child {
padding: 32px;
}
In the above solution, multiple pseudo classes like min-width and max-width are used to query individual features. Several other pseudo classes are mapped to supported features, like max-aspect-ratio, min-device-width and max-resolution.
Viewport display solution
.component-frame {
display: viewport;
}
.component .child {
padding: 16px;
}
@media (min-width: 960px) {
.component > .child {
padding: 32px;
}
}
<viewport>
In the above solution, elements may assume viewport-like status, much like an <iframe> element, only without being an actual embedded frame. Additionally, a new element might be added that semantically represent uniquely framed sections of content.
I wish I could have cited my sources of information, but this service limits new users.
Anyway, I hope this provokes some thought and consideration. We need element queries because the responsive web is not limited to the width and height of a screen or window.
