Syntax

Der syntax-Deskriptor der @property At-Regel definiert die erlaubten 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; fehlt er oder ist ungültig, ist die gesamte @property-Regel ungültig und wird ignoriert.

Syntax

/* 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. Es kann einer der folgenden sein:

• Einer oder mehrere Syntaxkomponentennamen, die sein können:
  • Datentypnamen (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. Es kann nicht multipliziert oder mit anderen Syntaxkomponenten kombiniert werden.

Die Syntaxkomponentennamen können allein oder in verschiedenen Kombinationen multipliziert werden:

• Die + (durch Leerzeichen getrennte) und # (durch Kommas getrennte) Multiplikatoren zeigen 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 entweder <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 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 jede gültige <transform-function>.

"<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

Formale Syntax

syntax = 
 <string> 

Beispiele

Registrieren einer benutzerdefinierten Eigenschaft mit Typprüfung

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

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

Verwendung von JavaScript CSS.registerProperty():

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Andere @property-Deskriptoren: inherits und initial-value
• CSS Properties and Values API
• CSS Painting API
• CSS Typed Object Model
• Houdini APIs