Element queries

Media queries make it possible to limit the scope of CSS to a certain screen width, orientation, aspect ratio and other media features. All of these options are relative to the full browser window, the viewport. Not element queries.

With a fluid design your elements will have different and unknown sizes on different screens and devices. With media queries you can react to the size of the viewport. What you can _not_ react to is the width of the element itself in its current context. What you want to react to is the width of the element itself, not the viewport.

Enter element queries

Element queries is a concept that does exactly this. It is however not (yet) an accepted standard and as such only exists as polyfills for now. Element queries allows you to sculpt your CSS with much finer detail.


A perspective on CSS 3D transforms and transitions