— by Nesim
Container (size) queries are a new feature that allows us to style elements based on the size of their container. This also brings us new units, based on the container size, to use in our CSS.
Bonus: Container style queries
Container style queries are an experimental feature to apply styles to an element based on its containers specific CSS properties. Currently, it is only supported by Chromium-based browsers. Also, only CSS custom property values can be used for now.
/* Set a custom property on every even container */
.container:nth-child(even) {
--variant: dark;
}
/* Button inside container within a parent with --variant: dark */
@container style(--variant: dark) {
.button {
background: rgb(255 255 255 / 0.9);
color: #000;
}
}