CSS (or Cascading Style Sheets) is bringing some new features to help you put some styles on your web pages in the most efficient way. In this article, we are going to go through the ones that will most likely make your coding easier in 2023. Some of them were available already but weren’t supported by all modern browsers until now.

When creating a web page for mobile, we are usually relying on Media Queries in order to adapt the layout based on the screen size. But what if you want to apply modifications based on the size of a content block? That’s what Container Queries are for. They allow you to modify the style of an element based on the size of the parent, unlike the Media Queries which apply the changes based on the size of the viewport.

When developing a web page it is important to take into account the size of the screen. One way of designing with viewport is by using the viewport height unit, vh/vw (100vh being 100% of the height of the screen).

With CSS preprocessors like Sass or Less, we can nest a CSS style rule within another rule. It allows developers to write clean and understandable code by reducing redundancy and grouping lines. This is finally possible with native CSS with the syntax & or @nest.A good way to give your website some animations or transitions is to use the transform property in CSS. The problem is if you want to change just one of the transform properties later on, you must write the whole definition again for all properties.In this example, the block will reduce its scale when we hover it with the mouse but we don’t want to have this effect when the screen is lower than 800px.

As we see from all the 3 properties (translate, rotate and scale), only scale changed here, yet we have to repeat all other parts.
This is not the case anymore, with individual transform properties we can adapt each property individually.