@property: nadawanie supermocy zmiennym CSS

Una Kravets

CSS Houdini to ogólny termin obejmujący zestaw interfejsów API niskiego poziomu, które ujawniają części mechanizmu renderowania CSS i umożliwiają programistom dostęp do modelu obiektu CSS. To ogromna zmiana w ekosystemie usług porównywania cen, ponieważ pozwala programistom poinformować przeglądarkę, jak odczytywać i analizować niestandardowe kody CSS, nie czekając, aż dostawcy przeglądarek zapewnią im wbudowaną obsługę tych funkcji. Bardzo ekscytujące!

Jednym z najciekawszych dodatków do CSS w ramach Houdini jest interfejs API Właściwości i wartości.

Ten interfejs API wzmacnia niestandardowe właściwości CSS (nazywane też zmiennymi CSS) przez nadanie im znaczenia semantycznego (zdefiniowanego za pomocą składni), a nawet wartości zastępczych, umożliwiając testowanie CSS.

Pisanie właściwości niestandardowych Houdini

Oto przykład ustawiania właściwości niestandardowej (np. zmiennej CSS), ale teraz ze składnią (typ), wartością początkową (zastępczą) i wartością logiczną dziedziczenia (dziedziczy wartość z elementu nadrzędnego czy nie?). Obecnie można to zrobić za pomocą CSS.registerProperty() w języku JavaScript, ale aby umożliwić obsługę przeglądarek, możesz użyć @property:

Oddzielny plik JavaScript (Chromium 78)
CSS.registerProperty({
  name: '--colorPrimary',
  syntax: '',
  initialValue: 'magenta',
  inherits: false
});
W pliku CSS (Chromium 85)
@property --colorPrimary {
  syntax: '';
  initial-value: magenta;
  inherits: false;
}

Teraz możesz uzyskać dostęp do właściwości --colorPrimary przez var(--colorPrimary), tak jak do każdej innej niestandardowej właściwości CSS. Różnica polega jednak na tym, że element --colorPrimary nie jest tylko odczytywany jako ciąg znaków. Są dane!

Wartości zastępcze

Tak jak w przypadku każdej innej właściwości niestandardowej, możesz uzyskać (za pomocą var) lub ustawić wartości (zapis/przepisywanie). Jeśli jednak przy zastępowaniu ustawisz wartość fałszywą, mechanizm renderowania CSS wyśle wartość początkową (wartość zastępczą) zamiast ignorować wiersz.

Przeanalizuj ten przykład. Zmienna --colorPrimary zawiera initial-value o wartości magenta. Deweloper zastosował jednak nieprawidłową wartość „23”. Bez @property parser CSS zignoruje nieprawidłowy kod. Teraz parser wraca do magenta. Dzięki temu można stosować wartości zastępcze i testować w obrębie CSS. Świetnie.

.card {
  background-color: var(--colorPrimary); /* magenta */
}

.highlight-card {
  --colorPrimary: yellow;
  background-color: var(--colorPrimary); /* yellow */
}

.another-card {
  --colorPrimary: 23;
  background-color: var(--colorPrimary); /* magenta */
}

Składnia

Dzięki funkcji składni możesz teraz pisać semantyczny kod CSS, określając jego typ. Obecnie dozwolone typy:

  • length
  • number
  • percentage
  • length-percentage
  • color
  • image
  • url
  • integer
  • angle
  • time
  • resolution
  • transform-list
  • transform-function
  • custom-ident (niestandardowy ciąg identyfikatora)

Ustawienie składni umożliwia przeglądarce sprawdzanie właściwości niestandardowych. To rozwiązanie ma wiele zalet.

Aby to zilustrować, pokażę teraz, jak animować gradient. Obecnie nie można płynnie animować (ani interpolować) wartości gradientu, ponieważ każda deklaracja gradientu jest analizowana jako ciąg znaków.

W przypadku właściwości niestandardowej ze składnią „liczby” gradient po lewej stronie pokazuje płynne przejście między wartościami zatrzymania. Gradient po prawej stronie używa domyślnej właściwości niestandardowej (bez zdefiniowanej składni) i pokazuje nagłe przejście.

W tym przykładzie procent zatrzymania gradientu jest animowany od wartości początkowej 40% do wartości końcowej wynoszącej 100% przez interakcję po najechaniu kursorem. Powinno być widoczne płynne przejście górnego gradientu w dół.

Przeglądarka po lewej stronie obsługuje interfejs Houdini Właściwości i wartości API, który umożliwia płynne zatrzymanie przejścia gradientu. Przeglądarka po prawej stronie tego nie robi. Przeglądarka nieobsługiwana jest w stanie zrozumieć tę zmianę tylko jako ciąg znaków przechodzący z punktu A do punktu B. Nie ma możliwości interpolacji wartości i dlatego płynne przejście nie jest widoczne.

Jeśli jednak zadeklarujesz typ składni podczas tworzenia właściwości niestandardowych, a następnie użyjesz tych właściwości do włączenia animacji, zobaczysz przejście. Możesz utworzyć instancję właściwości niestandardowej --gradPoint w ten sposób:

/* Check for Houdini support & register property */
@supports (background: paint(something)) {
  @property --gradPoint {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 40%;
  }
}

Gdy nadejdzie czas na jego animowanie, możesz zmienić wartość z początkowej wartości 40% na 100%:

@supports (background: paint(something)) {
  .post:hover,
  .post:focus {
    --gradPoint: 100%;
  }
}

To spowoduje włączenie płynnego przejścia gradientu.

Płynnie przechodzące obramowanie gradientu. Zobacz prezentację Glitch

Podsumowanie

Reguła @property zwiększa dostępność ekscytującej technologii, umożliwiając pisanie kodu CSS o znaczeniu semantycznym bezpośrednio w kodzie CSS. Aby dowiedzieć się więcej o CSS Houdini i interfejsie Właściwości i wartości API, zapoznaj się z tymi materiałami:

Zdjęcie: Cristian Escobar, Unsplash.