Syntax

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. Er kann einer der folgenden sein:

• Ein oder mehrere Syntaxkomponentennamen, 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 Syntaxkomponentennamen können allein oder in verschiedenen Kombinationen und Multiplikationen verwendet werden:

• Die Multiplikatoren + (durch Leerzeichen getrennt) und # (durch Kommas getrennt) 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 <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> 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

Formale Syntax

syntax = 
  <string>  

Beispiele

Registrierung einer benutzerdefinierten Eigenschaft mit Typüberprüfung

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

@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