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 steuert, wie der angegebene Wert der Eigenschaft verarbeitet wird, um den berechneten Wert zu erhalten. Es handelt sich um einen obligatorischen Deskriptor; wenn er fehlt oder ungültig ist, wird die gesamte @property-Regel als ungültig betrachtet und 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 (als Syntax-String bezeichnet), der die erlaubten Werte definiert. Es kann einer der folgenden Fälle sein:

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

Die Namen der Syntaxkomponenten können allein verwendet oder in verschiedenen Formen multipliziert und kombiniert werden:

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

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

Die folgenden Namen von Syntaxkomponenten 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()-Ausdruckskombination aus <length>- und <percentage>-Werten.

"<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. Dies ist gleichbedeutend mit "<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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
syntax descriptor

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch