Using container size and style queries – CSS: Cascading Style Sheets | MDN

February 28, 2024

Container queries enable you to apply styles to elements nested within a specific container based on the features of that container. The query returns true or false depending on whether the query condition is true for the container.

Container queries are similar to media queries. The @media at-rule enables applying styles to elements based on viewport size or other device characteristics. Similarly, the @container at-rule enables applying styles to elements based on a containing element’s size or other style features, rather than the viewport’s. Container queries have the same syntax rules and logical operators as media queries.

Source: Using container size and style queries – CSS: Cascading Style Sheets | MDN

A detailed guide from MDN to container size and style queries, now widely supported in modern browsers.