Hola, Amigos! Ihor Melnikov, Frontend developer of the Amiga company, is in touch. You may have already heard about the technologies I describe in the article, but did not use them because you thought that they were not supported by browsers. Now you can safely take them in your arsenal and use them in your projects!

I decided to collect in one place information about several new features that I started using myself and recommend to you. And if you find this article useful, then let me know in the comments and I’ll keep sharing useful updates without you having to dig through guides and reference books.

The tools provided by CSS are constantly evolving, many new features appear, but the main problem of using new features remains browser support. Sometimes you have to wait several years before a particular update gets enough support and you can use it.

1. New units of measurement svh, lvh, dvh

The most common problem on mobile devices when using vh is that the height of the navigation bar, which dynamically appears and disappears, is not taken into account when calculating the height. The svh, lvh, dvh units solve this problem by eliminating unnecessary scrolling.

Let’s start with Svh (Small viewport height). This unit of measurement specifies the smallest size of the viewport when the navigation bar is displayed.

Lvh (large viewport height) sets the dimensions of the largest viewport size when the navigation bar is hidden.

And finally Dvh (Dynamic viewport height) dynamically changes the height value based on whether the navbar is open or not.

These units of measurement can be used right now, according to the site can i use, they are supported in all modern browsers.

2. Container requests

A lot of people know about them, since container requests appeared a few years ago. Now their support has become sufficient to be used in real projects.

Container requests allow you to change styles based on the size of the block, rather than the entire screen, as opposed to min-width, max-width.

Let’s consider the most obvious example. We have a list of 4 cards, there are only 3 in a row. The last card should stretch to the full width, but at such a large size, the image and text should be on the same line.

To achieve this, the card container (.card) needs to define the container-type property in the inline-size value. Now you can set styles directly for child elements. As long as the card is larger than 400px, the display flex property will be added to it.

.card {
    container-type: inline-size;
}

@container (min-width: 400px) {
    .card__container {
        display: flex;
        align-items: center;
    }
}

Here’s what happened.

This is just a small example of the many variations of using container queries. They are now widely supported and can be used.

3. New Media Queries Range syntax

It’s a small but nice change that allows for a more intuitive experience syntax in media queries. The usual media query syntax looked like this:

@media (max-width: 1000px) {
    /* ... */
}

@media (min-width: 1000px) and (max-width: 1400px) {
    /* ... */
}

With the new one, you can make this entry shorter and easier to understand.

@media (width <= 1000px) {
    /* ... */
}

@media (1000px <= width <= 1400px) {
    /* ... */
}

In addition, the following comparison operators are available:

• < compares or is less than one value of another;

• > compares or exceeds one value of another;

• = compares one value to another;

• <= compares less than one value to another;

• >= compares more than one value to another.

4. Functions clamp, min, max

These functions allow you to calculate the dimensions of elements. Inside them, you can perform calculations in the same way as in calc.

The min function takes a value, choosing the smallest one. Many values ​​can be passed. For example, if you specify 50vw and 500, if the viewport size is 1400px, 500px is used because 1400/2 = 700, 500 < 700. But when the viewport size is smaller than 1000px, the value 50vw will be used.

Also, relative values ​​can be compared with each other in these functions. The max function works the same as min, except it returns the maximum value.

.element {
    width: min(50vw, 500px);
}

.element {
    width: min(10em, 30%, 30px);
}

And finally clamp. The function takes 3 parameters and sets the value between the upper and lower bounds.

.element {
  width: clamp(250px, 100% / 3, 900px);
}

As long as the element is not less than 250px and not more than 900px, its width will be calculated by the formula 100% / 3.

5. Text-wrap property: balance

The latest CSS innovation under consideration is the most controversial among all the ones described above because it is not supported in Safari and Mozilla. But even if text-wrap: balance not applicable, the property won’t break anything, so you can use it. With this property, the browser tries to balance the number of characters in a line so that they are approximately equal in width.

Important: text-wrap: balance in its current implementation allows text to be balanced up to 4 lines. If the text is larger, it will not work.

We looked at 5 new CSS features that will help in responsive layout. If you found it useful, subscribe to share the latest CSS innovations available for use today.