@property: nadawanie supermocy zmiennym CSS

Una Kravets

CSS Houdini to termin ogólny obejmujący zestaw interfejsów API niskiego poziomu, które udostępniają części silnika renderowania CSS i dają deweloperom dostęp do modelu obiektów CSS. To ogromna zmiana w ekosystemie CSS, ponieważ pozwala deweloperom określić przeglądarce sposób odczytu 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 w CSS), nadając im znaczenie semantyczne (zdefiniowane przez składnię) i nawet wartości zastępcze, co umożliwia testowanie kodu CSS.

Pisanie 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). Obecnie można to zrobić za pomocą funkcji CSS.registerProperty() w JavaScript, ale w obsługiwanych przeglądarkach można też użyć funkcji @property:

CSS.registerProperty({
  name: '--colorPrimary',
  syntax: '<color>',
  initialValue: 'magenta',
  inherits: false
});

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

Teraz możesz uzyskać dostęp do właściwości --colorPrimary, korzystając z elementu var(--colorPrimary), tak jak w przypadku dowolnej innej właściwości niestandardowej usługi porównywania cen. 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ą var) lub ustawiać (zapisz/przepisz) wartości, ale jeśli w przypadku właściwości niestandardowych Houdini ustawisz wartość fałszywą, mechanizm renderowania CSS wyśle wartość początkową (wartość zapasową) zamiast ignorować wiersz.

Rozważ poniższy przykład. Zmienna --colorPrimary ma initial-value o wartości magenta. Deweloper nadał mu jednak nieprawidłową wartość „23”. Bez @property analizator CSS zignorowałby nieprawidłowy kod. Teraz parsowanie wraca do magenta. Umożliwia to prawdziwe substytuty i testowanie w ramach usługi porównywania cen. Ś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 znaków identyfikatora niestandardowego)

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

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.

W tym przykładzie animacja procentowego stopnia ścieżki gradientu przechodzi od wartości początkowej 40% do wartości końcowej 100% podczas interakcji z elementem. Powinieneś zobaczyć płynne przejście koloru gradientu od góry do dołu.

Przeglądarka po lewej stronie obsługuje interfejs Houdini Properties and Values API, co umożliwia płynne przejście z poziomego na gradientowy. 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 zapisywania właściwości niestandardowych określisz typ składni, a następnie użyjesz tych właściwości, aby włączyć animację, 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 animację, możesz zmienić wartość z pierwotnego 40% na 100%:

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

Dzięki temu będzie możliwe płynne przejście.

Podsumowanie

Reguła @property sprawia, że ta ekscytująca technologia staje się jeszcze bardziej dostępna, ponieważ umożliwia tworzenie kodu CSS o znaczeniu semantycznym w samym kodzie CSS. Aby dowiedzieć się więcej o Houdini w usłudze porównywania cen i interfejsie Properties and Values API, zapoznaj się z tymi zasobami:

• Czy Houdini jest już gotowy?
• Informacje o MDN Houdini
• Bardziej inteligentne właściwości niestandardowe dzięki nowemu interfejsowi Houdini API
• Wątroba CSSWG Issue Queue

Zdjęcie autorstwa Cristian Escobar z Unsplash.