Jump to:

In CSS, canonical order is used to refer to the order in which separate values need to be specified (or parsed) or are to be serialized as part of a CSS property value. It is defined by the formal syntax of the property and normally refers to the order in which longhand values should be specified as part of a single shorthand value.

For example, background shorthand property values are made up of several background-* longhand properties. The canonical order of those longhand values is defined as

  1. background-image
  2. background-position
  3. background-size
  4. background-repeat
  5. background-attachment
  6. background-origin
  7. background-clip
  8. background-color

Furthermore, its syntax defines, that if a value for the background-size is given, it must be specified after the value for the background-position, separated by a slash. Other values may appear in any order.

Learn more

Document Tags and Contributors

Contributors to this page: mdnwebdocs-bot, wbamberg, Sebastianz, chrisdavidmills
Last updated by: mdnwebdocs-bot,