style()
A part of container queries that lets you style elements based on the computed value of a CSS property (usually a custom property) on their parent container, rather than just size.
It is documented as part of the CSS Conditional Rules, CSS Container Queries specification. This is an experimental technology. The syntax and behavior are still subject to change.
Syntax
/* Usage Example */
/* Change theme based on parent's --theme variable */
@container style(--theme: dark){
.card{
background: #222;
color: #fff;
}
}
style() Browser support
This feature is not Baseline because it does not work in some of the most widely-used browsers.