Re: Update on Element Queries

On Mon, Sep 5, 2016 at 7:08 PM, Marcos Caceres <marcos@marcosc.com> wrote:
> cc'ing Tab for comment...
>
> On September 6, 2016 at 6:44:44 AM, Tommy Hodgins (tomhodgins@gmail.com) wrote:
>> > The RICG has positioned itself as the unofficial authority
>> on this issue to people are looking to it for answers, but as somebody
>> working with element queries every day I have to ask, “Where is
>> the RICG?” From all appearances it seems dead in the water.
>
> Not at all... but I think a lot of us have been waiting to see what
> magic the Houdini effort produces. IIUC (which I might not, because
> I've not been following), it's supposed to enable user-land solution
> to things like element queries.
>
>> I’m ready to get moving on this! Is anybody with me?
>
> We are all with you :) But I'll defer to Tab on how the group should proceed.
>
> It might be that creating an informal specification for
> implementation, in the spirit of the Promises A+ spec, might be a
> great start.
>
> Having said that, it could be good to make necessary changes to:
> https://github.com/ResponsiveImagesCG/container-queries
>
> And maybe see if the stuff coming out of Houdini will be able to
> actually give us element queries.

My answer's the same as it's been for two years or so:

"Proper" element queries, that operate like Media Queries and
invalidate style "promptly", so that a script can change the width of
a container and then immediately query the children's style and get
up-to-date information, is extremely expensive to run. One container
query on your ancestor chain can slow down style application for every
single descendant; as it's reasonable to use container queries on
things fairly high up in your layout, this will often have very bad
effects.

If you're okay with things running a frame later or so, it becomes
much, much easier.  Easy enough that we can pretty simply just expose
all the primitives you need to roll your own implementation, with the
same perf characteristics of a native implementation. (That's the
ResizeObserver, which is currently moving thru the WICG standards
process.)

The remaining problem, then, is usability, and that's where Houdini
comes in.  Eventually Houdini will expose Custom At-Rules, so you'll
be able to write a small library that handles a "@--cq ... { <rules go
here> }" block in a stylesheet, looking just like an @media block. End
users will just include a <script> and then write normal-looking CSS,
no JS needs to be explicitly run by the user at any point.  Right now,
Custom At-Rules is planned to be in the next wave of Houdini specs,
after we get the Houdini parsing/OM proved out in the first wave.

~TJ

Received on Tuesday, 6 September 2016 23:00:28 UTC