Feature summary (what you would like to be able to do and where):
Please add support for @container queries.
Compatibility is good thanks to interop efforts:
https://developer.mozilla.org/en-US/docs/Web/CSS/@container#browser_compatibility
Spec:
https://w3c.github.io/csswg-drafts/css-contain-3/#container-rule
Use case(s) (list the steps that you performed to discover that problem, and describe the actual underlying problem which you want to solve. Do not describe only a solution):
This is Msz2001's new navbox prototype:
https://pl.wikipedia.org/w/index.php?title=Wikipedysta:Msz2001/Navbox.css&action=submit
Would be great to use (now widely supported) @container. Something like would provide a better experience (as currently no navbox is displayed on mobile):
.navbox2 {display:none}
/* desktop navbox */
@media (min-width:720px){
.navbox2 {display:block}
// ...
}
/* mobile/thin navbox */
@container (max-width: 700px) {
.navbox2 {display:block}
// ...
}This would work if main css would contain something like (can be added to MW:common.css, linter warns but doesn't block):
.mw-body {
container-type: inline-size;
}Benefits (why should this be implemented?):
The @container is better for responsive template layouts. All readers would benefit, not only those using mobile devices.
