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

Przejścia i ochrona danych w CSS

Sam Richard

Własne właściwości CSS, czyli zmiennych CSS, umożliwiają definiowanie własnych właściwości w CSS i używanie ich wartości w całym kodzie. Chociaż są dziś niezwykle przydatne, mają wady, które utrudniają im pracę: mogą przyjmować dowolną wartość, przez co mogą zostać przypadkowo zastąpione czymś nieoczekiwanym. Zawsze dziedziczą swoje wartości od elementu nadrzędnego i nie można ich przenieść. Dzięki interfejsowi API właściwości i wartości CSS poziomu 1 Houdini, który jest teraz dostępny w Chrome 78, te niedociągnięcia zostały usunięte, co sprawia, że właściwości niestandardowe CSS są niesamowicie potężne.

Czym jest Houdini?

Zanim porozmawiamy o nowym interfejsie API, krótko omówimy Houdini. Grupa robocza CSS-TAG Houdini, lepiej znana jako CSS Houdini lub po prostu Houdini, istnieje po to, aby „opracowywać funkcje, które wyjaśniają 'magię' stylizacji i układu w internecie”. Kolekcja specyfikacji Houdini została zaprojektowana tak, aby wykorzystywać możliwości silnika renderowania przeglądarki, umożliwiając jednocześnie dogłębną analizę naszych stylów i rozszerzenie możliwości tego silnika. Dzięki temu można w końcu wpisywać wartości CSS w JavaScript i tworzyć polyfille lub nowe CSS bez wpływu na wydajność. Houdini może zwiększyć potencjał kreatywności w internecie.

Właściwości i wartości CSS API, poziom 1

Interfejs CSS Properties and Values API Level 1 (czyli Houdini Props and Vals) pozwala nam nadać strukturę naszym właściwościom niestandardowym. Oto obecna sytuacja w przypadku usług niestandardowych:

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

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

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

W tym przypadku, ponieważ nie wpisano wartości --my-color, nie wiadomo, że adres URL nie jest prawidłową wartością koloru. Gdy go używamy, stosujemy wartości domyślne (czarny dla color, przezroczysty dla background). Dzięki Houdini Props and Vals właściwości niestandardowe mogą być rejestrowane, aby przeglądarka wiedziała, jakie powinny być wartości.

Właściwość niestandardowa --my-color jest teraz zarejestrowana jako kolor. Informuje on przeglądarkę, jakie wartości są dozwolone i jak należy je interpretować.

Struktura zarejestrowanej usługi

Rejestrowanie usługi wygląda tak:

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

Obsługuje on te opcje:

name: string

Nazwa właściwości niestandardowej.

syntax: string

Jak zanalizować właściwość niestandardową. Pełną listę możliwych wartości znajdziesz w specyfikacji Wartości i jednostki w usługach porównywania cen. Domyślna wartość to *.

inherits: boolean

Czy dziedziczy wartość od jednostki nadrzędnej. Domyślna wartość to true.

initialValue: string

Początkowa wartość właściwości niestandardowej.

Przyjrzyj się bliżej syntax. Dostępnych jest kilka opcji, od liczb po kolory i <custom-ident>typy. Te składnie można też modyfikować, używając tych wartości:

• Dodanie + oznacza, że parametr może zawierać listę wartości o takim składniku oddzielonych spacjami. Na przykład <length>+ to lista długości rozdzielona spacjami.
• Dodanie # oznacza, że parametr może zawierać rozdzieloną przecinkami listę wartości o tej składni. Np. <color># byłaby rozdzielaną przecinkami listą kolorów
• Dodanie | między składnią lub identyfikatorami oznacza, że dowolna z podanych opcji jest prawidłowa. Na przykład <color># | <url> | magic pozwala na podanie listy kolorów oddzielonych przecinkami, adresu URL lub słowa magic.

Gotchas

W przypadku Houdini Props i Vals należy wziąć pod uwagę 2 kwestie. Po pierwsze, po zdefiniowaniu usługi nie można już zaktualizować zarejestrowanej usługi, a próba ponownego zarejestrowania usługi spowoduje wyświetlenie błędu oznaczającego, że została już zdefiniowana.

Po drugie, w odróżnieniu od właściwości standardowych, właściwości zarejestrowane nie są weryfikowane podczas przetwarzania. Są one weryfikowane w momencie obliczeń. Oznacza to, że podczas sprawdzania właściwości elementu nieprawidłowe wartości nie będą uznawane za nieprawidłowe, a dodanie nieprawidłowej właściwości po prawidłowej wartości nie powoduje zmiany wartości domyślnej.

Animowanie właściwości niestandardowych

Zarejestrowane właściwości niestandardowe zapewniają bonus poza sprawdzaniem typu: możliwość ich animowania. Przykład prostej 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 przycisk, zmieni on kolor z czerwonego na zielony. Jeśli właściwość nie zostanie zarejestrowana, usługa przełączy się z jednego koloru na drugi, ponieważ bez rejestracji przeglądarka nie wie, czego się spodziewać między wartościami i dlatego nie może zagwarantować możliwości ich przeniesienia. W tym przykładzie można jednak pójść o krok dalej i animować gradienty CSS. Ten kod CSS może być zapisywany z tą samą zarejestrowaną 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 animację właściwości niestandardowej, która jest częścią linear-gradient, a tym samym animację gradientu liniowego. Aby zobaczyć kod w akcji i spróbować go samodzielnie użyć, otwórz Glitch poniżej.

Podsumowanie

Houdini jest już dostępny w przeglądarkach, a wraz z nim zupełnie nowe sposoby pracy z CSS i jego rozszerzania. Dzięki już dostępnemu interfejsowi API programu Paint oraz niestandardowym elementom i wartościom nasz zestaw narzędzi do tworzenia kreacji się powiększa, co pozwala nam definiować typowane właściwości CSS i wykorzystywać je do tworzenia i animowania nowych, ekscytujących projektów. Więcej informacji znajdziesz też w kole linii Houdini, gdzie możesz przesłać opinię i zobaczyć, co dalej z tą usługą. Houdini stworzono po to, by rozwijać funkcje objaśniające „magię” stylu i układu w internecie, więc nie zwlekaj i wykorzystaj te magiczne funkcje.

Fot. Maik Jonietz na zdjęciu Unsplash