@property: nadawanie supermocy zmiennym CSS

Una Kravets

CSS Houdini to ogólny termin dotyczący zestawu interfejsów API niskiego poziomu, które udostępniają części silnika renderowania CSS i umożliwiają programistom dostęp do obiektu modelu CSS. To ogromna zmiana w ekosystemie CSS, ponieważ pozwala deweloperom określić przeglądarce sposób odczytywania i analizowania niestandardowego kodu CSS bez konieczności oczekiwania na wbudowane wsparcie tych funkcji przez dostawców przeglądarek. To ekscytujące!

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

Ten interfejs API zwiększa możliwości właściwości niestandardowych w CSS (często nazywanych też zmiennymi CSS), nadając im znaczenie semantyczne (zdefiniowane przez składnię) i nawet wartości zastępcze, co umożliwia testowanie kodu CSS.

Zapisywanie właściwości niestandardowych Houdini

Oto przykład ustawienia właściwości niestandardowej (np. zmiennej CSS) z składnią (typem), wartością początkową (zastępczą) i wartością logiczną dziedziczenia (czy ma dziedziczyć wartość z elementu nadrzędnego, czy nie). Obecny sposób to użycie polecenia CSS.registerProperty() w JavaScript, ale w obsługiwanych przeglądarkach możesz użyć polecenia @property:

oddzielny plik JavaScript (Chromium 78),
CSS.registerProperty({
  name: '--colorPrimary',
  syntax: '<color>',
  initialValue: 'magenta',
  inherits: false
});
Dołączony do pliku CSS (Chromium 85)
@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

Teraz możesz uzyskać dostęp do właściwości --colorPrimary, tak jak do dowolnej innej właściwości niestandardowej usługi porównywania cen, za pomocą funkcji var(--colorPrimary). Różnica polega na tym, że --colorPrimary nie jest odczytywany tylko jako ciąg znaków. Zawiera dane.

Wartości zastępcze

Podobnie jak w przypadku innych właściwości niestandardowych, możesz pobierać (za pomocą funkcji var) lub ustawiać (za pomocą funkcji zapisu/przepisywania) wartości, ale w przypadku właściwości niestandardowych Houdini, jeśli podczas zastępowania ustawisz wartość fałszywą, mechanizm renderowania CSS wyśle wartość początkową (wartość zapasową) zamiast zignorować wiersz.

Rozważ poniższy przykład. Zmienna --colorPrimary ma initial-value o wartości magenta. Deweloper ustawił mu jednak nieprawidłową wartość „23”. Bez @property analizator CSS zignorowałby nieprawidłowy kod. Teraz parser wraca do wartości magenta. Dzięki temu można stosować rzeczywiste kreacje zastępcze i testować je w 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 CSS, określając typ. Obecnie dozwolone typy to:

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

Ustawienie składni umożliwia przeglądarce sprawdzanie właściwości niestandardowych pod kątem zgodności z syntaksą. Ma to wiele zalet.

Aby zilustrować ten punkt, pokażę Ci, jak animować gradient. Obecnie nie ma możliwości płynnego animowania (czyli interpolowania) wartości gradientu, ponieważ każda deklaracja gradientu jest analizowana jako ciąg znaków.

Przy użyciu właściwości niestandardowej z syntaksą „liczba” gradient po lewej stronie pokazuje płynne przejście między wartościami punktów kontrolnych. Gradient po prawej stronie używa domyślnej właściwości niestandardowej (bez zdefiniowanej składni) i pokazuje gwałtowne przejście.

W tym przykładzie odsetek zakończenia gradientu jest animowany z wartości początkowej 40% do wartości końcowej 100% po najechaniu kursorem myszy. Powinieneś zobaczyć płynne przejście koloru gradientu od góry do dołu.

Przeglądarka po lewej stronie obsługuje interfejs Houdini Właściwości i Wartości interfejsu API, umożliwiając płynne przejście w trybie zatrzymania gradientu. Przeglądarka po prawej stronie nie obsługuje tej funkcji. Przeglądarka bez obsługi tej funkcji może zrozumieć tę zmianę tylko jako ciąg znaków przechodzący z punktu A do punktu B. Nie ma możliwości interpolowania wartości, dlatego nie widzisz płynnego przejścia.

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

@property --gradPoint {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 40%;
}

Gdy nadejdzie czas na jej animowanie, możesz zmienić wartość z pierwotnego 40% na 100%:

.post:hover,
.post:focus {
  --gradPoint: 100%;
}

Teraz uzyskasz płynne przejście gradientowe.

Gładko przechodzące w siebie krawędzie gradientu. Zobacz wersję demonstracyjną na Glitch

Podsumowanie

Reguła @property sprawia, że ekscytująca technologia jest jeszcze bardziej dostępna, ponieważ umożliwia Ci pisanie semantycznego kodu CSS w samym CSS. Aby dowiedzieć się więcej o Houdini w usłudze porównywania cen i interfejsie Properties and Values API, zapoznaj się z tymi materiałami:

Zdjęcie autorstwa Cristian Escobar z Unsplash.