Re: Requirement for Element Queries

Hi Mikel, are you referring to the code at https://github.com/ResponsiveImagesCG/cq-demos <https://github.com/ResponsiveImagesCG/cq-demos> or https://github.com/ResponsiveImagesCG/element-query <https://github.com/ResponsiveImagesCG/element-query> ? If so, I’m the original author of that code, so I can probably answer a few questions.

That was originally written as quick proof-of-concept project two years ago and, unfortunately, hasn’t had much work since. It updates all the element queries when the window/viewport resizes, as you noted. The intent was always to add DOM mutation observers to the mix as well; I just never got around to it. I *think* that would catch all situations that might cause an element to change size, but haven’t spent the time to really think through it deeply.

Regardless, I believe the intent of Element/Container Queries is definitely to address the size of an element at any point in time, regardless of whether the window size is changing. Your case: “the container-based element queries should be applied, even if there is not a viewport change event” is exactly what’s intended! The fact that the demo code doesn’t do that is a shortcoming of the code, not a lack of intent for covering that use case :)

As far as web components goes, I think that’s probably orthogonal to element/container queries. Web components are pretty great, but they don’t necessarily give you any special new functionality that matters to element queries (for example, they don’t tell you any more about size changes than mutation observes can). Tying element/container queries to custom elements would also mean tying the idea of a CSS-based query to particular markup, which I personally don’t think is good or necessary to make it work. I think you should be able to apply a query to an <h1> as easily as you would to a <media-scape-element>.

Does that cover what you were interested in?

-Rob


> On Jun 9, 2015, at 2:53 AM, Mikel Zorrilla <mzorrilla@vicomtech.org> wrote:
> 
> Dear RICG. 
> 
> Please, find on this emails some comments to the "Use Cases and Requirements for Element Queries" draft document in https://responsiveimagescg.github.io/cq-usecases/ <https://responsiveimagescg.github.io/cq-usecases/> :
> 
> We find this work very interesting since we completely agree on the need to "define styles within an individual module on the basis of the size of the module itself rather than the viewport" and "the need for a standardized method of allowing content to respond to its container’s dimensions".
> 
> From the code in GitHub you provide, we find that you enable container-based element queries fired by a change on the viewport size. We think this could be extended to a change on the size of each element. We are working on the MediaScape (www.mediascapeproject.eu <http://www.mediascapeproject.eu/>) project, where we are creating tools and libraries to create a multi-device media application based on Web technologies. For example, if we have an application with N elements, and a user is consuming that application from two devices at the same time (let's say a TV and a tablet), the TV will show only some of the N elements, and the tablet will show other elements. In this scenario, if the user turns off the TV, all the elements will be presented in the tablet. All the layout in the tablet will be resized, changing the size of each element. The container-based element queries should be applied, even if there is not a viewport change event.
> 
> We are implementing this using Web Components as the elements. We find Web Components interesting, since they provide the containter/element concept.
> 
> We would like to know if you have thought about extending your proposal in this direction, adding this as a new requirement for the element queries. Don't hesitate to contact us for more explanations.
> 
> Best regards, 
> 
> Mikel Zorrilla Berasategi
> Senior Researcher & Project Manager 
> Digital Television and Multimedia Services
> 
> Vicomtech-IK4 - Visual Interaction Communication Technologies
> Mikeletegi Pasealekua, 57 - Parque Tecnológico
> 20009 Donostia - San Sebastián - Spain
> Tel: +[34] 943 30 92 30
> Fax: +[34] 943 30 93 93
> e-mail: mzorrilla@vicomtech.org <mailto:mzorrilla@vicomtech.org>
> www.vicomtech.org <http://www.vicomtech.org/>
> 
> *** member of IK4 Research Alliance ****
> www.ik4.es <http://www.ik4.es/>
> *** member of GraphicsMedia.net ****
> www.graphicsmedia.net <http://www.graphicsmedia.net/>
> 
> -----------------------------------------------------
> Vicomtech-IK4 is an ISO 9001:2000 certified institute
> -----------------------------------------------------
> 
> Legal Notice - Privacy policy (http://www.vicomtech.org/en/proteccion-datos <http://www.vicomtech.org/en/proteccion-datos>)
> 
> 
> 
>