✨ Container Queries
1aron opened this issue · comments
Description
Too many people have asked about this feature, and here is the proposal of Master CSS 2.X Container Queries.
Applying styles based on a container's size
<div class="container:inline-size">
<div class="font:32@container<=600">
<h2>Card title</h2>
<p>Card content</p>
</div>
</div>
Generated CSS
.container\:inline-size {
container-type: inline-size
}
@container (max-width: 600px) {
.font\:32\@container\<\=600 {
font-size: 2rem
}
}
Creating named container contexts
We intend to fallback any unknown at tokens to container names.
<div class="container:post/inline-size">
<div class="font:32@post<=600">
<h2>Card title</h2>
<p>Card content</p>
</div>
</div>
Generated CSS
.container\:post\/inline-size {
container: post / inline-size
}
@container post (max-width: 600px) {
.font\:32\@post\<\=600 {
font-size: 2rem
}
}
<div class="font:32@container<=600">
<h2>Card title</h2>
<p>Card content</p>
</div>
How to know @container<=600
is height or width?
<div class="font:32@container<=600"> <h2>Card title</h2> <p>Card content</p> </div>
How to know
@container<=600
is height or width?
As responsive breakpoints currently only support width, specifying height may require writing a full CSS query.
<div class="container:inline-size">
<div class="font:32@container(min-height:600px)">
<h2>Card title</h2>
<p>Card content</p>
</div>
</div>
@1aron Just throwing a different shorter syntax for defining the container which I'm currently using:
rules: {
'@container': {
match: /^@container/,
declare(value) {
let [name = '', type = 'inline-size'] = value.split('/');
name && (name = `${name} / `);
return {
container: name + type
};
}
}
}
inline-size
is chosen as the default value as it covers 99% of the use cases, and I use it like below:
<div class="@container" /> // container: inline-size
<div class="@container:sidebar" /> // container: sidebar / inline-size
<div class="@container:sidebar/size" /> // container: sidebar / size
and here is a different way for using the queries on the child elements that you might consider, like the following
@container/sidebar<=600 // for parent container named sidebar and <= 600px
@container/sidebar<=600|h // for parent container named sidebar and HEIGHT <= 600px
@moaali Looks good! @
represents CSS at-rules in Master CSS syntax, writing container:sidebar/size
directly should avoid confusion.
<div class="font:32@container<=600"> <h2>Card title</h2> <p>Card content</p> </div>
How to know
@container<=600
is height or width?As responsive breakpoints currently only support width, specifying height may require writing a full CSS query.
<div class="container:inline-size"> <div class="font:32@container(min-height:600px)"> <h2>Card title</h2> <p>Card content</p> </div> </div>
I think use font:32@container(min-h:600px)
is better than font:32@container(min-height:600px)
This feels like media queries or css breakpoints