02 October 2023
Learn four relatively new CSS properties that could change the way you code in the future. Three of these properties can help you code a more responsive UI. These properties are not totally "new". They have been in development for several years and now are partially or fully supported in most major browsers.
Container queries are an alternative to media queries, which check the user's device viewport and/or other characteristics. Instead, container queries check the container of the target element and apply styling based on its size.
The container-type is one of the two new properties introduced to make your container queries work. This property makes the element a containment context and tells the browser how to calculate the size of its container element.
If you are not sure what to use, it is recommended to use inline-size for performance reasons.
Possible values | Description |
|---|---|
normal | The default value. This makes the element to be a non-containment context. |
size | This makes your element a containment context and calculates the size of your container based on both the inline and block dimensions. |
inline-size | This makes your element a containment context and calculates the size of your container based on the inline dimension only. |
Another new property introduced is the container-name. This optional property tells the browser the name of your container and helps you target it correctly. This can be useful for applying different styles to different containers.
Container queries are an experimental API that was first introduced in 2016. Although they are still experimental, they are now partially supported in many major browsers. Container queries are not a replacement for media queries. They have different purposes, but they can be used together to create a more responsive UI.
An illustration of what's the difference between media queries and container queries
A quick summary of what makes media queries different from container queries.
Characteristic | Media queries | Container queries |
|---|---|---|
Target | Top-level document | Any element with containment context |
What they check | Viewport size or other device characteristics | Target element's container |
Flexibility | Less flexible, but easier to use | More flexible, but more complex to use |
Browser support | Supported by all major browsers | Supported by all major browsers, but still considered experimental. |
Chrome | Firefox | Edge | Safari |
|---|---|---|---|
106 | 110 | 106 | 16 |
We have been defining the range of our media queries for so long with the min- and max- prefixes such as follows:
With the new syntax, we can now write our queries using common mathematical comparison operators such as:
< - less than
> - greater than
<= - less than or equal to
>= - greater than or equal to
= - equal to
Now, let's convert our first media query above which uses the prefix syntax to range syntax.
With this, it's more readable and more precise. How about if we want to specify multiple ranges?
Both media queries target screens with a width not less than 768px but not greater than 1280px. This example might be confusing for some since <= usually means "less than or equal". But in this query, the <= means "between the two values".
This new syntax does not change how media query works. Meaning, you can still use logical operators such not, and, or, and only together with range syntax.
This new syntax is not a replacement for the prefix syntax. This is simply a new way to write media queries and does not mean you have to rewrite all your existing ones. The prefix syntax is still far more supported in all browsers. The range syntax is supported in major browsers but not in Internet Explorer 11.
Chrome | Firefox | Edge | Safari |
104 | 63 | 104 | 16.4 |
The aspect-ratio property allows you to specify the ratio of an element's width and height. This means that your element's proportions will be maintained regardless of the container or viewport size.
To make this work, height or width must have an auto value. For example, if the width is fixed, the height will automatically adjust to maintain the aspect ratio. If both have fixed values, then the aspect ratio will not have any effect.
The possible values are auto and a preferred ratio. Most common aspect ratios are as follows:
16:9 - Most common aspect ratio for videos.
4:3 - Also known as the fullscreen aspect ratio. Most commonly used in television and films.
The aspect ratio can be overridden by defining the min-width, max-width, min-height, and max-height properties.
Chrome | Firefox | Edge | Safari |
88 | 89 | 88 | 15 |
CSS nesting is not a new property, but a new way to write your CSS. It allows you to nest one style rule inside another. By using the & selector, you can reference the parent selector inside the nested rule. This has been a common feature of CSS preprocessors such as Sass and Less.
In the example above, you can see how it eliminates the need to re-type the .parent selector again. Imagine how hassle it is to copy-paste or re-type long-named selectors.
CSS nesting can also be used with CSS pseudo-selectors, such as :hover, :after, :before, and more.
To summarize, CSS nesting enables you to:
Avoid repetitive selectors, making your code more concise and easier to read.
Group related styling together, making it easier to maintain
To keep your code readable and maintainable, it is recommended to keep your nesting to a maximum of three levels. Nesting too deeply can make your code difficult to read and maintain.
Chrome | Firefox | Edge | Safari |
|---|---|---|---|
120 | 118 | 117 | 17 |
New CSS properties are exciting, but it's important to use them with caution. I recommend keeping your old code intact and using these new learnings in your new code.
I hope this blog post has given you a good overview of some of the new CSS properties that are available, and most likely will be fully supported in the near future. Experiment with them in your own projects and see how they can help you create more responsive design and beautiful code.
And remember, always test your code thoroughly before deploying it to production.
Learn more