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 zulässigen Werttypen für die registrierte CSS-Custom-Property. Er steuert, wie der angegebene Wert der Eigenschaft verarbeitet wird, um den berechneten Wert zu ermitteln. Es handelt sich um einen erforderlichen Deskriptor; wenn er fehlt oder ungültig ist, 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 Formen annehmen:

  • Einer oder mehrere Syntaxkomponenten-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 Syntaxkomponenten kombiniert werden.

Die Syntaxkomponenten-Namen können allein verwendet oder auf unterschiedliche Weise multipliziert und kombiniert werden:

  • Die Multiplikatoren + (mit Leerzeichen getrennt) und # (mit Komma getrennt) geben an, dass eine Liste von Werten erwartet wird. Zum Beispiel bedeutet <color>#, dass eine durch Kommas 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 <length> oder auto, und <color># | <integer># erwartet eine durch Kommas getrennte Liste von <color> Werten oder eine durch Kommas getrennte Liste von <integer> Werten.

Die folgenden Syntaxkomponenten-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 sowie 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 jeden gültigen <transform-function> Wert.

"<transform-list>"

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

"<url>"

Akzeptiert jeden gültigen <url> Wert.

Formale Definition

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

Formale Syntax

syntax = 
  <string>

Beispiele

Eine benutzerdefinierte Eigenschaft mit Typprüfung registrieren

Dieses Beispiel zeigt, wie eine benutzerdefinierte Eigenschaft --my-color definiert wird, die nur <color> Werte zulässt:

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

BCD tables only load in the browser

Siehe auch