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-rule 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 zu bestimmen. Es ist ein erforderlicher 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 Zeichenfolgenwert (bekannt als Syntax-String), der die zulässigen Werte definiert. Er kann einer der folgenden sein:

  • Ein oder mehrere Syntaxkomponentennamen, die sein können:
    • Datentypennamen (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 Syntaxkomponentennamen können allein stehen oder multipliziert und auf verschiedene Weise kombiniert werden:

  • Die + (durch Leerzeichen getrennt) und # (durch Komma getrennt) Multiplikatoren zeigen 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 <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 Syntaxkomponentennamen 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 jeden gültigen <transform-function> Wert.

"<transform-list>"

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

Eine benutzerdefinierte Eigenschaft mit Typüberprüfung registrieren

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