Shorthands

Overview

CSS shorthand properties simplify styling by condensing long property names into shorter, more efficient forms. For example, translateX can be written as tx, reducing the time and effort needed to write and read code. This approach is especially useful in responsive designs and animations. Additionally, many property options also support shorthand syntax, enabling even more streamlined definitions.

Syntax

The shorthand syntax closely mirrors that of standard CSS properties syntax, making it easy to adopt. Shorthands include the same value and option definitions as their full-name counterparts.

Examples

This example illustrates how shorthands can make your code faster to write and easier to read. By default, the Full Name tab shows the standard CSS property syntax, while the Shorthand tab displays its concise equivalent.

Property shorthand

In this example, we replace the standard CSS properties translateX, scale, and rotate with their shorthand equivalents: tx, s, and r. The result is much more concise and easier to read, reducing code clutter without sacrificing functionality.

Option shorthand

Supported options can also be simplified using shorthand syntax. In this example, we omit the duration and easing option names, specifying only their values: 1s for duration and spring for easing. This makes the code more concise while maintaining clarity.

Property shorthand list

The table below maps regular CSS property names to their shorthand equivalents:

Options shorthand list

In addition to property names, common options also have shorthand equivalents for brevity. These options define additional behaviors like duration or easing: