Translator: Search for him a thousand times

The original link

Every year new CSS properties are standardized and made available in major browsers. They are designed to make it easy for Web developers to create new and beautiful websites.

In this article, I’m going to introduce 5 relatively new CSS properties that you’ve probably never heard of and that I find interesting. The purpose of this article is to give you an overview of what they are, what values you can use, their usage scenarios, and some examples.

Specifically, we’ll cover CSS properties related to CSS:

* Writing display (font-display and write-mode);

* Render performance improvements (contains and will-change properties);

* Create new fancy designs (clip-path)

Before I begin, I want to remind you that when working with new CSS properties, it’s always a good idea to check their support and potential cross-browser issues. Can I Use is an efficient tool in this respect.

1. font-display

The font-display property allows you to control how a downloadable font is rendered before it is fully loaded, or what happens when the download fails. How you use custom fonts and how long it takes to load them is very important. The user actually sees nothing but blank content for a certain amount of time until the custom font used is loaded. We know that if content doesn’t load quickly, users will leave the page. The amount of time your content is blank depends on the browser you’re using, but it’s usually about three seconds. That’s a long time for a network.

In the past few years, developers have been able to use javasjavascript based solutions such as Font Face Observer or Font Loading API. However, thanks to the “font-display” property, things are different.

The font-display attribute is used when @font-face is declared. With it, we can control the way fonts are displayed with a simple line of CSS, without the need for a JavaScript based solution. This means that our web pages can be smaller and (probably) more efficient.

When using font-display, you can use one of the following five values:

  • Auto: default value. This is equivalent to not using the property at all, with the result that the browser hides the text that is being loaded using a custom font. Displays the text when the font is finished loading.

  • Block: The time the browser hides text while waiting for a custom font to load is reduced (for example, 1 second). As a result, the default font will display faster. However, the browser waits indefinitely for a custom font to load, and as soon as it becomes available, it changes the font to custom.

  • Swap: Backup text is displayed immediately until the custom font is loaded before rendering the text with the custom font. In most cases, that’s what we’re looking for. The JavaScript script implementation mentioned earlier is basically the same as this.

  • Fallback: Text rendered with custom fonts is not visible for a short time (about 100ms). If the custom font is not finished loading, unstyled text is loaded first. Once the custom font has finished loading, the text will be styled correctly.

  • The optional effect is almost the same as fallback in that the text becomes invisible for a very short time and then loads the unstyled text. However, the optional option gives the browser the freedom to decide whether to use a custom font, depending largely on the browser’s connection speed. If it’s slow, your custom fonts probably won’t be used.

@font-face {
  font-family: AmazingFont;
  src: url('/fonts/amazingfont.woff2') format('woff2'),
       url('/fonts/amazingfont.eot') format('eot');
  font-display: fallback;
}

h1 {
  font-family: AmazingFont, Arial, sans-serif;
}

Copy the code

Support for this feature is still low in browsers, but things will improve soon. Chrome 49+, Firefox 46+, and Opera 36+ all support this property when using browser prefixes. However, Chrome 60 and Opera 47, the next versions of these browsers respectively, will make this attribute unprefixed.

If you want to know what happens if you use font-display and the browser doesn’t support it, those browsers will simply ignore this property. Their behavior will be the same as before. If you really want to improve the user experience, even if the browser doesn’t support this property, you can go back to one of the javascript-based solutions above.

To read more about font-display, I recommend you read these articles:

  • font-display on MDN

  • Controlling Font Performance with font-display

  • font-display for the Masses

2. contain

If you are building complex websites with many widgets (including third parties), the new contain property can be a great tool for optimizing your web pages. This property can be particularly useful if you are considering heavy use of the Web Components and React Components when building today’s Web pages.

If you are looking for a way to limit styling, layout, and redraw calculations to one or more parts of _ only _ DOM, you can use the Contains property. If you’re not familiar with those concepts, I recommend reading these articles 10 on ways to reduce rearrangements and improve performance. Another good learning resource CSS Triggers.

Contain contains: contain contains:

The contain attribute allows the author to indicate as much of an element and its contents as possible, independently of the rest of the DOM tree.

But what does this mean in practice? This means that if you have a widget (a separate part) with a fixed height and width, for example, and you want to update the content and style, you can avoid the impact of those changes on the rest of the DOM by limiting browser calculations. The browser will perform fewer calculations, resulting in better performance.

This attribute is fairly new, so it is not well supported. Currently, it is only supported by Chrome 52+ and Opera 40+. Contains allows several values, each of which allows you to limit how much rendering the browser needs to do. Let’s examine each value in detail:

  • None: the default value. No limiting effect is applied with this value.

  • Size: This value enables the size limitation of the element. This means that you can change the size of an element without checking its descendants.

  • Layout: This value enables layout restrictions for elements. This dictates that nothing on the outside will affect its internal layout, and vice versa.

  • Style: This value opens the element’s style constraint. Therefore, attributes that may affect an element and its descendants do not affect anything other than the containing element.

  • Paint: This value opens drawing restrictions on elements. This means that the descendants of the limiting element are not displayed outside its boundaries. For example, if an element is off-screen (or invisible), all of its elements are off-screen (or invisible). A typical use case is an on-screen menu on a mobile device.

  • Strict: This property applies to all forms of restriction, essentially excluding none all combinations of the above values (i.e., including: Size Layout Style paint).

  • Content: This value is like strict but without size.

