Container Queries

The @container CSS at-rule is a conditional group rule that applies styles to a containment context. Style declarations are filtered by a condition and applied to the container if the condition is true. The condition is evaluated when the container changes size.

An optional case-sensitive container-name can be provided which filters the set of query containers considered to just those with a matching query container name. Once an eligible query container has been selected for an element, each container feature in the <container-condition> is evaluated against that query container.

Media queries can only access and leverage information from the viewport, which means they can only work on a macro view of a page layout. Container queries, on the other hand, are a more precise tool that can support any number of layouts or layouts within layouts.

@container <container-condition> {
  <stylesheet>
}

@container (width > 400px) {
  h2 {
    font-size: 1.5em;
  }
}

@container not (width < 400px){}
@container (width > 400px) and (height > 400px) {}
@container (width > 400px) or (height > 400px) {}
@container (width > 400px) not (height > 400px) {}

// Named containment contexts
.post {
  container-name: sidebar;
  container-type: inline-size;
}

or

.post {
  container: sidebar / inline-size;
}

@container sidebar (width > 400px) {
  /* <stylesheet> */
}

Container type

• size : The query will be based on the inline and block dimensions of the container. Applies layout, style, and size containment to the container.
• inline-size : The query will be based on the inline dimensions of the container. Applies layout, style, and inline-size containment to the element.
• normal : The element is not a query container for any container size queries, but remains a query container for container style queries.

Container query length units

•  cqw : 1% of a query container's width
•  cqh : 1% of a query container's height
•  cqi : 1% of a query container's inline size
•  cqb : 1% of a query container's block size
•  cqmin : The smaller value of either cqi or cqb
•  cqmax : The larger value of either cqi or cqb

@container (min-width: 700px) {
  .card h2 {
    font-size: max(1.5em, 1.23em + 2cqi);
  }
}

 

 

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