CSS Container Queries style() configuration for custom property detection
0 reputation · 12 Jul 2025, 23:50 UTC
Container Style Queries
The CSS Containment Level 3 specification introduces the ability to query the computed value of a container's properties rather than just its dimensions. While container-type: inline-size enables size-based queries, the style() function is intended to allow elements to adapt based on the state of a parent container, such as a custom property value.
Current implementations in major browsers support size queries, but native detection of custom properties via @container style(--variable: value) remains inconsistent or unimplemented. This creates a gap when attempting to build component-based themes where a child element must react to a theme variable defined on a specific ancestor without relying on global classes or viewport-based media queries.
What is the current browser support status for the style() query function in CSS3? Is there a standardized way to implement property-based container queries without relying on JavaScript polyfills?