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, zwane też zmiennymi CSS, umożliwiają definiowanie własnych właściwości w CSS i używanie ich wartości w całym kodzie. Chociaż są one obecnie bardzo przydatne, mają też wady, które mogą utrudniać z nimi pracę. Mogą przyjmować dowolne wartości, więc mogą zostać przypadkowo zastąpione czymś nieoczekiwanym. Zawsze dziedziczą 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, zapewniając jednocześnie lepsze zrozumienie naszych stylów i możliwość rozszerzania naszego silnika renderowania. 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 interfejs Houdini Props and Vals) umożliwia nam nadanie struktury 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 można je zastąpić 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.

Przyjrzyjmy 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 tej składni, rozdzielonych 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. Na przykład <color># to lista kolorów rozdzielona przecinkami.
• 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.

Gotcha

W przypadku Houdini Props i Vals należy wziąć pod uwagę 2 kwestie. Po pierwsze, gdy już zdefiniujesz usługę, nie możesz zaktualizować istniejącej zarejestrowanej usługi. Próba ponownej rejestracji usługi spowoduje wyświetlenie błędu informującego, że usługa 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 nieprawidłowe wartości nie będą się wyświetlać jako nieprawidłowe podczas sprawdzania właściwości elementu, a uwzględnienie nieprawidłowej właściwości po prawidłowej nie spowoduje użycia prawidłowej właściwości. Nieprawidłowa właściwość zostanie jednak zastąpiona domyślną wartością zarejestrowanej właściwości.

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. Bez zarejestrowania właściwości będzie ona przeskakiwać z jednego koloru na inny. Ponieważ bez rejestracji przeglądarka nie wie, czego się spodziewać między jedną a drugą wartością, nie może zagwarantować możliwości przejścia między nimi. 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 samemu go wypróbować, 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 rozszerzania jego możliwości. 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. W kole linii Houdini znajdziesz więcej informacji. Możesz tam przesłać opinię i sprawdzić, co nowego w Houdini. Houdini służy do tworzenia funkcji, które wyjaśniają „magię” stylizacji i układu w internecie. Zacznij korzystać z tych magicznych funkcji.

Zdjęcie autorstwa Maik Jonietz na Unsplash