Every year new CSS properties are standardized and made available in major browsers for you to use. They are meant to make the life of web developers like you easier, and to allow the creation of new and beautiful designs.
In this article, I’ll cover 5 CSS properties that are relatively new, that you’ve probably never heard of before and that I find very interesting. The aim of this article is to give you an overview of what they are, which values you can use, their use cases, and also some examples.
In particular, we’ll cover CSS properties related to:
- writing display (font-display and writing-mode);
- rendering performance improvements (contain and will-change properties);
- creation of new, fancy designs (clip-path)
Before starting, I want to remind you that, when dealing with new CSS properties, it is always a good idea to check their support and potential cross-browser issues. In that regard, Can I use is the holy grail.
The font-display property allows you to control how a downloadable font renders before it is fully loaded or what happens in case the download fails. How custom fonts are used and how much time it takes to load them are extremely important points to consider. Until the custom font used is loaded, in fact, users are stuck looking at blank content for a certain amount of time. And we know that, if things don’t load quickly, the users leave the page. The exact time of invisible text depends on the browser used, but it’s usually around 3 seconds. For the web, this period of time is quite long.
If you’re thinking of employing font-display, you can use one of these five values:
- auto: The default value. This is equivalent as not using the property at all and the result is that the browser hides text that uses custom fonts that are loading. When the fonts finish loading, the text is shown.
- block: The time that the browser hides the text while waiting for the custom font to load is reduced (for example to 1 second). As a consequence, a fallback font is displayed more promptly. However, the browser will wait indefinitely for the custom font to load and it’ll always swap the latter as soon as it’s available.
- fallback: There will be a short period of time (around 100ms) that text styled with custom fonts will be invisible. The unstyled text (i.e. the text using a fallback font) will then appear if the custom font isn’t ready. Once the custom font loads, the text is styled with it. However, if too much time passes, the fallback will be used for the rest of the page’s lifetime.
- optional: This value is very similar to fallback. The affected text will be invisible for a short period of time (again, around 100ms), and then the fallback font is adopted if the custom font is not ready. But with this value, the browser has the freedom to decide whether or not a font should even be downloaded and used. A reason why the browser might decide that it isn’t a good choice to download the font is a user on a slow connection. You might want to employ optional for those fonts that aren’t really part of the branding of the website or aren’t crucial to achieve the design of the page.
An example of use of this property is shown below: