Book a Demo!
CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutPoliciesSign UpSign In
mohamedkhallouq
GitHub Repository: mohamedkhallouq/content
 Path: blob/main/files/en-us/web/css/@property/syntax/index.md
6516 views
---
title: syntax
slug: Web/CSS/@property/syntax
page-type: css-at-rule-descriptor
status:
  - experimental
browser-compat: css.at-rules.property.syntax
---

{{CSSRef}}{{SeeCompatTable}}

The syntax CSS descriptor is required when using the {{cssxref("@property")}} at-rule and describes the allowable syntax for the property.

Syntax

The following are all valid syntax strings:

syntax: "<color>"; /* accepts a color */

syntax: "<length> | <percentage>"; /* accepts lengths or percentages but not calc expressions with a combination of the two */

syntax: "small | medium | large"; /* accepts one of these values set as custom idents. */

syntax: "*"; /* any valid token */

Values

A string with a supported syntax as defined by the specification. Supported syntaxes are a subset of CSS types. These may be used along, or a number of types can be used in combination.

  • "<length>"

    • : Any valid {{cssxref("<length>")}} values.

  • "<number>"

    • : Any valid {{cssxref("<number>")}} values.

  • "<percentage>"

    • : Any valid {{cssxref("<percentage>")}} values.

  • "<length-percentage>"

    • : Any valid {{cssxref("<length-percentage>")}} values.

  • "<color>"

    • : Any valid {{cssxref("<color>")}} values.

  • "<image>"

    • : Any valid {{cssxref("<image>")}} values.

  • "<url>"

    • : Any valid {{cssxref("url","url()")}} values.

  • "<integer>"

    • : Any valid {{cssxref("<integer>")}} values.

  • "<angle>"

    • : Any valid {{cssxref("<angle>")}} values.

  • "<time>"

    • : Any valid {{cssxref("<time>")}} values.

  • "<resolution>"

    • : Any valid {{cssxref("<resolution>")}} values.

  • "<transform-function>"

    • : Any valid {{cssxref("<transform-function>")}} values.

  • "<custom-ident>"

    • : Any valid {{cssxref("<custom-ident>")}} values.

  • "<transform-list>"

    • : A list of valid {{cssxref("<transform-function>")}} values.

Formal definition

{{cssinfo}}

Formal syntax

{{csssyntax}}

Examples

Add type checking to --my-color {{cssxref('--*', 'custom property')}}, using the <color> syntax:

Using CSS {{cssxref('@property')}} at-rule:

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

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

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

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also