New and Enhanced Properties
Learn how the latest CSS innovations, such as custom properties, aspect-ratios, individual transforms, and more, are revolutionizing styling and design possibilities.
We'll cover the following
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 h
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 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
:
.element {margin-block: 2rem;}
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
.
Another useful logical shorthand is inset
, which sets top
, right
, bottom
and left
at once.
Here’s an example of the margin-block
property: