@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:

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, 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.

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.

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:

• Czy Houdini jest już gotowy?
• Informacje o MDN Houdini
• Bardziej inteligentne właściwości niestandardowe dzięki nowemu interfejsowi Houdini API
• Kolejka problemów Houdini CSSWG

Zdjęcie autorstwa Cristian Escobar z Unsplash.