@property: nadawanie supermocy zmiennym CSS

Una Kravets

CSS Houdini to ogólny termin obejmujący niskopoziomowych interfejsów API, które udostępniają części mechanizmu renderowania CSS dostępu programistów do obiektu modelu CSS. To ogromna zmian w ekosystemie CSS, ponieważ pozwala programistom określić, jak odczyt i analiza niestandardowego kodu CSS bez konieczności czekania na dostarczenie przez dostawców przeglądarek z wbudowaną obsługą tych funkcji. Ekscytujące!

Jedną z najbardziej ekscytujących nowości w usłudze porównywania cen w Houdini jest Właściwości i wartości API.

Ten interfejs API uzupełnia niestandardowe właściwości CSS (nazywane też zmiennych CSS), nadając im znaczenie semantyczne (zdefiniowane za pomocą składni), a nawet kreacji zastępczych, co włącza testowanie CSS.

Jak pisać właściwości niestandardowe Houdini

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

Oddzielny plik JavaScript (Chromium 78)
CSS.registerProperty({
  name: '--colorPrimary',
  syntax: '<color>',
  initialValue: 'magenta',
  inherits: false
});
Uwzględnione w pliku CSS (Chromium 85)
@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

Teraz masz dostęp do usługi --colorPrimary tak samo jak do każdej innej właściwości niestandardowej CSS, korzystając z var(--colorPrimary) Różnica polega jednak na tym, że --colorPrimary nie jest czytaj jak 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ą funkcji var) lub ustawić (zapisz/przepisz), ale z właściwościami niestandardowymi Houdini, jeśli ustawisz wartość „falsey” podczas jego zastąpienia, mechanizm renderowania CSS wyśle wartość początkową (wartość zastępczą), zamiast ignorować linię.

Przeanalizuj przykład poniżej. Zmienna --colorPrimary zawiera initial-value z magenta. Jednak deweloper przyznał mu nieprawidłowe wartość „23”. Bez parametru @property parser CSS zignoruje nieprawidłowy kod. Teraz parser wraca do wartości magenta. Dzięki temu prawdziwych kreacji zastępczych i testowania w CSS. Super!

.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 typu. 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 typu właściwości niestandardowych. Ma to wiele korzyści.

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

. Używanie właściwości niestandardowej z „liczbą” gradient po lewej stronie pokazuje przejścia między wartościami zatrzymania. Gradient po prawej stronie używa domyślnej właściwości niestandardowej. (bez zdefiniowanej składni) i pojawia się nagłe przejście.

W tym przykładzie odsetek zatrzymania gradientu jest animowany od punktu początkowego od 40% do 100% po interakcji po najechaniu kursorem myszy. Powinna pojawić się ikona płynnego przejścia tego koloru górnego gradientu w dół.

Przeglądarka po lewej stronie obsługuje interfejs Houdini Właściwości i Wartości API, co zapewnia płynne przejście w stopniu gradientu. Przeglądarka po prawej stronie już tego nie robi. nieobsługiwaną przeglądarkę rozpozna tę zmianę tylko jako ciąg z punktu A do punktu B. Nie ma możliwości interpolowania wartości. więc przejście nie będzie płynne.

Jeśli jednak podczas pisania właściwości niestandardowych zadeklarujesz typ składni, a następnie użyjesz właściwości niestandardowe, aby włączyć animację, zobaczysz przejście. Ty może utworzyć wystąpienie właściwości niestandardowej --gradPoint w ten sposób:

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

Gdy trzeba będzie włączyć animację, możesz zmienić wartość z początkowej 40% na 100%:

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

Teraz uzyskasz płynne przejście gradientowe.

. Płynne przejście gradientu. Zobacz wersję demonstracyjną Glitch

Podsumowanie

Reguła @property sprawia, że ekscytująca technologia jest jeszcze bardziej dostępna co pozwala napisać kod CSS o znaczeniu semantycznym w obrębie samego arkusza CSS. Aby się uczyć aby dowiedzieć się więcej o CSS Houdini oraz interfejsie Właściwości i Wartości interfejsu API, zapoznaj się z tymi zasoby:

Zdjęcie: Cristian Escobar, Unsplash.