What do we want to be able to query?

[eeeps]

Element width, is an obvious one.

Height, sure.

Aspect ratio? Why not! But what about arbitrary CSS properties, or, say, lines of text or number of children?

There are use cases for all of these things. What's practical to require from the start, and how should the door be kept open for queries of the future?

[Wilto]

I think I’d want to keep this first pass focused on width/height—that way we can work out the mechanism for container queries without needing to figure out/spec a whole mess of specific features up front.

That said, we should probably get the idea of future query-able features into the use cases doc, so we don’t run the risk of locking the mechanism itself into width/height only.

[tomhodgins]

I've experimented with many different breakpoints, but I keep coming back to this core set of features:

• width
• height
• number of characters of text
• number of children
• scroll position
• aspect-ratio
• orientation

I've implemented these features in a few different plugins so you can see how it can work and what CSS + JS are required to make it work right now in the meantime. Hopefully standardization can solidify some of these approaches into something that works!

• core element query features in EQCSS
• core element query features in CSSplus/Selectory
• core element query features in ReproCSS

I would also like to note - 'number of lines of text' turns out to be less useful as a responsive breakpoint in practice than it might appear at first. Even when you're dealing with numbers of lines of text in a layout, the solution often lies in knowledge of characters and/or the width of the element.