Container style queries

Limited support Reference ↗

Size queries are the famous part, but a container can also expose local state through custom properties. Descendants can react to a theme or mode without checking viewport width.

.card {
  --tone: danger;
}

@container style(--tone: danger) {
  .card-icon {
    color: red;
  }
}

Current style queries mainly cover custom properties, and support remains uneven. Keep the default style complete outside the query.