ContextQMD
Back to Content

syntax

files/en-us/web/css/reference/at-rules/@property/syntax/index.md

latest4.5 KB
Original Source

The syntax descriptor of the {{cssxref("@property")}} at-rule defines the allowed value types for the registered CSS custom property. It controls how the property's specified value is processed to derive the computed value. It is a required descriptor; if missing or invalid, the entire @property rule is invalid and ignored.

Syntax

css
/* A data type name */
syntax: "<color>";

/* A '|' combinator for multiple data types */
syntax: "<length> | <percentage>";

/* Space-separated list of values */
syntax: "<color>+";

/* Comma-separated list of values */
syntax: "<length>#";

/* Keywords */
syntax: "small | medium | large";

/* Combination of data type and keyword */
syntax: "<length> | auto";

/* Universal syntax value */
syntax: "*";

Values

A string (known as the syntax string) that defines the allowed values. It can be one of the following:

  • One or more syntax component names, which can be:
    • Data type names (written with angle brackets, such as <color> or <length>)
    • Keywords (written without angle brackets, such as auto or none)
  • The universal syntax *, which accepts any valid CSS value. It cannot be multiplied or combined with other syntax components.

The syntax component names can be used alone or multiplied and combined in different ways:

  • The + (space-separated) and # (comma-separated) multipliers indicate that a list of values is expected. For example, <color># means a comma-separated list of <color> values is the expected syntax.

  • The vertical line (|) combinator can create "or" conditions for the expected syntax. For example, <length> | auto accepts <length> or auto, and <color># | <integer># expects a comma-separated list of <color> values or a comma-separated list of <integer> values.

The following syntax component names are supported:

  • "<angle>"
    • : Accepts any valid {{cssxref("angle")}} value.
  • "<color>"
    • : Accepts any valid {{cssxref("<color>")}} value.
  • "<custom-ident>"
    • : Accepts any valid {{cssxref("<custom-ident>")}} value.
  • "<image>"
    • : Accepts any valid {{cssxref("image")}} value.
  • "<integer>"
    • : Accepts any valid {{cssxref("<integer>")}} value.
  • "<length>"
    • : Accepts any valid {{cssxref("<length>")}} value.
  • "<length-percentage>"
    • : Accepts any valid {{cssxref("<length>")}} or {{cssxref("<percentage>")}} value and any valid {{cssxref("calc()")}} expression combining <length> and <percentage> values.
  • "<number>"
    • : Accepts any valid {{cssxref("<number>")}} value.
  • "<percentage>"
    • : Accepts any valid {{cssxref("<percentage>")}} value.
  • "<resolution>"
    • : Accepts any valid {{cssxref("resolution")}} value.
  • "<string>"
    • : Accepts any valid {{cssxref("<string>")}} value.
  • "<time>"
    • : Accepts any valid {{cssxref("<time>")}} value.
  • "<transform-function>"
    • : Accepts any valid {{cssxref("<transform-function>")}} value.
  • "<transform-list>"
    • : Accepts a list of valid {{cssxref("<transform-function>")}} values. It is equivalent to "<transform-function>+".
  • "<url>"
    • : Accepts any valid {{cssxref("url_value", "<url>")}} value.

Formal definition

{{cssinfo}}

Formal syntax

{{csssyntax}}

Examples

Registering a custom property with type checking

This example shows how to define a custom property --my-color that allows only <color> values:

css
@property --my-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}

Using JavaScript {{domxref('CSS.registerProperty_static', 'CSS.registerProperty()')}}:

js
window.CSS.registerProperty({
  name: "--my-color",
  syntax: "<color>",
  inherits: false,
  initialValue: "#c0ffee",
});

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also