5 New CSS Properties You Probably Haven’t Heard Of (And How to Use Them)

1. Introduction

Every year new CSS properties become standardized and available in mainstream browsers, aiming to make web development easier and enable more creative designs. This article presents five relatively new CSS properties that many developers may not know, explains their possible values, usage scenarios, and provides examples.

2. CSS Properties

2.1 font-display

The font-display property controls how downloadable fonts are rendered before they finish loading or if loading fails. It can prevent long blank periods (often around 3 seconds) that cause users to abandon a page. Previously developers used JavaScript solutions like Font Face Observer; now font-display offers a CSS‑only approach.

Typical usage inside @font-face:

@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; }

Supported in Chrome 49+, Firefox 46+, Opera 36+ (with prefixes) and will soon be unprefixed in newer versions. Browsers that do not support the property simply ignore it.

2.2 contain

The contain property lets developers limit the scope of style, layout, and paint calculations to a specific element, which can improve rendering performance on pages with many widgets or Web Components.

contain allows developers to declare that an element and its contents are as independent as possible from the rest of the DOM tree.

Supported in Chrome 52+ and Opera 40+. Values include none, size, layout, style, paint, strict, and content. Example:

#menu { contain: paint; }

2.3 writing-mode

writing-mode

defines the direction in which lines of text are laid out (horizontal or vertical) and the block progression direction. All major browsers support it, though some values are only available in Firefox. horizontal-tb: normal left‑to‑right horizontal flow. vertical-rl: vertical flow, top‑to‑bottom, right‑to‑left. vertical-lr: vertical flow, top‑to‑bottom, left‑to‑right. sideways-lr: vertical flow with glyphs oriented left‑to‑right. sideways-rl: vertical flow with glyphs oriented right‑to‑left.

Only Firefox currently supports the last two values.

2.4 clip-path

The clip-path property allows you to create simple to complex shapes that clip an element’s visible region, often used to display only part of an image.

clip-path: <clip-source> | [ <basic-shape> | <geometry-box> ] | none;

Values include clip-source (URL to an SVG), basic-shape, geometry-box, and none. Supported in all major browsers except older versions of Edge and IE; Safari requires the -webkit- prefix.