properties.md

Properties

data | schema

At its core, CSS consists of properties.

Structure for long-hand properties

A long-hand property might look like this:

"background-color": {
  "syntax": "<color>",
  "media": "visual",
  "inherited": false,
  "animationType": "color",
  "percentages": "no",
  "groups": [
    "CSS Background and Borders"
  ],
  "initial": "transparent",
  "appliesto": "allElements",
  "computed": "computedColor",
  "order": "uniqueOrder",
  "alsoAppliesTo": [
    "::first-letter",
    "::first-line",
    "::placeholder"
  ],
  "status": "standard"
},

Structure for short-hand properties

A short-hand property might look like this:

"background": {
  "syntax": "[ <bg-layer> , ]* <final-bg-layer>",
  "media": "visual",
  "inherited": false,
  "animationType": [
    "background-color",
    "background-image",
    "background-clip",
    "background-position",
    "background-size",
    "background-repeat",
    "background-attachment"
  ],
  "percentages": [
    "background-position",
    "background-size"
  ],
  "groups": [
    "CSS Background and Borders"
  ],
  "initial": [
    "background-image",
    "background-position",
    "background-size",
    "background-repeat",
    "background-origin",
    "background-clip",
    "background-attachment",
    "background-color"
  ],
  "appliesto": "allElements",
  "computed": [
    "background-image",
    "background-position",
    "background-size",
    "background-repeat",
    "background-origin",
    "background-clip",
    "background-attachment",
    "background-color"
  ],
  "order": "orderOfAppearance",
  "alsoAppliesTo": [
    "::first-letter",
    "::first-line",
    "::placeholder"
  ],
  "status": "standard"
},

Properties of a Property object

There are 11 required properties in this object:

• syntax (string): This is the formal syntax of the property and is usually found in the specification. It might contain references to syntax data. For more information see also Value definition syntax on MDN and the CSS Values and Units specification.
• media (string): The media groups this property applies to, e.g. "all, visual" (multiple values are comma-separated).
• inherited (boolean): Whether or not the property is inherited. See inheritance for details.
• animationType (enum or array of property names):
  • If it is an enum (appropriate for long-hand properties), this is the animation type of the property.
  • If it is an array (appropriate for short-hand properties), these are the properties the animation type is taken from.
• percentages (enum or array of property names):
  • If it is an enum (appropriate for long-hand properties), this defines what the percentage actually refers to when a percentage is set as a value on the property ("no" means that the property can't accept a percentage as a value).
  • If it is an array (appropriate for short-hand properties), these are the long-hand properties making up part of the short-hand value that percentages can be set as values for.
• groups (array of unique strings with at least 1 entry): CSS is organized in modules like "CSS Fonts" or "CSS Animations". MDN organizes features in these groups as well — groups should contain the name of the module(s) the property is defined in.
• initial (string or array of property names):
  • If it is a string (appropriate for long-hand properties), this is the initial value of the property.
  • If it is an array (appropriate for short-hand properties), these are the properties the initial value is taken from.
• appliesto (enum): To which elements the property can be applied to. See the schema for a list of enums
• computed (enum or array of property names):
  • If it is an enum (appropriate for long-hand properties), this is the computed value of the property. See the schema for a list of enums.
  • If it is an array (appropriate for short-hand properties), these are the properties the value is computed from.
• order (enum): The canonical order for the property. See the schema for a list of enums.
• status (enum string): This is either standard, nonstandard, experimental or obsolete depending on the standardization status of the feature.

There are 3 more properties that are optional:

• mdn_url (string): a URL linking to the property's page on MDN. This URL must omit the localization part of the URL (such as en-US/).
• stacking (boolean): Whether or not the property creates a stacking context. See stacking context for details.
• alsoAppliesTo (enum): To which elements the property also applies to. See the schema for a list of enums.