Let's Not Forget About Container Queries

CSS container query has always been one of the features that developers strongly demand improvement. It is a general view that if we have container queries, we don't need to write so many global media queries based on page size. Because what we really want to control is a more local container, and now we can only implement it using media queries, simply because it is the best tool in CSS. I totally agree with this.

But there is also a view that appears from time to time: "Developers think that container queries are needed, but they are not." I don't agree with this statement. If the container query is available, we can obviously do a lot of useful things with it, the most important of which is to write cleaner, easier to port, easier to understand code. It seems to be a consensus to build component-based UIs today, which makes the demand for container queries even more obvious.

There are currently some modern JavaScript methods that can help us use container queries today - but that doesn't mean that this technology needs to stay in the JavaScript realm. It makes more sense in CSS.

Here are some of my thoughts on this topic at the end of 2019:

• Philip Walton's "Responsive Components: Solutions to Solve Container Query Problems" shows a good way to use JavaScript's ResizeObserver to solve the current problem. It performs well and works anywhere. The demo website is the best one because it highlights the needs of responsive components (although there are other documented use cases). Philip even says pure CSS solutions would be more ideal.
• About a year ago, CSS nesting caused a craze. Discussions seem to show that nesting is feasible. As a longtime advocate for rational Sass nesting, I agree with that. This makes me wonder whether the syntax of container query can take advantage of something similar. Maybe the scope of nested queries is limited to the parent selector? Or do you use an ampersand as prefix to represent media statements, as the current specification does with descendant selectors?
• Other proposed syntaxes usually involve the use of some kind of colon, such as .container:media(max-width: 400px) { } . I like this, too. Single colon selectors (pseudo-selectors) are philosophically "selecting elements under these conditions" - for example :hover , :nth-child , etc. - so media scope makes sense.
• I don't think syntax is the biggest obstacle to this feature; it's its implementation performance. As far as I know last, it's even more of a performance issue, it's disrupting the entire rendering process of how the browser works. This seems to be a huge obstacle. But I still don't want to forget it. There are a lot of innovations happening on the Internet, and just because it’s not clear how to achieve it today doesn’t mean that tomorrow no one will find a viable way forward.

The above is the detailed content of Let's Not Forget About Container Queries. For more information, please follow other related articles on the PHP Chinese website!