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
:
CSS.registerProperty({ name: '--colorPrimary', syntax: '<color>', initialValue: 'magenta', inherits: false });
@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.
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:
/* Check for Houdini support & register property */
@supports (background: paint(something)) {
@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%
:
@supports (background: paint(something)) {
.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
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:
- Czy Houdini jest już gotowy?
- Odniesienie do MDN Houdini
- Ulepszone usługi niestandardowe z nowym interfejsem API Houdini
- Kolejka problemów Houdini CSSWG
Zdjęcie: Cristian Escobar, Unsplash.