Regula CSS @property
Proprietățile CSS personalizate (variabile CSS) pot fi definite direct în foaia de stiluri cu regula @property, fără a folosi JavaScript.
Regula îți oferă trei controale: un tip de date, o valoare implicită și dacă proprietatea moștenește de la elementele părinte.
Sintaxa lui @property
Aici, --myColor este creată ca proprietate de culoare. Moștenirea este activată, iar lightgray este valoarea ei implicită.
styles.css
@property --myColor {
syntax: "<color>";
inherits: true;
initial-value: lightgray;
}
Folosirea proprietății personalizate
Pentru a insera valoarea proprietății personalizate, apelează funcția CSS var():
styles.css
body {
background-color: var(--myColor);
}
Beneficiile folosirii @property
De ce să folosești @property? Aduce trei avantaje:
- Verificarea tipului de date: Declararea unui tip pentru proprietatea personalizată, precum
<number>,<color>,<length>etc., este obligatorie. Acest lucru previne erorile și asigură folosirea corectă a proprietății. - Setarea unei valori implicite: O valoare implicită pentru proprietatea personalizată este și ea obligatorie. Dacă ulterior se atribuie o valoare invalidă, browserul revine la ea.
- Setarea comportamentului de moștenire: Trebuie să precizezi și dacă proprietatea personalizată moștenește de la elementele părinte, așa că moștenirea este în întregime sub controlul tău.
Exemplu CSS @property
Aici sunt definite două proprietăți personalizate, --my-bg-color și --my-txt-color, iar div-ul își ia din ele culoarea de fundal și culoarea textului.
Exemplu
Prompt
Creează o pagină care folosește CSS @property pentru a defini două proprietăți personalizate: --my-bg-color (lightgray) și --my-txt-color (darkblue), ambele ca tipuri de culoare cu moștenire. Aplică-le unui div (300x150px, 15px padding) folosind var().
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS @property Custom Colors</title>
<style>
@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);
}
</style>
</head>
<body>
<h2>CSS @property Example</h2>
<div>This div uses custom properties for background color and text color.</div>
</body>
</html>
Alt exemplu @property
Elementul <div> pornește cu valoarea implicită a proprietății personalizate. Apoi, clasele .fresh și .nature o suprascriu, fiecare cu propria culoare.
Exemplu
Prompt
Creează o pagină care folosește CSS @property pentru a defini --my-bg-color ca o culoare cu initial-value lightgray și inherits true. Arată trei div-uri (300x150px, 15px padding): unul cu culoarea implicită, unul cu clasa „fresh” care suprascrie cu #ff6347, și unul cu clasa „nature” care suprascrie cu rgb(120, 180, 30).
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Override @property Custom Property</title>
<style>
@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);
}
</style>
</head>
<body>
<h2>Override @property Custom Property</h2>
<div>Default (lightgray)</div>
<br>
<div class="fresh">Fresh (#ff6347)</div>
<br>
<div class="nature">Nature (rgb(120, 180, 30))</div>
</body>
</html>
Evită Erori cu Verificarea Tipului și Valoarea de Rezervă
Aici, clasa .nature atribuie proprietății personalizate un număr întreg. Un număr întreg nu este o culoare validă, așa că browserul revine la initial-value (lightgray).
Exemplu
Prompt
Creează o pagină care folosește CSS @property pentru a defini --my-bg-color ca o culoare cu initial-value lightgray și inherits true. Arată trei div-uri (300x150px, 15px padding): implicit, clasa „fresh” setată la #ff6347 și clasa „nature” setată la valoarea invalidă 2 (un număr întreg). Browserul ar trebui să revină la lightgray pentru cel invalid.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Type Checking and Fallback</title>
<style>
@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;
}
</style>
</head>
<body>
<h2>Type Checking and Fallback Value</h2>
<div>Default (lightgray)</div>
<br>
<div class="fresh">Fresh (#ff6347)</div>
<br>
<div class="nature">Nature (invalid value - falls back to lightgray)</div>
</body>
</html>
Folosirea valorii inherits
Dacă o proprietate personalizată preia valori de la elementele părinte se decide prin descriptorul inherits.
inherits: false
Dacă setezi inherits la false, proprietatea personalizată nu mai primește valorile elementelor sale părinte. Elementele copil primesc în schimb valoarea inițială.
Prompt
Creează o pagină care folosește CSS @property pentru a defini --my-bg-color ca o culoare cu initial-value lightgray și inherits setat la false. Setează --my-bg-color la coral pe body. Arată un div copil (300x150px, 15px padding) care folosește var(--my-bg-color) ca fundal — deoarece inherits este false, div-ul ar trebui să primească lightgray, nu coral.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@property inherits false</title>
<style>
@property --my-bg-color {
syntax: "<color>";
inherits: false;
initial-value: lightgray;
}
body {
--my-bg-color: coral;
}
div {
width: 300px;
height: 150px;
padding: 15px;
background-color: var(--my-bg-color);
}
</style>
</head>
<body>
<h2>inherits: false</h2>
<p>The body sets --my-bg-color to coral, but since inherits is false, the div gets the initial value (lightgray).</p>
<div>This div should be lightgray</div>
</body>
</html>
inherits: true
Dacă setezi inherits la true, proprietatea personalizată poate prelua valori de la elementele sale părinte.
Prompt
Creează o pagină care folosește CSS @property pentru a defini --my-bg-color ca o culoare cu initial-value lightgray și inherits setat la true. Setează --my-bg-color la coral pe body. Arată un div copil (300x150px, 15px padding) care folosește var(--my-bg-color) ca fundal — deoarece inherits este true, div-ul ar trebui să moștenească valoarea coral de la body.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@property inherits true</title>
<style>
@property --my-bg-color {
syntax: "<color>";
inherits: true;
initial-value: lightgray;
}
body {
--my-bg-color: coral;
}
div {
width: 300px;
height: 150px;
padding: 15px;
background-color: var(--my-bg-color);
}
</style>
</head>
<body>
<h2>inherits: true</h2>
<p>The body sets --my-bg-color to coral, and since inherits is true, the div inherits that value.</p>
<div>This div should be coral</div>
</body>
</html>
Creează o Animație Lină cu @property
Lucruri care nu puteau fi animate înainte, printre care gradienții, devin animabile cu @property, ceea ce o face deosebit de puternică. După ce proprietățile de culoare sunt înregistrate astfel, browserul știe cum să le interpoleze lin.
Exemplu
Aici sunt definite două proprietăți personalizate de culoare ale unui gradient, care apoi sunt animate la hover:
Prompt
Creează o pagină care folosește CSS @property pentru a defini două proprietăți de culoare (--startColor: #EADEDB, --endColor: #BC70A4, ambele cu inherits false). Aplică un linear-gradient folosind aceste proprietăți unui div și animează ambele culori la hover pentru a crea o tranziție lină de gradient care nu ar fi posibilă fără @property.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Smooth Gradient Animation with @property</title>
<style>
@property --startColor {
syntax: "<color>";
initial-value: #EADEDB;
inherits: false;
}
@property --endColor {
syntax: "<color>";
initial-value: #BC70A4;
inherits: false;
}
div {
width: 300px;
height: 200px;
padding: 15px;
background: linear-gradient(to right, var(--startColor), var(--endColor));
transition: --startColor 1s, --endColor 1s;
}
div:hover {
--startColor: #6EC6FF;
--endColor: #2196F3;
}
</style>
</head>
<body>
<h2>Smooth Gradient Animation with @property</h2>
<p>Hover over the div to see a smooth gradient transition:</p>
<div>Hover me!</div>
</body>
</html>