CSS @property-Regel

CSS @property-Regel

@property 规则用于直接在样式表中定义自定义 CSS 属性,而无需运行任何 JavaScript。

@property 规则具有数据类型检查和约束、设置默认值,并定义属性是否可以继承值。

定义自定义属性的实例:

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

上面的定义表示 --myColor 这是一个颜色属性,它可以继承父元素的值,其默认值为 lightgray。

要在 CSS 中使用自定义属性,我们使用 var() 函数:

body {
  background-color: var(--myColor);
}

Verwendung @property 的好处:

  • 类型检查: Es muss angegeben werden, welchen Datentyp das benutzerdefinierte Attribut hat, z.B. <number>, <color>, <length>. Dies verhindert Fehler und stellt sicher, dass benutzerdefinierte Attribute korrekt verwendet werden.
  • Einstellen des Standardwerts: Es kann einen Standardwert für benutzerdefinierte Attribute festgelegt werden. Dies stellt sicher, dass der Browser definierte Ersatzwerte verwendet, wenn später ungültige Werte zugewiesen werden.
  • Einstellen des Inherit-Verhaltens: Es muss angegeben werden, ob benutzerdefinierte Attribute den Wert ihres übergeordneten Elements inheritten können.

Browser-Unterstützung

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

Chrome Edge Firefox Safari Opera
85 85 128 16.4 71

einfaches @property-Beispiel

Im folgenden Beispiel sind zwei benutzerdefinierte Attribute definiert:--my-bg-color und --my-txt-color. Dann, div in background-color und color durch benutzerdefinierte Attribute zu verwenden:

Beispiel

@property --my-bg-color {
  Syntax: "<color>";
  inherits: true;
  initial-value: lightgray;
}
@property --my-txt-color {
  Syntax: "<color>";
  inherits: true;
  initial-value: darkblue;
}
div {
  width: 300px;
  height: 150px;
  padding: 15px;
  background-color: var(--my-bg-color);
  color: var(--my-txt-color);
}

Probieren Sie es selbst aus

eine weitere @property-Instanz

Im folgenden Beispiel verwenden wir den Standardwert des benutzerdefinierten Attributes im <div>-Element. Dann verwenden wir .fresh und .nature Benutzerdefinierte Attribute in der Klasse überschreiben (durch Festlegen anderer Farben), sehr gut effectiv:

Beispiel

@property --my-bg-color {
  Syntax: "<color>";
  inherits: true;
  initial-value: lightgray;
}
div {
  width: 300px;
  height: 150px;
  padding: 15px;
  background-color: var(--my-bg-color);
}
.fresh {
  --my-bg-color: #ff6347;
}
.nature {
  --my-bg-color: rgb(120, 180, 30);
}

Probieren Sie es selbst aus

durch Typprüfung und Ersatzwerte Fehler zu vermeiden

Im folgenden Beispiel werden wir .nature Der Wert der benutzerdefinierten Attribute in der Klasse ist ein Integer. Dies ist ungültig, der Browser verwendet in initial-value Ersatzfarben, die in den Attributen definiert sind (lightgray):

Beispiel

@property --my-bg-color {
  Syntax: "<color>";
  inherits: true;
  initial-value: lightgray;
}
div {
  width: 300px;
  height: 150px;
  padding: 15px;
  background-color: var(--my-bg-color);
}
.fresh {
  --my-bg-color: #ff6347;
}
.nature {
  --my-bg-color: 2;
}

Probieren Sie es selbst aus

den Wert von inherits verwenden

Im folgenden Beispiel werden wir inherits Der Wert wird auf falseDies bedeutet, dass benutzerdefinierte Attribute nicht den Wert von ihrem übergeordneten Element inheritten. Ergebnis anzeigen:

Beispiel

@property --my-bg-color {
  Syntax: "<color>";
  inherits: false;
  initial-value: lightgray;
}

Probieren Sie es selbst aus

Der nächste Beispiel zeigt: inherits Der Wert wird auf trueDies bedeutet, dass benutzerdefinierte Attribute den Wert von ihrem übergeordneten Element inheritten. Ergebnis anzeigen:

Beispiel

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

Probieren Sie es selbst aus

Verwenden Sie @property, um flüssige Animationen zu erstellen

Verwendung @property Eine neue Möglichkeit, Inhalte zu animieren, die früher nicht animiert werden konnten, sind Verzerrungen. Sehen Sie sich das folgende Beispiel an:

Beispiel

Definieren Sie zwei benutzerdefinierte Eigenschaften für die Verzerrung:

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

Probieren Sie es selbst aus

CSS @property-Regel

Eigenschaft Beschreibung
@property Definieren Sie benutzerdefinierte CSS-Eigenschaften direkt im Stilblatt, ohne JavaScript auszuführen.