The properties of this example are shown below and can also be seen on JSFiddle. Consider the following code:

<button id=""button"">Show menu</button>
<ul id=""menu"" hidden>
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>
Copy the code

And the following JavaScript:

const menu = document.querySelector('#menu'); document.querySelector('#button').addEventListener('click', function() { if (menu.hasAttribute('hidden')) { menu.removeAttribute('hidden'); } else { menu.setAttribute('hidden', ''); }});Copy the code

By using the contain attribute, you can reduce the browser’s calculation:

#menu {
  contain: paint;
}
Copy the code

For more information on this property, take a look at the following resources.

  • CSS containment

  • MDN page on contain

3. writing-mode

Writing-mode is not a completely new CSS property, but many developers still don’t know about it. Admittedly, this is an unusual use case. The writing-mod property defines whether the lines of text are laid out horizontally or vertically, and the direction of the block’s progress. All major browsers (including Microsoft Edge) currently support it, although Internet Explorer supports different values from earlier versions of the specification. Safari also supports a vendor-prefix version of this CSS property.

Writing-mode supports the following values:

  • Horizontal-tb: Content moves horizontally left to right and vertically up to down. The next horizontal line is below the previous line.

  • Vertical-rl: the content is horizontal from right to left and vertical from top to bottom. The next vertical line is to the left of the previous row.

  • Vertical-lr: indicates that the content is horizontal from left to right and vertical from top to bottom. The next vertical line is to the right of the previous row.

  • Sideways -rl: Content is arranged vertically from top to bottom, with all glyphs, even those in vertical scripts, set to the right.

  • Sideways -lr ‘: Content is arranged vertically from top to bottom, and all glyphs, even those in vertical scripts, are set to the left.

The last two values are currently supported only by Firefox.

To see how this property works, look at a JSFiddle. The result is shown below:

Keep in mind that the effects of some values only show up in languages such as Japanese or Chinese. For a more comprehensive example, see the Relevant MDN Page demo.

If you would like to read a more detailed introduction to “writing patterns”, I recommend the following articles:

  • CSS Writing Modes

  • Vertical text with CSS 3 Writing Modes

  • writing-mode

4. clip-path

The clip-path property is handy if you want to create simple shapes from CSS to fairly complex shapes. With it, you can hide specific areas of an element. The most common use case is to use images in this property, but you can be more creative than that and use a “clip-path” with paragraphs to show only a portion of the content.

`clip-path: <clip-source> | [ <basic-shape> | <geometry-box> ] | none`
Copy the code

What these values mean:

  • Clip-source: URLS that reference internal or external SVG elements

  • Basic-shape: Basic shape function, defined in CSS Shapes Specification

  • Geometry -box: If explicitly combined with ‘ ‘, it will provide a reference box for the basic shape.

  • None: No clipping

Each basic shape has different parameters. Listing all of these would be boring, so I’ll show you two examples that show you how to use this property.

It is supported by all major browsers except Microsoft’s (Edge and IE)clip-path. In addition, you should keep in mind some considerations for browsers that support this property. The first is that Safari supports properties with the -webkit-‘ prefix. The second is that all browsers that implement this feature only partially support it. The meaning of “partially supported” varies from browser to browser. If you want to learn more, check it outSupport for related attributes, the use ofclip-pathI recommend Chrome, which has the most support.

To learn more about the use of clip-path and how to animate this property, check out the following article:

  • Introducing the CSS clip-path Property

  • clip-path

Alternatively, if you want a tool to see how these properties work online, you can check out Clippy.

5. will-change

We all know that speed and performance are critical, especially on mobile devices. Their limited RAM and GPU memory makes some CSS operations more difficult to perform (in terms of page load speed or graphics impact) than desktop computers. If the browser could know what was going to happen before it did, wouldn’t that make the page more responsive?

One way we can give our browser some important hints about what will happen to the element is by using the will-change attribute. Because of this property, the browser will have time to complete its optimization and allocate memory accordingly before the element is changed.

Sounds pretty cool, right? The good news is that Chrome 53+, Opera 43+, Firefox 52+, Safari 10, and Android currently support this property. (IE and Microsoft Edge are not supported). Before proceeding, however, you should note a few things:

  1. You should not apply this property to too many elements, or your page works well. It slows down and consumes a lot of resources and memory, which is not friendly.

  2. You should use script code to switch will-change before and after the change occurs.

  3. Should not be used to predict or solve potential performance problems. It must be seen as a last resort after problems arise.

The will-change attribute can be used to avoid the hack we’ve been using for years: using translateZ () (or translate3D ()) to push browser animations and switch to hardware acceleration.

Will-change supports four values:

  • Auto: The browser does not set any special optimizations. This has the same effect as having no property specified.

  • Scroll position means, as the name implies, that you want to change the scrolling position of an element at any time in the near future. This value can be used to prompt the browser to prepare rendering content rather than content visible in a scrolling window on a scrollable element.

  • Contents: Specifies the contents of the element to be changed.

  • : The name of one or more CSS properties that you want to change. You can insert multiple properties separated by commas. Such as transformandopacity.

If you want to learn more about this, you are advised to read the following article:

  • Everything you need to know about CSS Property properties

  • This section describes CSS Property properties

conclusion

In this article, I’ve described five new and interesting CSS properties that you may not have known about before. Have you ever used one or more of these attributes? If so, what do you think of them? If you’re not using them, would you like to try them?