@property: nowa generacja zmiennych CSS z obsługą uniwersalnych przeglądarek

Una Kravets

Data publikacji: 12 lipca 2024 r.

Przygotuj się na ulepszoną wersję CSS! Reguła @property, która jest częścią zbioru interfejsów API CSS Houdini, jest teraz w pełni obsługiwana we wszystkich nowoczesnych przeglądarkach. Ta przełomowa funkcja zapewnia nowe możliwości kontroli i elastyczności w przypadku właściwości niestandardowych w CSS (zwanych też zmiennymi w CSS), dzięki czemu Twoje arkuszy stylów stają się inteligentniejsze i bardziej dynamiczne.

Korzyści z @property

  • Znaczenie semantyczne: użyj @property, aby zdefiniować typ (składnię) właściwości niestandardowych. Informuje on przeglądarkę, jakiego rodzaju dane zawiera Twoja usługa niestandardowa (np. kolory, długości lub liczby), zapobiegając nieoczekiwanym wynikom i umożliwiając nowe możliwości, takie jak animacja gradientów.
  • Wartości zastępcze: koniec z znikającymi stylami. Aby ustawić wartość początkową właściwości niestandardowej, użyj elementu @property. Jeśli później zostanie przypisana nieprawidłowa wartość, przeglądarka użyje zdefiniowanego przez Ciebie wartości zastępczej.
  • Ulepszone obsługiwanie błędów: ulepszona ochrona typów i możliwość ustawiania wartości zastępczych otwierają nowe możliwości testowania i sprawdzania bezpośrednio w kodzie CSS.

Tworzenie zaawansowanych właściwości niestandardowych

Aby utworzyć „standardową” usługę niestandardową, ustaw nazwę usługi z przedrostkiem -- i przypisz jej wartość. Wartość tych właściwości niestandardowych jest interpretowana przez przeglądarkę jako ciąg znaków.

Poniższy przykład pokazuje, jak inicjalizować domyślną (opartą na ciągu znaków) właściwość niestandardową.

:root {
 --myColor: hotpink;
}

Aby korzystać z tych „zaawansowanych właściwości niestandardowych”, w tym z semantyki wykraczającej poza ciąg znaków, zarejestruj swoją niestandardową właściwość CSS za pomocą @property.

W tym przykładzie ta sama właściwość niestandardowa jest inicjowana za pomocą @property.

@property --myColor {
    syntax: '<color>';
    inherits: false;
    initial-value: hotpink;
  }

Właściwość niestandardowa zainicjowana za pomocą @property zawiera znacznie więcej szczegółów niż tylko nazwę i wartość. Zawiera typ składni i ustawia dziedziczenie na wartość prawda lub fałsz.

Zaletą tego podejścia jest to, że w przypadku właściwości standardowej oczekujesz, że zawiera ona kolor jako wartość, którego użyjesz w innym miejscu w arkuszu stylów. Jeśli ktoś zaktualizuje tę właściwość, aby miała wartość liczbową, jej użycie w innym miejscu zakończy się niepowodzeniem. W przypadku atrybutu @property zdefiniowano kolor zapasowy, a także atrybut syntax, który deklaruje, że ta właściwość musi zawierać wartość koloru. Jeśli zostanie użyta wartość niebędąca kolorem, zostanie użyta wartość zastępcza.

Demonstracja: tło z migotającym gradientem

Jedną z ciekawych zastosowań @property jest płynna animacja właściwości, które wcześniej nie mogły być przekształcane, takich jak gradienty, które są postrzegane przez przeglądarkę jako obrazy. Jeśli jednak nadasz zmiennym znaczenie składniowe za pomocą @property, możesz ich używać w oświadczeniu gradientu. Teraz definiujesz animację między 2 deklarowanymi wartościami w gradientzie, co umożliwia animację. Weź pod uwagę ten przykład: karta z subtelną animacją tła, która składa się z 2 gradientów promieniowych zmieniających kolor w różnych odstępach czasowych:

Używanie @property do stylizowania animacji kolorów w gradientach tła.

Aby to zrobić, skonfiguruj wartości właściwości niestandardowych jako kolory:

@property --card-bg {
  syntax: "<color>";
  inherits: false;
  initial-value: lavender;
}

@property --shine-1 {
  syntax: "<color>";
  inherits: false;
  initial-value: wheat;
}

@property --shine-2 {
  syntax: "<color>";
  inherits: false;
  initial-value: lightpink;
}

Następnie użyj ich do utworzenia początkowego tła gradientowego:

.card {
background: radial-gradient(
      300px circle at 55% 60% in oklab,
      var(--shine-2), transparent 100% 100%),
      radial-gradient(farthest-side circle at 75% 30% in oklab,
      var(--shine-1) 0%, var(--card-bg) 100%);
}

Następnie zaktualizuj wartości w klatkach kluczowych:

@keyframes animate-color-1 {
  to {
    --shine-1: orange;
  }
}

@keyframes animate-color-2 {
  to {
    --shine-2: hotpink;
  }
}

I animuj je:

animation: animate-color-1 8s infinite linear alternate, animate-color-2 1s infinite linear alternate;

Podsumowanie

Zarejestrowane właściwości niestandardowe w CSS to bardzo przydatna funkcja, która rozszerza język CSS, nadając znaczenie i kontekst zmiennym CSS. Teraz, gdy @property jest w podstawie, ta supermoc CSS zyskuje na sile.

Dodatkowe materiały