Current Situation

Nowadays, when a coder wants to adapt a website to the target device, they have to resort to either mathematical functions and relative units, @media queries, or some combination of these two approaches. This is a relatively easy way to create responsive websites, especially with the features provided by CSS frameworks like Bootstrap and similar. However, this approach also has its pitfalls. For a beginner, it is difficult to understand all the relative units, and even when they see them used, they still don’t know their exact purpose (e.g., fluid font sizes). Another issue is the dependence on window size instead of being able to adjust elements based on the size of the space in which they are placed. The latter problem is solved by @container queries, which add even more improvements.

The New Feature: @container queries

The aforementioned new feature in CSS finally allows coders to adjust individual elements based on the size of the container in which they are placed. In addition to size, elements can also be adjusted based on the style values calculated by the browser for the given container. This is useful, for example, if you want to display light text on a dark container and vice versa. The ability to respond to CSS properties is not yet supported. Individual containers can be named, so even if there are multiple nested containers, you can specifically refer to one higher than the nearest one to the element.

What About Support?

According to caniuse, the support is quite solid. As browsers strive to update their cores as quickly as possible to keep up with the latest popular trends, it has recently not been a problem to use modern and new specifications, whether it’s CSS or JavaScript.

Usage

The usage is relatively easy. To make an element serve as a container, you simply need to set the CSS property container-type: inline-size, creating a new content block. If you also want to name the container, add the property container-name: name-of-container, or you can combine them into one: container: name-of-container / inline-size.

You can then reference it through a @container query, in which the body content is executed or not based on the condition. The condition can consist of multiple sub-conditions connected by logical operators. Conditions can be based on size, CSS properties, or variables. You can see more in the example.

Units

It wouldn't be a proper CSS update without new units. Several relative units have been added to container queries, which might look like a jumble of letters at first glance, but they have their significance.

• qw - 1% of the container's width
• qh - 1% of the container's height
• qi - 1% of the container's inline* size
• qb - 1% of the container's block* size
• qmin - the smaller value of qi and qb
• qmax - the larger value of qi and qb

Further Usage and Development in Web Creation

Even though the introduction of container queries in CSS is a significant revolution in how responsive websites will be written, media queries are not obsolete. Due to their global nature and support, where container queries lack the ability to use styles within conditions, media queries are still very relevant. Another reason is that media queries are much more established and deeply rooted in commonly used CSS frameworks.

If you are considering the development of a custom website or web application, do not hesitate to contact us.