@property - typowane właściwości CSS

W starożytnym Egipcie kapłani posiadali tajemną wiedzę o magicznych formułach, które nadawały przedmiotom niezwykłe właściwości. Każda formuła miała ściśle określony typ - mogła działać na kolory, liczby lub wymiary, a jej nieprawidłowe użycie powodowało, że magia nie zadziałała. Reguła @property w CSS działa na podobnej zasadzie - pozwala formalnie zarejestrować własną właściwość CSS, nadając jej typ, wartość początkową i zasady dziedziczenia. Dzięki temu przeglądarka "rozumie" znaczenie twojej zmiennej i potrafi ją animować.

Problem ze zwykłymi Custom Properties

Zwykłe zmienne CSS (--nazwa: wartość) są traktowane przez przeglądarkę jako nieprzetworzony tekst. Przeglądarka nie wie, czy --my-color to kolor, liczba czy coś innego. Konsekwencja jest taka, że nie można ich płynnie animować:

1:root {
2  --gradient-start: gold;
3  --gradient-end: purple;
4}
5
6.box {
7  background: linear-gradient(var(--gradient-start), var(--gradient-end));
8  transition: --gradient-start 1s, --gradient-end 1s;
9}
10
11/* To NIE zadziała\! Przeglądarka nie wie, że to kolory */
12.box:hover {
13  --gradient-start: crimson;
14  --gradient-end: navy;
15}

Przeglądarka widzi zmianę z jednego ciągu tekstowego na drugi i nie potrafi obliczyć wartości pośrednich. Zamiast płynnego przejścia, kolor przeskoczy natychmiast.

Rozwiązanie: @property

Reguła @property rejestruje właściwość z pełną definicją typu:

1@property --gradient-start {
2  syntax: "<color>";
3  inherits: false;
4  initial-value: gold;
5}
6
7@property --gradient-end {
8  syntax: "<color>";
9  inherits: false;
10  initial-value: purple;
11}

Teraz przeglądarka wie, że --gradient-start i --gradient-end to kolory. Potrafi obliczyć wartości pośrednie i wykonać płynną animację!

Składnia @property

Każda deklaracja @property wymaga trzech obowiązkowych deskryptorów:

1@property --nazwa-wlasciwosci {
2  syntax: "<typ>";         /* Jakiego typu jest wartość */
3  inherits: true | false;  /* Czy potomkowie dziedzicza */
4  initial-value: wartość;  /* Domyślna wartość */
5}

Dostępne typy (syntax)

inherits

• true - potomkowie dziedziczą wartość (tak jak zwykłe Custom Properties)
• false - potomkowie NIE dziedziczą; każdy element używa initial-value

Animowanie gradientów z @property

To najbardziej spektakularne zastosowanie @property - animowanie właściwości, które normalnie nie mogą być animowane:

1@property --hue {
2  syntax: "<number>";
3  inherits: false;
4  initial-value: 45;
5}
6
7.egyptian-glow {
8  --hue: 45;
9  background: linear-gradient(
10    135deg,
11    hsl(var(--hue), 80%, 50%),
12    hsl(calc(var(--hue) + 60), 70%, 40%)
13  );
14  transition: --hue 0.8s ease;
15}
16
17.egyptian-glow:hover {
18  --hue: 200;
19}

Dzięki @property, przeglądarka wie, że --hue to liczba i potrafi płynnie przejść z 45 do 200, animując cały gradient!

Animacja ciągła z @keyframes

1@property --angle {
2  syntax: "<angle>";
3  inherits: false;
4  initial-value: 0deg;
5}
6
7.rotating-border {
8  --angle: 0deg;
9  border: 3px solid transparent;
10  border-image: linear-gradient(
11    var(--angle),
12    #d4af37,
13    #1e3a5f,
14    #d4af37
15  ) 1;
16  animation: rotate-gradient 3s linear infinite;
17}
18
19@keyframes rotate-gradient {
20  to {
21    --angle: 360deg;
22  }
23}

Praktyczne zastosowania

1. Animowany kolor tła

1@property --bg-color {
2  syntax: "<color>";
3  inherits: false;
4  initial-value: #d4af37;
5}
6
7.pharaoh-card {
8  background: var(--bg-color);
9  transition: --bg-color 0.5s ease;
10}
11
12.pharaoh-card:hover {
13  --bg-color: #1e3a5f;
14}

2. Animowany procent

1@property --progress {
2  syntax: "<percentage>";
3  inherits: false;
4  initial-value: 0%;
5}
6
7.pyramid-progress {
8  background: linear-gradient(
9    to right,
10    #d4af37 var(--progress),
11    #e8d7b0 var(--progress)
12  );
13  transition: --progress 1s ease;
14}
15
16.pyramid-progress.complete {
17  --progress: 100%;
18}

3. Wielokolorowy gradient z animacją

1@property --color-a {
2  syntax: "<color>";
3  inherits: false;
4  initial-value: #d4af37;
5}
6
7@property --color-b {
8  syntax: "<color>";
9  inherits: false;
10  initial-value: #8b6914;
11}
12
13.magic-gradient {
14  background: linear-gradient(135deg, var(--color-a), var(--color-b));
15  transition: --color-a 0.6s ease, --color-b 0.6s ease;
16}
17
18.magic-gradient:hover {
19  --color-a: #1e3a5f;
20  --color-b: #30d5c8;
21}

@property vs zwykłe Custom Properties

Wsparcie przeglądarek

@property jest wspierane od Chrome 85 (2020), Edge 85, Safari 15.4 (2022) i Firefox 128 (2024). Możesz bezpiecznie używać go w nowoczesnych projektach. Dla starszych przeglądarek, właściwość po prostu zachowa się jak zwykła Custom Property - bez animacji, ale z poprawną wartością.

1/* Fallback - zawsze dziala */
2.element {
3  --my-color: gold;
4  background: var(--my-color);
5}
6
7/* @property - dodaje możliwość animacji */
8@property --my-color {
9  syntax: "<color>";
10  inherits: false;
11  initial-value: gold;
12}

@property to jak magiczna formuła egipskich kapłanów - nadaje twoim zmiennym CSS prawdziwą moc, pozwalając przeglądarce rozumieć ich znaczenie i tworzyć płynne, spektakularne animacje tam, gdzie wcześniej było to niemożliwe.

1<!DOCTYPE html>
2<html lang="pl">
3<head>
4    <meta charset="UTF-8">
5    <title>@property - typowane wlasciwosci CSS</title>
6    <link rel="stylesheet" href="style.css">
7</head>
8<body>
9    <h1>@property - Magiczne Formuly Faraonow</h1>
10
11    <section>
12        <h2>Animowany gradient (niemozliwy bez @property!)</h2>
13        <div class="gradient-box">Najedz na mnie</div>
14    </section>
15
16    <section>
17        <h2>Obracajaca sie ramka</h2>
18        <div class="rotating-border">
19            <p>Animacja kata gradientu</p>
20        </div>
21    </section>
22
23    <section>
24        <h2>Pasek postepu z animacja</h2>
25        <div class="progress-bar"></div>
26        <p class="hint">Animacja uruchamia sie automatycznie</p>
27    </section>
28</body>
29</html>