CSS @property Regel

Definition und Verwendung

CSS @property Regeln werden verwendet, um benutzerdefinierte CSS-Eigenschaften direkt in der Stilübersicht zu definieren, ohne dass JavaScript ausgeführt werden muss.

@property Regeln haben Daten typprüfung und Einschränkungenfunktionen, können Standardwerte festlegen und bestimmen, ob die Eigenschaften vererbt werden können.

Verwendung @property Vorteile:

• Typprüfung und Einschränkungen: Es muss der Daten тип der benutzerdefinierten Eigenschaft angegeben werden, z.B. <number>, <color>, <length> usw. Dies verhindert Fehler und stellt sicher, dass die benutzerdefinierten Eigenschaften korrekt verwendet werden.
• Setzen des Standardwerts: Ein Standardwert kann für die benutzerdefinierte Eigenschaft festgelegt werden. Dies stellt sicher, dass der Browser den definierten Rückfallwert verwendet, wenn nachfolgend eine ungültige Wert zugewiesen wird.
• Setzen des Vererbungsverhaltens: Es muss angegeben werden, ob die benutzerdefinierte Eigenschaft von ihrem übergeordneten Element vererbt werden kann.

Beispiel: Definition von benutzerdefinierten Eigenschaften

@property --my-color {
  syntax: "<color>";
  inherits: true;
  initial-value: lightgray;
}

Diese Definition bedeutet, dass --my-color eine Farbleigenschaft ist, die ihren Wert von dem übergeordneten Element erben kann und deren Standardwert lightgray ist.

In CSS, verwenden Sie benutzerdefinierte Eigenschaften:

body {}}
  backgound-color: var(--my-color);
}

Beispiel

Beispiel 1

Bestimmen Sie zwei benutzerdefinierte Attribute für die Ver meilleerung - und verwenden Sie sie, um die Ver meilleerung zu animieren:

@property --startColor {
  syntax: "<color>";
  initial-value: #EADEDB;
  inherits: false;
}
@property --endColor {
  syntax: "<color>";
  initial-value: #BC70A4;
  inherits: false;
}

Selbst ausprobieren

Beispiel 2

Spezifizieren Sie zwei benutzerdefinierte Attribute: eines für die Größe der Elemente und eines für die Farbe der Elemente:

@property --item-size {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}
@property --item-color {
  syntax: "<color>";
  inherits: false;
  initial-value: lightgray;
}

Selbst ausprobieren

CSS-Syntax

@property --propertyname {
  syntax: "<color>";
  initial-value: red;
  inherits: false;
}

Eigenschaftswert

Browser-Unterstützung

Die Zahlen in der Tabelle stellen die erste Browser-Version dar, die diese @-Regel vollständig unterstützt.

Verwandte Seiten

Tutorial:CSS @property Regel