@container queries

• First, you need to create a containment context on the element that will act as the container for your query. You can do this by using the container-type property with a value of size, inline-size, or normal¹. For example:

.post {
  container-type: inline-size;
}

• Second, you need to write a @container at-rule with a condition that specifies the size or aspect ratio of the container. You can use descriptors like width, height, inline-size, block-size, aspect-ratio, or orientation². For example:

/* If the container is larger than 700px */
@container (min-width: 700px) {
  .card h2 {
    font-size: 2em;
  }
}

/* If the container is larger than 700px and has a landscape orientation */
@container (min-width: 700px) and (orientation: landscape) {
  .card h2 {
    font-size: 2em;
  }
}

.post {
  container-name: sidebar;
  container-type: inline-size;
}

@container sidebar (min-width: 700px) {
  .card h2 {
    font-size: 2em;
  }
}

• CSS Container Queries - CSS: Cascading Style Sheets | MDN

• @container - CSS: Cascading Style Sheets | MDN

• CSS Container Queries: Use-Cases And Migration Strategies

• Next Gen CSS: @container | CSS-Tricks

Working example

<div class="card">
  <img src="image.jpg" alt="Image">
  <div class="content">
    <h3>Title</h3>
    <p>Some text</p>
    <button>Click me</button>
  </div>
</div>

.card {
  display: flex;
  align-items: center;
  border: 1px solid gray;
  padding: 1rem;
}

.card img {
  width: 150px;
  height: 150px;
}

.card .content {
  margin-left: 1rem;
}

• If the container is narrower than 400px, stack the image and content vertically instead of horizontally.

• If the container is narrower than 300px, hide the button and reduce the font size of the title and text.

• If the container is wider than 600px, increase the font size of the title and text.

• First, you need to create a containment context on an element that will act as the container for your query. You can use any element that wraps around your card component. For example, you can use a div with a class of container:

<div class="container">
  <div class="card">
    <!-- ... -->
  </div>
</div>

.container {
  container-type: size;
}

• Second, you need to write @container at-rules with conditions that specify the size or aspect ratio of your query container. You can use descriptors like width, height, inline-size, block-size, or aspect-ratio. For example:

/* If the container is narrower than 400px */
@container (max-width: 400px) {

}

/* If the container is narrower than 400px */
@container (max-width: 400px) {

 /* Stack image and content vertically */
 .card {
   flex-direction: column;
 }

 .card img {
   width: auto;
   height: auto;
 }

 .card .content {
   margin-left:0;
   margin-top:1rem;
 }
}

/* If the container is narrower than 300px */
@container (max-width:300px) {

 /* Hide button and reduce font size */
 .card button {
   display:none;
 }

 .card h3,
 .card p {
   font-size:.8rem;
 }
}

/* If container is wider than than600 px */
@container (min-width :600 px) {

 /* Increase font size */
 .card h3,
 .card p {
   font-size :1.2 rem;
 }
}

• @container - CSS: Cascading Style Sheets | MDN

• CSS Container Queries - CSS-Tricks

• CSS Container Queries Use-Cases And Migration Strategies

• Container Query Proposal & Explainer - OddBird

• [Inside The Container Query Polyfill -

Old Version

How it works

.container {
  font-size: 16px; /* default font size */
}

@media (max-width: 500px) {
  .container {
    font-size: 14px; /* font size for smaller containers */
  }
}

Benefits of @container queries

• They allow for more efficient and flexible responsive design, as developers can tailor styles to specific container sizes.

• They simplify code by allowing developers to avoid unnecessary duplication of styles for different screen sizes.

• They provide a more intuitive way of thinking about responsive design, as developers can think in terms of container sizes rather than device sizes.

Browser support

• CSS Container Queries Polyfill

• EQCSS

• CSS Container Queries: Once More Unto the Breach