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 zulässigen Werte definiert. Er kann eines der folgenden sein:

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

Die Syntaxkomponenten-Namen können allein verwendet oder in unterschiedlicher Weise multipliziert und kombiniert 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 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 und jede gültige calc()-Ausdruckskombination von <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 jede gültige <transform-function> Wert.

"<transform-list>"

Akzeptiert eine Liste gültiger <transform-function> Werte. Es ist gleichwertig mit "<transform-function>+".

"<url>"

Akzeptiert jeden gültigen <url> Wert.

Formale Definition

Formatierte Syntax

syntax = 
  <string>  

Beispiele

Registrierung einer benutzerdefinierten Eigenschaft mit Typprüfung

Dieses Beispiel zeigt, wie eine benutzerdefinierte Eigenschaft --my-color definiert werden kann, die nur <color> Werte erlaubt:

@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-Eigenschaften und Werte-API
• CSS Painting API
• CSS Typed Object Model
• Houdini-APIs