syntax
Baseline 2024Newly 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
Deskriptor der @property
At-Regel definiert die erlaubten Wertetypen für die registrierte CSS Custom Property.
Er steuert, wie der angegebene Wert der Eigenschaft verarbeitet wird, um den berechneten Wert
zu erhalten.
Es handelt sich um einen obligatorischen Deskriptor; wenn er fehlt oder ungültig ist, wird die gesamte @property
-Regel als ungültig betrachtet und 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 (als Syntax-String bezeichnet), der die erlaubten Werte definiert. Es kann einer der folgenden Fälle sein:
- Einer oder mehrere Namen von Syntaxkomponenten, die sein können:
- Datentypnamen (geschrieben in spitzen Klammern, z. B.
<color>
oder<length>
) - Schlüsselwörter (geschrieben ohne spitze Klammern, z. B.
auto
odernone
)
- Datentypnamen (geschrieben in spitzen Klammern, z. B.
- Die universelle Syntax
*
, die jeden gültigen CSS-Wert akzeptiert. Sie kann nicht multipliziert oder mit anderen Syntaxkomponenten kombiniert werden.
Die Namen der Syntaxkomponenten können allein verwendet oder in verschiedenen Formen multipliziert und kombiniert werden:
-
Die Multiplikatoren
+
(durch Leerzeichen getrennt) und#
(durch Kommas getrennt) geben an, dass eine Liste von Werten erwartet wird. Zum Beispiel bedeutet<color>#
, dass eine kommagetrennte Liste von<color>
-Werten die erwartete Syntax ist. -
Der vertikale Strich (
|
) als Kombinator kann "oder"-Bedingungen für die erwartete Syntax erstellen. Zum Beispiel akzeptiert<length> | auto
entweder<length>
oderauto
, und<color># | <integer>#
erwartet eine kommagetrennte Liste von<color>
-Werten oder eine kommagetrennte Liste von<integer>
-Werten.
Die folgenden Namen von Syntaxkomponenten 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 sowie jede gültigecalc()
-Ausdruckskombination aus<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 jeden gültigen
<transform-function>
-Wert. "<transform-list>"
-
Akzeptiert eine Liste gültiger
<transform-function>
-Werte. Dies ist gleichbedeutend mit"<transform-function>+"
. "<url>"
-
Akzeptiert jeden gültigen
<url>
-Wert.
Formale Definition
Zugehörige @-Regel | @property |
---|---|
Anfangswert | n/a (required) |
Berechneter Wert | wie angegeben |
Formale Syntax
syntax =
<string>
Beispiele
Registrieren einer benutzerdefinierten Eigenschaft mit Typüberprüfung
Dieses Beispiel zeigt, wie eine benutzerdefinierte Eigenschaft --my-color
definiert wird, 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
Specification |
---|
CSS Properties and Values API Level 1 # the-syntax-descriptor |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
syntax descriptor |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
Siehe auch
- Andere
@property
Deskriptoren:inherits
undinitial-value
- CSS Properties and Values API
- CSS Painting API
- CSS Typed Object Model
- Houdini APIs