cq-usecases
cq-usecases copied to clipboard
WICG
Real-world usage examples
I'm thinking we can use this issue as a grab bag for examples of in-the-wild container query use.
Don't worry about whether it's a New Use Case, or worth posting — just post!
For starters – Tommy Hodgins listed 519 sites that were using EQCSS, back in March, here: https://docs.google.com/spreadsheets/d/1wAdVV5S0WnRDuN-p42J6DHGfVP0Hq2vfeeKaeiEJ7Eg/edit#gid=266571668
Here's what I usually check: https://publicwww.com/websites/eqcss/
To quickly peek at what queries are loaded into EQCSS.js on any page where it is used, no matter their origin (link, style, script, or JS), you can open a JS console and view: EQCSS.data
You can expand to view the selector(s), condition(s), and the CSS rules held inside the query. I hope this makes checking out real-world usage of EQCSS a little easier :D
Welp here’s 5000+ websites using css-element-queries: https://publicwww.com/websites/ResizeSensor.js/
and at least 200+ with @ausi's cq-prolyfill: https://publicwww.com/websites/cq-prolyfill/
I also use BuiltWith to search for sites using specific plugins, but unfortunately it doesn't let me share my reports publicly. You can preview a number of results from a report with a free account, so that's another handy tool for this type of research!
It isn't in production, but the layout is very typical for a media component. https://codepen.io/dennisgaebel/pen/eGVpVp
Yeah, "Media" components and social posts are great examples I think. The latter being the reason I got into the whole thing.
Meanwhile, css-element-queries has over 26.000 web pages using it (https://publicwww.com/websites/ResizeSensor.js/, although looking for ElementQueries.js is probably more realistic), also on npm it had over 52.000 installations last week. I guess we find plenty of use-cases at the publicwww.com page and in the dependents list at https://www.npmjs.com/package/css-element-queries or Github search, see https://github.com/search?q=css-element-queries&type=Code.
My guess is that component oriented frameworks like React and Angular, or other standalone libraries, like chart, wysiwyg, etc libraries try to improve the responsiveness without decreasing DX for their customers, since as we all know making currently a third-party module responsive is hard or near to impossible in a pretty way, as the third-party provider does not know in advance in which layout their module is placed, and they can not prepare media-queries for example. They can only prepare some classes you can then manually insert using Javascript depending on the current viewport - ugly. And they know it, that's why I get more and more emails also from commercial third-party module providers to check if their use-cases are covered. However, also many commercial web applications use css-element-queries when they have modularised frontend and do not want to fight with media queries.
An interesting trend I've been seeing in the React world: people seem to move away from media-query and similar solutions in favour of simply detecting the size of a given component (ResizeObserver for ex.) and either apply different styles, or render different layouts all together.
Where the latter would not be possible even if we did have a standard solution in CSS. Applying styles conditionally also comes naturally if you use a css-in-js lib that supports dynamic styles.