Możemy tworzyć zmienne w CSS dość łatwo:
:root {
--scale: 1;
}I możemy je zadeklarować na dowolnym elemencie:
.thing {
transform: scale(--scale);
}Jeszcze lepszym przykładem jest zastosowanie zmiennej do interakcji z użytkownikiem, powiedzmy :hover:
:root {
--scale: 1;
}
.thing {
height: 100px;
transform: scale(--scale);
width: 100px;
}
.thing:hover {
--scale: 3;
}Ale gdybyśmy chcieli użyć tej zmiennej w animacji… nada.
:root {
--scale: 1;
}
@keyframes scale {
from { --scale: 0; }
to { --scale: 3; }
}
/* Nope! */
.thing {
animation: scale .25s ease-in;
height: 100px;
width: 100px;
}Dzieje się tak, ponieważ zmienna jest rozpoznawana jako ciąg znaków i potrzebujemy liczby, którą można interpolować między dwiema wartościami liczbowymi. Tam możemy zadzwonić @property aby nie tylko zarejestrować zmienną jako niestandardową właściwość, ale także zdefiniować jej składnię jako liczbę:
@property --scale {
syntax: "<number>";
initial-value: 1;
inherits: true;
}Teraz mamy animację!
Będziesz chciał sprawdź obsługę przeglądarki ponieważ @property wylądował dopiero w Chrome (zaczynając od wersja 85) w chwili pisania tego tekstu. A jeśli masz nadzieję, że to wywęszysz @supports, obecnie nie mamy szczęścia, ponieważ nie akceptuje reguł jako wartości… jeszcze. To się zmieni raz at-rule()staje się prawdziwą rzeczą.
