CSS @property-Regel
- Vorherige Seite CSS Variablen - Medienabfragen
- Nächste Seite CSS Box-Größe
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-colo
r. 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); }
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); }
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; }
den Wert von inherits verwenden
Im folgenden Beispiel werden wir inherits
Der Wert wird auf false
Dies 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; }
Der nächste Beispiel zeigt: inherits
Der Wert wird auf true
Dies 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; }
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; }
CSS @property-Regel
Eigenschaft | Beschreibung |
---|---|
@property | Definieren Sie benutzerdefinierte CSS-Eigenschaften direkt im Stilblatt, ohne JavaScript auszuführen. |
- Vorherige Seite CSS Variablen - Medienabfragen
- Nächste Seite CSS Box-Größe