New and Enhanced Properties

Custom properties

With the end-of-life timeline started for Internet Explorer 11, it’s high time to use custom properties. Also referred to as “CSS variables,” custom properties allow us to define values that are reusable across our stylesheets. Custom properties can be used as an entire value for a property or as partial values, like hThe h represent 'hue' in hsl() function. in an hsl() definition. We can also modify custom properties in JavaScript.

Since custom properties aren’t static like variables in Sass or other preprocessor languages, they open up a lot of opportunities for more flexible, dynamic styles. Custom properties offer far more than just being CSS variables.

The aspect-ratio property

A new property that eliminates “the padding hack” is aspect-ratio. This does what its name suggests, allowing us to define an aspect ratio for sizing an element. The referenced hack was commonly used to maintain a $16:9$ ratio for video embeds. Now, this ratio can be achieved through this one property and the declaration aspect-ratio: 16/9 . It’s also a quick way to achieve a perfect square with aspect-ratio: 1.
Here’s a complete code of how to use aspect-ratio in conjunction with the older property object-fit to keep a consistent avatar size regardless of the original image ratio and without distorting the image.

Individual transform properties

Individual transform properties have been newly implemented across browsers. Previously, if we wanted to redefine the rotate() value within the transform property, we would have to duplicate the definition (or leverage custom properties). As of Chromium 104, we can now use the individual properties of translate, rotate, and scale.

Logical properties

If we want to manage content for an international audience, we can consider using logical properties. Available for most CSS 2.1 properties, logical variants consider the writing mode and flow of text. For standard English text, we would trade left/right for inline, and top/bottom for block:

As in the example above, logical properties also offer shorthands for setting two sides at once. For instance, margin-block in horizontal writing modes is equivalent to setting margin-top and margin-bottom.

Here’s an example of the margin-block property: