✨ Container Queries

[1aron]

Description

• 43

• https://developer.mozilla.org/en-US/docs/Web/CSS/@container

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
    }
}

[MarkSky]

<div class="font:32@container<=600">
        <h2>Card title</h2>
        <p>Card content</p>
</div>

How to know @container<=600 is height or width?

[1aron]

<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>

[moaali]

@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

[1aron]

@moaali Looks good! @ represents CSS at-rules in Master CSS syntax, writing container:sidebar/size directly should avoid confusion.

[MarkSky]

<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)

[neneodonkor]

This feels like media queries or css breakpoints