For the past three years, I've done a lot of research and experiments related to the idea of style scoping and element queries in CSS. Since experimenting with element queries, I've noticed a big transformation in how I write HTML, and the fine-grained nature of element queries has improved the way I write CSS too.
In this article I am going to explain why I love Element Queries and how you can get started easily.
What are Element Queries?
Element queries are similar to media queries, except that their rules apply to the properties of elements instead of the browser's viewport.
Usually, when you are building a responsive web page, you are applying different responsive styles based on the width of the browser. This means that when you try to re-use a component from one layout in another layout, you often find yourself rewriting the responsive breakpoints to accommodate changes in the layout your component is fitting into without changing the styles inside the breakpoints very much. Thankfully, there is a solution we can use!
What are People Saying About Element Queries?
Why do I Love Element Queries?
Element queries open up new dimensions in the way you (as a CSS author) can design your responsive styles. You're no longer limited to conditions based on just width and height; you can utilize all-new dimensions of responsive expression. This includes applying styles based on the number of children or characters of text an element contains, an element's aspect ratio as it appears on the page, and many other new conditions beyond what media queries support.
More Powerful Responsive Styles
Being able to apply styles in all of these specific situations allows you to have more control over how different parts of the layout are styled. At the same time, by basing the responsive conditions of an element on the element's own properties, you are freeing those elements and their styles from being based on the browser's width or height. This allows you to isolate parts of your design to create layout-independent responsive components that are reusable in any layout.
Faster Prototyping
While prototyping a layout or component in the past, I would often write media queries, only to go back and alter or change the breakpoint (or the styles within them) multiple times before the layout was finalized. Perhaps trying to tie component-level responsive styles to layout-dependent breakpoints is a case of premature optimization. Once I had written media queries for a layout I was prototyping I found myself much less likely to go back and make changes. If you later need to add more specific support than you initially built, you either end up compromising your design by altering the breakpoints, or you end up adding additional breakpoints to solve problems as new content poses new challenges to your existing layout.
By using element queries during the prototyping stage of a layout, you're far more likely to adjust your responsive breakpoints, which lets you achieve simpler designs, even if you convert the width and height based breakpoints to media queries at the end of the prototyping stage. Since the breakpoints can apply to a single element, it's easy to add in support for very specific concerns.
You should never be afraid to change a breakpoint or switch around your responsive styles. If you're walking on eggshells every time you're editing your CSS, it's time for a more robust solution.
Smarter Selectors
Some of the flexibility gained by using element queries comes from the extended ability to select elements, too. Having element queries makes a number of new selectors possible, including a 'parent selector' for CSS, which allows you to style an element containing another element
Another way that element queries can make selecting elements smarter is via the ability to access values and properties from JavaScript. This allows you to create custom selector lists, or to select elements using means that CSS isn't normally aware of. This includes selecting elements based on their own text content, or selecting inputs by comparing the value of their attributes as numbers (like with <, >, <=, and >= operators), and many more ideas. If it weren't for element queries, I'd be stuck writing a lot of custom JavaScript to make sure my styles applied correctly in these sorts of cases.
Element-Based Units
Another thing element queries make possible are element-based units. CSS currently includes viewport-percentage units vw, vh, vmin and vmax, which represent 1% of the viewport's width, height, shortest edge and longest edge. When using element queries and scoped styles, you can make use of element-percentage units as well, which are a unit not currently supported by CSS. These are ew for a length equal to 1% of the scoped element's width, eh for 1% of the element's height, emin for 1% of the element's shortest edge, and emax for 1% of the element's longest edge. Using element-percentage units has come in handy for creating responsive typography, and it's similarly been useful for creating scalable layouts that show up inside containers that aren't full-width in the browser.
Scoped Styles
Currently, all CSS exists in the global scope. There are some workflows and tools that try to add the idea of modular scopes to CSS, including Aphrodite, CSS Modules, and Styled Components. Through element queries, you can accomplish similar benefits to their style scoping, with a scope that's 'alive' on the page as the user interacts with the page and the page's contents change over time. With element queries and scoped styles, the need to generate unique names for each of your elements is gone too, because you have increased power to select elements beyond what CSS usually allows.
Automating Research
Using element queries has also allowed me to experiment with other ideas and solutions that previously would have been much harder or laborious for me to experiment with by abstracting away a lot of the custom code that would have needed to be written (and re-written many times) to create these experiments. Some topics I've been able to research with this amplified ability due to element queries have been:
- aspect ratio solutions and a plugin idea
- responsive typography
- responsive tables
- new ways to select elements based on attributes and properties
Why Should you Love Element Queries?
Unlike many other approaches, element queries are likely to cut down on the amount of work you need to do to realize responsive components and layouts.
Make CSS Fun
Element queries make CSS powerful and fun again, and they make styling websites and web apps a breeze. It feels like the way that responsive styles should have been all along. If you're currently using media queries for responsive breakpoints, this is like media queries with superpowers.
Streamline Responsive Design
If you're currently writing custom JavaScript in your layouts to assist CSS in reaching all of the situations where you need styles to apply, it's likely that element queries can simplify and standardize your solutions and allow you to more easily re-use your code from layout to layout.
Often, custom layout-specific fixes are fragile and hard to re-use from template to template. But responsive support added with element queries is easier to move around from layout to layout than media queries are, so holding your styles in element queries can be a big time-saver when building layouts in a modular way.
Write Futuristic CSS
Another reason you'll love element queries is the new ways in which style scoping can allow you to select elements. For years, people have been begging for a parent selector in CSS, but with scoped styles, that's only the beginning. With new element-based units, you can finally have responsive border widths that scale with the element to create responsive CSS shapes.
The most fun part of designing with element queries is that it feels like time traveling to the future. It feels five years ahead of the CSS supported in browsers today, and because of this, a lot of the problems and pain points of today's CSS are easy to work around!
How to Get Started
Head over to the element queries website to check out the plugin, read the element queries spec to understand how the syntax works, and head over to Codepen to view demos built with element queries to see what's possible with style scoping, element queries, and the new selectors and units that they make possible.
Hope you enjoyed reading the article. Feel free to let me know what you think in comments below.