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:

• Einer oder mehrere Syntax-Komponentennamen, die sein können:
  • Datentypnamen (geschrieben in spitzen Klammern, wie <color> oder <length>)
  • Schlüsselwörter (ohne spitze Klammern geschrieben, 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 Syntax-Komponentennamen können allein verwendet oder in verschiedenen Weisen multipliziert und kombiniert werden:

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

• 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 Syntax-Komponentennamen werden unterstützt:

"<angle>"

Akzeptiert jeden gültigen <angle>-Wert.

"<color>"

Akzeptiert jeden gültigen <color>-Wert.

"<custom-ident>"

Akzeptiert jede gültige <custom-ident>-Wert.

"<image>"

Akzeptiert jedes gültige <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 jede gültige <percentage>-Wert.

"<resolution>"

Akzeptiert jeden gültigen <resolution>-Wert.

"<string>"

Akzeptiert jede gültige <string>-Wert.

"<time>"

Akzeptiert jeden gültigen <time>-Wert.

"<transform-function>"

Akzeptiert jede gültige <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

Formale Syntax

syntax = 
  <string>  

Beispiele

Registrieren einer Custom Property mit Typprüfung

Dieses Beispiel zeigt, wie eine Custom Property --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
• Registrierung von CSS-Custom Properties
• CSS Properties and Values API
• CSS Painting API
• CSS Typed Object Model
• Houdini APIs