Używamy cookies, żeby zwiększyć Twoje doświadczenia na stronie

Logowanie/Rejestracja->

@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

--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)

| Syntax | Opis | Przykład | |--------|------|---------| |

"<color>"

| Dowolny kolor CSS |

gold

#d4af37

rgb(212,175,55)

| |

"<length>"

| Długość z jednostką |

10px

2rem

50vh

| |

"<number>"

| Liczba bez jednostki |

1.5

| |

"<percentage>"

| Procent |

50%

100%

| |

"<angle>"

| Kąt |

45deg

0.5turn

| |

"<integer>"

| Liczba całkowita |

| |

"<length-percentage>"

| Długość lub procent |

10px

50%

| |

"<custom-ident>"

| Niestandardowy identyfikator |

ease-in

forwards

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

| Cecha | Custom Properties | @property | |-------|------------------|-----------| | Deklaracja |

--name: value

@property --name { ... }

var(--name, fallback)

| Przez

initial-value

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.

Przejdź do CodeWorlds→