12 KiB
| title | chunk | source | category | tags | date_saved | instance |
|---|---|---|---|---|---|---|
| Canonical order - Glossary | MDN | 1/3 | https://developer.mozilla.org/en-US/docs/Glossary/Canonical_order | reference | web, html, css, javascript, documentation | 2026-05-05T05:26:56.873464+00:00 | kb-cron |
MDN HTML HTML: Markup language
HTML reference
HTML guides
Markup languages
CSS reference
CSS guides
Layout cookbook
JavaScriptJS JavaScript: Scripting language
JS reference
JS guides
Web APIs Web APIs: Programming interfaces
Web API reference
Web API guides
- Using the Web animation API
- Using the Fetch API
- Working with the History API
- Using the Web speech API
- Using web workers
Technologies
Topics
Learn Learn web development
Frontend developer course
- Getting started modules
- Core modules
- MDN Curriculum
- Check out the video course from Scrimba, our partner
Learn HTML
Learn CSS
Learn JavaScript
Tools Discover our tools
About Get to know MDN better
Canonical order
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
background-imagebackground-positionbackground-sizebackground-repeatbackground-attachmentbackground-originbackground-clipbackground-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.
In this article
See also
- CSS value definition syntax
- What does "canonical order" mean with respect to CSS properties? on Stack Overflow provides useful further discussion.