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 CSS Deskriptor ist erforderlich, wenn die @property At-Regel verwendet wird und beschreibt die zulässige Syntax für die Eigenschaft.

Syntax

Die folgenden sind alle gültigen Syntaxzeichenfolgen:

css
syntax: "<color>"; /* accepts a color */

syntax: "<length> | <percentage>"; /* accepts lengths or percentages but not calc expressions with a combination of the two */

syntax: "small | medium | large"; /* accepts one of these values set as custom idents. */

syntax: "*"; /* any valid token */

Werte

Ein String mit einer unterstützten Syntax, wie sie durch die Spezifikation definiert ist. Unterstützte Syntaxen sind ein Teil der CSS-Typen. Diese können allein verwendet werden, oder eine Anzahl von Typen kann in Kombination verwendet werden.

"<length>"

Alle gültigen <length> Werte.

"<number>"

Alle gültigen <number> Werte.

"<percentage>"

Alle gültigen <percentage> Werte.

"<length-percentage>"

Alle gültigen <length-percentage> Werte.

"<color>"

Alle gültigen <color> Werte.

"<image>"

Alle gültigen <image> Werte.

"<url>"

Alle gültigen <url> Werte.

"<integer>"

Alle gültigen <integer> Werte.

"<angle>"

Alle gültigen <angle> Werte.

"<time>"

Alle gültigen <time> Werte.

"<resolution>"

Alle gültigen <resolution> Werte.

"<transform-function>"

Alle gültigen <transform-function> Werte.

"<custom-ident>"

Alle gültigen <custom-ident> Werte.

"<transform-list>"

Eine Liste von gültigen <transform-function> Werten.

Formale Definition

Zugehörige @-Regel@property
Initialer Wertn/a (required)
Berechneter Wertwie angegeben

Formale Syntax

syntax = 
  <string>

Beispiele

Fügen Sie Typüberprüfung für die --my-color benutzerdefinierte Eigenschaft hinzu, indem Sie die <color> Syntax verwenden:

Verwendung der CSS @property At-Regel:

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

BCD tables only load in the browser

Siehe auch