I have published a bunch more element query demos now, as well as some blog posts which help explain how the syntax I’m using works. It’s very versatile and coming in very handy for building responsive modules that can be deployed across multiple domains.
Please refrain from posting many links in your comments as that would get you caught in the spam filters.
You could instead create a page that contains all these resources elsewhere and link to that page from here.
Hi! I am a UX designer at an enterprise software company. Our flagship products are browser-based, and I find that element/container queries would be the most reasonable way to implement the kinds of designs I’d like to produce for our users.
EQCSS now watches mousedown, mousemove, mouseup, and input
Performance improvements (introduction of EQCSS.throttle())
We’re also hosted in cdnJS as well if you want to use a hosted copy instead of mirroring it yourself.
I’ve also written an article (~6k words) that should be published sometime soon (any day now) that explains the history, research, syntax, and concepts related to EQCSS so watch for that to come out!
Oh, we also have a Gitter chat room now where I would love likeminded folks who want to talk about element queries, container queries, EQCSS, or even other element query plugins to come hang out and discuss. We’re breaking new ground here, so comparing notes will help all of us get this figured out You’re all invited!
Implementation seems to be a big question mark at the moment, particularly because of performance worries. Has there been any consideration to defining what’s queried, as far as width and height, in CSS - like context-width: 30%? It seems like that would avoid circular dependencies, although it does have major limitations - flexbox, grid - it could be a much more performant first step…
@pmccloghrylaing There is already an implementation of the syntax I’ve been using available at http://elementqueries.com and performance is usable today. In the future there will be more direct ways to apply styles written in this syntax to the browser and page too, so performance will become even less of a concern in the future than it is today.
I am planning to use EQCSS in one of the projects. However the project uses polymer library. I faced some problems including EQCSS in a polymer component. With web components gaining importance is there a plan to include support for shadow dom and web components?. It would really fantastic if this could be used in a web component as we would like the styling also to be within the component and not depend on the screen width etc.
Hi @satyanath! Do you have a live example of the sort of components you’re using? I’d love to see if I can find a way to style them. I was doing experiments styling the shadowDOM with regular CSS last week so I’m wondering if EQCSS can get in there
Are there Polymer component demos online configured how you’ll be using them somewhere that I could experiment with?
Thanks for the quick response. Unfortunately the code I have is way too complex and the component is having lot of our product logic. I will try to generate a simple component and provide. I have a release next week - may be I can do that after that.
The code works in google chrome. However it is using the “shady” dom (a simulation of shadow dom by polymer). In the index.html if you change the “shady” to “shadow” in line number 13, the element query does not work.
Shady dom allows all the elements within a component to be visible and hence global queries on selectors will be able to access elements within a component, however that is not possible in shadow dom. If the code runs with the component context (i.e. this is set to the component - all the elements inside would be visible).May be this will give a clue of what can be done to make it work with shadow dom.
Now the code (both with shady and shadow dom) does not work in firefox. In firefox as there is no shadow dom support it would use shady dom only. In my other (actual product code which I cannot share) I could get EQCSS working in firefox also by putting the EQCSS script tag outside the template and dom-module tags. But here in this example I am unable to get it working. Not sure what is the issue.