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 Wertetypen für die registrierte CSS benutzerdefinierte Eigenschaft. Er steuert, wie der angegebene Wert der Eigenschaft verarbeitet wird, um den berechneten Wert abzuleiten. Es handelt sich um einen erforderlichen Deskriptor; fehlt er oder ist 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 zulässigen Werte definiert. Es kann einer der folgenden sein:

  • Ein oder mehrere Syntaxkomponenten-Namen, die sein können:
    • Datentyp-Namen (geschrieben in 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 genutzt oder auf verschiedene Weise multipliziert und kombiniert werden:

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

  • Der vertikale Linien-Kombinator (|) kann "oder"-Bedingungen für die erwartete Syntax erstellen. Beispielsweise akzeptiert <length> | auto entweder <length> oder auto, und <color># | <integer># erwartet entweder 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 jede gültige 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> Wert.

"<transform-list>"

Akzeptiert eine Liste von gültigen <transform-function> Werten. Es ist gleichwertig 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

Registrieren einer benutzerdefinierten Eigenschaft mit Typüberprüfung

Dieses Beispiel zeigt, wie eine benutzerdefinierte Eigenschaft --my-color definiert wird, 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