- Posted at
Container queries are a new feature that is being developed for CSS, which will allow developers to write CSS styles that adapt to the size of the container, rather than the size of the viewport. This is a significant shift from the current approach, which is based on media queries that adapt to the size of the viewport.
Container queries work by allowing developers to define CSS styles that apply to an element based on the size of its parent container. This means that developers can create responsive designs that adapt to the size of the container, regardless of the viewport size. For example, a container query might allow a developer to define a CSS style that applies to a specific element when it is inside a container that is wider than 600px.
While container queries are not yet widely supported in CSS, there are several experimental implementations available that developers can use to experiment with this new feature. These implementations include CSS preprocessors like Sass and Less, as well as experimental CSS libraries and frameworks.