Home > Hot in web development > Top 5 CSS Properties That You Probably Don’t Know

Top 5 CSS Properties That You Probably Don’t Know

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.

1. font-display

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.

In the last few years, developers have dealt with this problem by using JavaScript-based solutions like Font Face Observer or the Font Loading API. But things can change thanks to the font-display property.

The font-display property is meant to be used in a @font-face declaration. Thanks to it, we can control how fonts display with just one simple CSS line, without the need to use the JavaScript-based solutions. This means that our web pages can lose weight and (very likely) improve performance.

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.
  • swap: The fallback text is shown immediately while the custom font loads. When the latter is ready, it’s used in place of the fallback font. In most cases, this is what you might want to use and this is the behavior that the aforementioned JavaScript-based solutions have.
  • 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:

Read Full Article

The WebRecital is a dedicated User Interface/User Experience professionals who come together to provide design and research workshops, portfolio reviews, and educational outreach to the greater Seattle area.

Leave a Reply

Your email address will not be published. Required fields are marked *