Bardziej inteligentne właściwości niestandardowe dzięki nowemu interfejsowi API firmy Houdini

Przejścia i ochrona danych w CSS

Sam Richard

Właściwości niestandardowe CSS, znane też jako zmienne CSS, umożliwiają definiowanie własnych właściwości w kodzie CSS i używanie ich wartości w całym kodzie CSS. Chociaż są obecnie niezwykle przydatne, mają wady, które mogą utrudniać pracę z nimi: mogą przyjmować dowolną wartość, więc mogą zostać przypadkowo zastąpione czymś nieoczekiwanym, zawsze dziedziczą wartości po elemencie nadrzędnym i nie można ich przekształcać. Dzięki interfejsowi CSS Properties and Values API Level 1 Houdini, który jest teraz dostępny w Chrome 78, te niedociągnięcia zostały wyeliminowane, co sprawia, że właściwości niestandardowe CSS są niezwykle przydatne.

Czym jest Houdini?

Zanim omówimy nowy interfejs API, porozmawiajmy krótko o Houdinim. Grupa robocza CSS-TAG Houdini, znana lepiej jako CSS Houdini lub po prostu Houdini, ma na celu „opracowywanie funkcji, które wyjaśniają »magię« stylizacji i układu w internecie”. Zbiór specyfikacji Houdini ma na celu udostępnienie możliwości silnika renderowania przeglądarki, co pozwala na lepsze zrozumienie naszych stylów i rozszerzenie silnika renderowania. Dzięki temu możliwe jest wreszcie wpisywanie wartości CSS w kodzie JavaScript oraz stosowanie kodu polyfill lub tworzenie nowych stylów CSS bez wpływu na wydajność. Houdini może znacznie zwiększyć możliwości kreatywne w internecie.

Interfejs API właściwości i wartości CSS na poziomie 1

Interfejs API właściwości i wartości CSS na poziomie 1 (Houdini Props and Vals) pozwala nam nadać strukturę właściwościom niestandardowym. Obecnie sytuacja wygląda tak, gdy używane są właściwości niestandardowe:

.thing {
  --my-color: green;
}

Właściwości niestandardowe nie mają typów, więc mogą być zastępowane w nieoczekiwany sposób. Zastanów się na przykład, co się stanie, jeśli zdefiniujesz --my-color za pomocą adresu URL.

.thing {
  --my-color: url('not-a-color');
  color: var(--my-color);
}

W tym przypadku, ponieważ zmienna --my-color nie ma typu, nie wie, że adres URL nie jest prawidłową wartością koloru. Gdy go używamy, przywracane są wartości domyślne (czarny dla color, przezroczysty dla background). Dzięki właściwościom i wartościom Houdini właściwości niestandardowe można zarejestrować, aby przeglądarka wiedziała, jakie powinny być.

Właściwość niestandardowa --my-color jest teraz zarejestrowana jako kolor. Informuje to przeglądarkę, jakie rodzaje wartości są dozwolone oraz jak może wpisywać i traktować tę właściwość.

Anatomia zarejestrowanej usługi

Rejestrowanie usługi wygląda tak:

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

Obsługuje te opcje:

name: string

Nazwa właściwości niestandardowej.

syntax: string

Sposób analizowania właściwości niestandardowej. Pełną listę możliwych wartości znajdziesz w specyfikacji Wartości i jednostki CSS. Domyślna wartość to *.

inherits: boolean

czy dziedziczy wartość elementu nadrzędnego. Domyślna wartość to true.

initialValue: string

Wartość początkowa właściwości niestandardowej.

Przyglądam się bliżej: syntax. Dostępnych jest wiele prawidłowych opcji, od liczb po kolory i typy <custom-ident>. Te składnie można też modyfikować za pomocą tych wartości:

• Dodanie + oznacza, że akceptuje on rozdzieloną spacjami listę wartości o tej składni. Na przykład <length>+ będzie listą długości rozdzielonych spacjami.
• Dołączanie# oznacza, że dopuszczalna jest rozdzielona przecinkami lista wartości o takiej składni. Na przykład <color># będzie listą kolorów rozdzieloną przecinkami.
• Dodanie | między składniami lub identyfikatorami oznacza, że każda z podanych opcji jest prawidłowa. Na przykład <color># | <url> | magic zezwala na listę kolorów rozdzieloną przecinkami, adres URL lub słowo magic.

Gotchas

W przypadku właściwości i wartości Houdini występują 2 problemy. Po pierwsze, po zdefiniowaniu właściwości nie można jej zaktualizować, a próba ponownego zarejestrowania właściwości spowoduje błąd informujący, że została już zdefiniowana.

Po drugie, w przeciwieństwie do właściwości standardowych właściwości zarejestrowane nie są sprawdzane podczas analizowania. Są one sprawdzane podczas obliczania. Oznacza to, że nieprawidłowe wartości nie będą wyświetlane jako nieprawidłowe podczas sprawdzania właściwości elementu, a uwzględnienie nieprawidłowej właściwości po prawidłowej nie spowoduje powrotu do prawidłowej. Nieprawidłowa właściwość zostanie jednak zastąpiona domyślną wartością zarejestrowanej właściwości.

Animowanie właściwości niestandardowych

Zarejestrowana właściwość niestandardowa zapewnia dodatkową korzyść poza sprawdzaniem typu: możliwość jej animowania. Oto przykład podstawowej animacji:

<script>
CSS.registerProperty({
  name: '--stop-color',
  syntax: '<color>',
  inherits: false,
  initialValue: 'blue',
});
</script>

<style>
button {
  --stop-color: red;
  transition: --stop-color 1s;
}

button:hover {
  --stop-color: green;
}
</style>

Gdy najedziesz na niego kursorem, zmieni kolor z czerwonego na zielony. Bez zarejestrowania właściwości kolor będzie się zmieniał skokowo, ponieważ bez rejestracji przeglądarka nie wie, czego oczekiwać między jedną wartością a drugą, i dlatego nie może zagwarantować możliwości przejścia między nimi. Ten przykład można jednak rozwinąć, aby animować gradienty CSS. Ten kod CSS można zapisać za pomocą tej samej zarejestrowanej właściwości:

button {
  --stop-color: red;
  background: linear-gradient(var(--stop-color), black);
  transition: --stop-color 1s;
}

button:hover {
  --stop-color: green;
}

Spowoduje to animowanie naszej właściwości niestandardowej, która jest częścią linear-gradient, a tym samym animowanie naszego gradientu liniowego. Poniżej znajdziesz Codepen, w którym możesz zobaczyć pełny kod w działaniu i poeksperymentować z nim.

Podsumowanie

Houdini jest już w drodze do przeglądarek, a wraz z nim zupełnie nowe sposoby pracy z CSS i jego rozszerzania. Dzięki udostępnionemu już interfejsowi Paint API oraz nowym właściwościom i wartościom niestandardowym nasz zestaw narzędzi do tworzenia kreacji się powiększa, umożliwiając definiowanie właściwości CSS i używanie ich do tworzenia i animowania nowych, ciekawych projektów. Więcej informacji znajdziesz w kolejce problemów Houdini, gdzie możesz przekazać opinię i zobaczyć, co czeka Houdini w przyszłości. Houdini ma na celu opracowywanie funkcji, które wyjaśniają „magię” stylizacji i układu w internecie, więc wykorzystaj te magiczne funkcje.