css-container-queries.md

CSS Container Queries (container-type, container-name, @container)

CSS Style Queries

figure {
  container-name: figure;
  --featured: true;
}

@container figure style(--featured: true) {
  figcaption {
    /* Custom styling */
  }
}

• Container Style Query Explainer by Miriam Suzanne
• CSS Style Queries Use Cases
• CSS Style Container Queries (custom properties) #828
• #10744 Allow applying style rules to the container itself

CSS scroll-state() container queries: the stuck query

• Explainer

#sticky {
  container-name: main-nav;
  container-type: sticky;
  position: sticky;
  top: 0;
  height: 100px;
}

@container main-nav scroll-state(stuck: top) {
   box-shadow: var(--shadow-5);
   border-radius: var(--radius-3);
   margin: var(--size-5);
 }