CSS features to follow or use right now.

CSS is becoming increasingly functional over time, where it was once considered too declarative. Many features that made SCSS preprocessors what they are today are now arriving or have already arrived in native CSS. Even though browser support often takes a little time, migrating is worth it in terms of DX (Developer Experience). Take the example of SCSS variables, which are not accessible at runtime, whereas the CSS variables that came later are.

We will look at the most anticipated CSS novelties at unflux and how they will improve accessibility, DX, or the performance of your digital services.

When should you adopt new CSS features?

At unflux, the rule is quite simple. Based on https://caniuse.com/, we ensure that the desired feature is supported by at least 95% (and without prefixes). This value allows us to cover a wide range of users, knowing that most of those left behind are (very) old browsers. Safari, Chrome (and its derivatives), Firefox, and others are always included in the 95%.

1. Container Queries

Principle

Let’s start with a responsive-related aspect. Whether building layouts with flexbox, grid, or anything else, it is very rare not to use Media Queries. These small declarations allow specific styles to be applied depending on the size of the viewport, i.e., what is visible on the screen. This is great for globally managing a layout but can quickly become a headache for smaller parts of a design.

Container Queries are a game-changer. Instead of basing the resizing of an element on the viewport size, we base it on the size of its parent. This will be especially useful for highly dynamic applications where the layout can change rapidly without necessarily changing the screen size.

Example

Taking the example of a product grid next to a sidebar with filters that can be expanded or hidden. The width of the grid will therefore depend on whether the sidebar is present or not. Container queries will allow the width of the grid to dictate, for instance, displaying images of different sizes.

Support

Currently, 76.93% of devices support this feature. Too few to be used in production but enough to be tested and to start becoming familiar with the principle.

2. The prefixes :is, :has, and :where

Principle

This time, we’re not talking about a property but rather a novelty (actually, several) at the selector level. :has makes it easier to target elements based on their children, something that was almost impossible until now—even with preprocessors, it often required using JavaScript. :is, on the other hand, simplifies CSS writing. While it doesn’t necessarily add new capabilities, it reduces the number of lines written.

Example

• :has: If we want to apply a different style to a .card element depending on whether it has an image or not, we would write .card:has(img).
• :is: Instead of writing .card .content h1, .card .content .title, .card .content .paragraph to apply the same style to these elements, we can write .card .content > *:is(h1, .title, .paragraph).

Support

Unfortunately, none of these three selectors are yet sufficiently supported. :is, :has, and :where are currently supported at 93.06% (97% without prefixes), 81.7%, and 90.44%, respectively.

3. New Measurement Units

Principle

This time, we’re focusing on measurement units. The new arrivals will greatly simplify our work by improving DX and indirectly enhancing performance. Here is a list of the most important ones in our view:

• dvh/dvw: current viewport height/width, excluding the browser interface
• svmin: selects the smallest value between svw and swh

Example

Today, using 100vh takes the user interface into account. On mobile, this results in forced scrolling because the search bar (notably on iOS) is included. By using dvh, we only account for the part visible to the user. This simplifies development and avoids relying on JavaScript to calculate a “realViewport,” which adds unnecessary logic (and potentially reduces performance).

With svmin, it becomes much easier to create square elements. You can use this unit for both height and width, and it will always be consistent, unlike percentages, vh, or vw.

To put it plainly

Plenty of exciting and highly promising new features that we have tested and approved at unflux. Now, we just need them to be supported by 95% of browsers to use them on a larger scale. And if you want to stay ahead of the curve, why not integrate them into your next web project right away?