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

Una Kravets

Przygotuj się na ulepszenie usługi porównywania cen Reguła @property, należąca do zestawu interfejsów API CSS Houdini, jest teraz w pełni obsługiwana we wszystkich nowoczesnych przeglądarkach. Ta przełomowa funkcja odblokowuje nowe poziomy kontroli i elastyczności w przypadku właściwości niestandardowych CSS (nazywanych także zmiennymi CSS), dzięki czemu arkusze stylów są inteligentniejsze i bardziej dynamiczne.

Obsługa przeglądarek

  • Chrome: 85.
  • Edge: 85.
  • Firefox: 128.
  • Safari: 16.4

Źródło

Zalety usługi @property

  • Znaczenie semantyczne: użyj @property, aby określić typ (składnię) właściwości niestandardowych. Informuje ona przeglądarkę, jakiego rodzaju dane zawiera Twoja właściwość niestandardowa (np. kolory, długość lub liczby). Pozwala to zapobiegać nieoczekiwanym wynikom i umożliwia korzystanie z nowych możliwości, takich jak animowanie gradientów.
  • Wartości zastępcze: nie musisz już znikać stylów. Użyj @property, aby ustawić początkową wartość właściwości niestandardowej. Jeśli później zostanie przypisana nieprawidłowa wartość, przeglądarka płynnie użyje zdefiniowanej wartości zastępczej.
  • Lepsza obsługa błędów: ulepszone bezpieczeństwo typów i możliwość ustawiania kreacji zastępczych otwierają nowe możliwości testowania i weryfikacji bezpośrednio w usłudze porównywania cen.

Tworzenie zaawansowanych właściwości niestandardowych

Aby utworzyć „standardową”, niestandardową, ustaw nazwę właściwości z prefiksem -- i nadaj tej właściwości wartość. Wartość tych właściwości niestandardowych jest analizowana przez przeglądarkę jako ciąg znaków.

Ten przykład pokazuje, jak inicjowana jest domyślna właściwość niestandardowa (oparta na ciągach znaków).

:root {
 --myColor: hotpink;
}

Aby korzystać z zaawansowanych właściwości niestandardowych, w tym semantyki wykraczającej poza ciąg, zarejestruj w usłudze @property właściwość niestandardową CSS.

W tym przykładzie ta sama właściwość niestandardowa została zainicjowana przy użyciu parametru @property.

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

Właściwość niestandardowa zainicjowana przy użyciu parametru @property zawiera znacznie więcej szczegółów niż tylko nazwę i wartość. Zawiera typ składni i ustawia dziedziczenie na „true” (prawda) lub „false” (fałsz).

Zaletą tego podejścia jest to, że właściwość standardowa powinna zawierać wartość koloru, która będzie używana w innym miejscu w arkuszu stylów. Jeśli ktoś zaktualizuje tę właściwość tak, aby miała wartość liczbową, użycie jej w innym miejscu zakończy się niepowodzeniem. W przypadku parametru @property zdefiniowany jest kolor zastępczy, a element syntax deklaruje, że ta właściwość musi zawierać wartość koloru. Jeśli jest używana wartość inna niż kolor, jest używana wartość zastępcza.

Prezentacja: migoczące tło gradientowe

Jedną z najbardziej przydatnych funkcji @property jest płynna animacja właściwości, których nie dało się wcześniej przejść, takich jak gradienty postrzegane przez przeglądarkę jako obrazy. Jeśli jednak zastosujesz składnię zmiennych za pomocą funkcji @property, możesz ich użyć w instrukcji gradientu. Teraz opisujesz animację między 2 zadeklarowanymi wartościami w gradientu, co powoduje włączenie animacji. Na przykład: karta z subtelną animacją w tle składającą się z dwóch gradientów promieniowych, które zmieniają kolor na różnych osiach czasu:

.
Używanie @property do określania stylu animowania kolorów w gradientie tła.

Można to osiągnąć, konfigurując wartości właściwości niestandardowej 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 możesz uzyskać do nich dostęp, aby utworzyć początkowe tło gradientowe:

.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%);
}

Dodatkowo możesz zaktualizować wartości w klatkach kluczowych:

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

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

Możesz też animować każdy z nich:

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

Podsumowanie

Właściwości niestandardowe zarejestrowane w CSS to bardzo zaawansowana funkcja, która rozszerza język CSS przez zapewnienie znaczenia i kontekstu zmiennych CSS. Teraz, przy @property lokalizacji docelowej w zakresie bazowym, ta supermoc CSS rośnie.

Materiały dodatkowe