It’s possible to think of Element Queries as a natural extension to CSS Media Queries. We would summarize the requirements for media queries like this:

Topics

• Media Queries
• Element Queries

1. Element Queries in HTML
2. Element Queries in JS

Media Queries

• A Media Type
• Query Condition(s)
• A Style Sheet

In CSS this gets exposed as:

@media screen (min-width: 350px) {
  pre { padding : 5%; }
}

The @media wraps the stylesheet for the particular min-width, the screen part is specifying the media type, and (min-width: 350px) specifies the query condition to the stylesheet.

In Hyper Text Markup language (HTML) the same functionality of media query is exposed through the media="" attribute on <style> and <link> tags :

<link rel="stylesheet" media="(min-width: 350px)" href="data:text/css,pre { padding : 5%; }">

<style media="(min-width: 250px)">
  pre { padding : 5%; }
</style>

Also, in JavaScript the media querying functionality is available to authors using the window.matchMedia:

if (window.matchMedia('(min-width 350px)').matches) {
  css = 'pre { padding : 5%; }'
}

In order to extend these syntaxes in HTML, CSS, and JavaScript to cover the functionality needed to describe element queries, let’s take a look at the requirements for element queries.

Element Queries

• A selector (list)
• Query Condition(s)
• Event Listener(s)
• A Stylesheet

Here we have a couple new ideas, a selector to apply the stylesheet too, and event listeners.

Element Queries in CSS

Normally JavaScript events are abstracted away from CSS authors – you don’t need to worry about window.load or window.resize when writing media queries, or for mouseover or mouseout when writing :hover, and also for focus or blur when using :focus, etc.

For the most part, I believe browser makers will be able to find a way to implement element queries in the most general sense without the need for CSS authors to specify the specific events they should listen to. In addition, enhancements may be made by listening to specific events related to the selector, and/or query conditions. If a query condition for scroll is used, the browser should be able to automatically listen to scroll events on the tags matching the selector used.

However, it is likely that performance improvements could be made by allowing authors to limit which events trigger a reevaluation of the query conditions using a whitelist.

Proposed CSS Element Syntax:

@element pre {
  pre { padding : 5%; }
}

Here the @element wraps the stylesheet, the pre specifies the selector, and we are lacking query conditions or events. This is a simple element query that would apply to the document as long as a <pre> element was found.

@element textarea (min-characters: 50) {
  textarea { background: #ededed; }
}

The Above example includes a query condition that counts the number of characters of text inside the element <textarea>

Still, The Questions Remain?

"What happens if there is more than one <textarea> in the document?"
It certainly looks like as long as any <textarea> has more than 50 characters, all <textarea> tags in the document will gain a style. Because of this, another concept is required: a scoped selector.

We can use $this as a placeholder inside selectors in the element query stylesheet, to represent each element tested that passes the query conditions.

@element textarea (min-characters: 50) {
  $this { background: #ededed; }
}

If we have multiple <textarea> presents on our site we have a way of targeting only those specific <textarea> elements that match the query conditions. But the use of this placeholder isn't limited to just applying styles to matching elements themselves - it should be able to be used anywhere in selectors in the contained stylesheet

@element .widget (max-width: 350px) {
  $this h2 { font-size: 1em; }
}

Element Queries in HTML

How could the same element query functionality be exposed to HTML? Perhaps through the use of additional attributes on <style> and <link> tags:

• selector for a selector list
• element for query conditions
• event for events

These could look like the following:

<link rel="stylesheet" selector="textarea" element="(max-characters: 5)" event="blur" href="data:text/css,$this { background: #ededed; }">

<style selector="textarea" element="(max-characters: 5)" event="blur">
  $this { background: #ededed; }
</style>

Element Queries in JavaScript

And to expose this functionality to JavaScript, perhaps something like window.matchMedia could be useful, maybe window.matchElement. It would work similarly to this:

document.querySelectorAll().filter()

So for an element query of (min-width: 500px) on <div> tags you would need a test like

document.querySelectorAll('div').filter(el => el.offsetWidth > 500)

This works fine, but the real power of window.matchMedia is that it's able to handle CSS units, rather than just working with pixels. Having the ability to do something like the following example would be better than what we have in JavaScript right now:

window.matchElement('div', '(min-width: 50em)')

References

If you're looking for syntax precedents for these ideas, or plugins that use something similar, check out:

• @element at-rule similar to EQCSS
• <link> attributes similar to Slinky
• <style> attributes similar to reproCSS

Get More Articles On – CSS