Syntax

Baseline 2024
Newly available

Since July 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Der syntax Deskriptor der @property At-Regel definiert die erlaubten Wertetypen für die registrierte CSS Custom Property. Er kontrolliert, wie der angegebene Wert der Eigenschaft verarbeitet wird, um den berechneten Wert abzuleiten. Es handelt sich um einen erforderlichen Deskriptor; fehlt er oder ist er ungültig, ist die gesamte @property-Regel ungültig und wird ignoriert.

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: "*";

Werte

Ein String (bekannt als Syntax-String), der die erlaubten Werte definiert. Er kann eine der folgenden Optionen enthalten:

  • Ein oder mehrere Syntax-Komponenten-Namen, die sein können:
    • Datentypnamen (geschrieben mit spitzen Klammern, wie <color> oder <length>)
    • Schlüsselwörter (geschrieben ohne spitze Klammern, wie auto oder none)
  • Die universelle Syntax *, die jeden gültigen CSS-Wert akzeptiert. Sie kann nicht multipliziert oder mit anderen Syntax-Komponenten kombiniert werden.

Die Syntax-Komponenten-Namen können allein verwendet oder auf verschiedene Weise multipliziert und kombiniert werden:

  • Die Multiplikatoren + (durch Leerzeichen getrennt) und # (durch Komma getrennt) geben an, dass eine Liste von Werten erwartet wird. Zum Beispiel bedeutet <color>#, dass eine durch Komma getrennte Liste von <color>-Werten die erwartete Syntax ist.

  • Der vertikale Strich (|) Kombinator kann "oder"-Bedingungen für die erwartete Syntax erstellen. Zum Beispiel akzeptiert <length> | auto entweder <length> oder auto, und <color># | <integer># erwartet eine durch Komma getrennte Liste von <color>-Werten oder eine durch Komma getrennte Liste von <integer>-Werten.

Die folgenden Syntax-Komponenten-Namen werden unterstützt:

"<angle>"

Akzeptiert jeden gültigen <angle> Wert.

"<color>"

Akzeptiert jeden gültigen <color> Wert.

"<custom-ident>"

Akzeptiert jeden gültigen <custom-ident> Wert.

"<image>"

Akzeptiert jeden gültigen <image> Wert.

"<integer>"

Akzeptiert jeden gültigen <integer> Wert.

"<length>"

Akzeptiert jeden gültigen <length> Wert.

"<length-percentage>"

Akzeptiert jeden gültigen <length> oder <percentage> Wert und jeden gültigen calc() Ausdruck, der <length> und <percentage> Werte kombiniert.

"<number>"

Akzeptiert jeden gültigen <number> Wert.

"<percentage>"

Akzeptiert jeden gültigen <percentage> Wert.

"<resolution>"

Akzeptiert jeden gültigen <resolution> Wert.

"<string>"

Akzeptiert jeden gültigen <string> Wert.

"<time>"

Akzeptiert jeden gültigen <time> Wert.

"<transform-function>"

Akzeptiert jede gültige <transform-function> Funktion.

"<transform-list>"

Akzeptiert eine Liste gültiger <transform-function> Funktionen. Es ist äquivalent zu "<transform-function>+".

"<url>"

Akzeptiert jeden gültigen <url> Wert.

Formale Definition

Zugehörige @-Regel@property
Anfangswertn/a (required)
Berechneter Wertwie angegeben

Formale Syntax

syntax = 
  <string>

Beispiele

Registrierung einer benutzerdefinierten Eigenschaft mit Typprüfung

Dieses Beispiel zeigt, wie Sie eine benutzerdefinierte Eigenschaft --my-color definieren, die nur <color>-Werte erlaubt:

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

Verwendung von JavaScript CSS.registerProperty():

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

Spezifikationen

Specification
CSS Properties and Values API Level 1
# the-syntax-descriptor

Browser-Kompatibilität

Siehe auch