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

Przejścia i ochrona danych w CSS

Sam Richard

Niestandardowe 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 arkuszu CSS. Chociaż są one obecnie niezwykle przydatne, mają wady, które mogą utrudniać pracę: 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 przenosić. Dzięki interfejsowi CSS Properties and Values API Level 1 Houdiniego, który jest teraz dostępny w Chrome 78, te niedociągnięcia zostały wyeliminowane, dzięki czemu niestandardowe właściwości CSS stały się niezwykle przydatne.

Czym jest Houdini?

Zanim przejdziemy do nowego interfejsu API, porozmawiajmy krótko o Houdini. 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 zarówno lepiej poznać nasze style, jak i rozszerzyć silnik renderowania. Dzięki temu możliwe jest wreszcie wpisywanie wartości CSS w JavaScript i stosowanie polyfilli lub tworzenie nowych CSS bez utraty wydajności. Houdini może zwiększyć kreatywność w internecie.

CSS Properties and Values API Level 1

CSS Properties and Values API Level 1 (Houdini Props and Vals) pozwala nam nadawać strukturę właściwościom niestandardowym. Obecna sytuacja w przypadku korzystania z właściwości niestandardowych:

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

Atrybuty niestandardowe nie mają typów, więc można je zastępować w nieoczekiwany sposób. Rozważmy 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ż --my-color nie jest wpisany, nie wie, że adres URL nie jest prawidłową wartością koloru. Gdy go używamy, wraca do wartości domyślnych (czarnej w przypadku color i przezroczystej w przypadku background). W przypadku Houdini Props i Vals właściwości niestandardowe można zarejestrować, aby przeglądarka wiedziała, czym powinny być.

Właściwość niestandardowa --my-color jest teraz zarejestrowana jako kolor. Informuje to przeglądarkę, jakie rodzaje wartości są dozwolone i jak może ona 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

Jak analizować właściwość niestandardową. Pełną listę możliwych wartości znajdziesz w specyfikacji Wartości i jednostki CSS. Domyślna wartość to *.

inherits: boolean

Określa, czy dziedziczy wartość z elementu nadrzędnego. Domyślna wartość to true.

initialValue: string

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

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

• Dodanie znaku + oznacza, że parametr akceptuje rozdzieloną spacjami listę wartości o tej składni. Na przykład <length>+ to lista długości rozdzielonych spacjami.
• Dopisywanie# oznacza, że akceptuje rozdzieloną przecinkami listę wartości o tej składni. Na przykład <color># to lista kolorów rozdzielonych przecinkami.
• Dodanie znaku | między składniami lub identyfikatorami oznacza, że dowolna z podanych opcji jest prawidłowa. Na przykład <color># | <url> | magic zezwala na listę kolorów rozdzielonych przecinkami, adres URL lub słowo magic.

Pułapki

W przypadku właściwości i wartości Houdini występują 2 problemy. Po pierwsze, po zdefiniowaniu zarejestrowanej usługi nie można jej zaktualizować, a próba ponownej rejestracji spowoduje wyświetlenie błędu informującego, że usługa została już zdefiniowana.

Po drugie, w przeciwieństwie do usług standardowych zarejestrowane usługi nie są weryfikowane podczas analizowania. Są one weryfikowane w momencie 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 właściwości. Nieprawidłowa właściwość spowoduje jednak powrót do domyślnej wartości zarejestrowanej właściwości.

Animowanie właściwości niestandardowych

Zarejestrowana właściwość niestandardowa to nie tylko sprawdzanie typu, ale też dodatkowa korzyść: możliwość animowania. Podstawowy przykład animacji wygląda tak:

<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 się spodziewać 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. Poniższy 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 animację naszej właściwości niestandardowej, która jest częścią linear-gradient, a tym samym animację naszego gradientu liniowego. Sprawdź poniższy Codepen, aby zobaczyć pełny kod w działaniu i samemu go wypróbować.

Podsumowanie

Houdini jest w drodze do przeglądarek, a wraz z nim pojawią się zupełnie nowe sposoby pracy z CSS i jego rozszerzania. Dzięki interfejsowi Paint API, który jest już dostępny, oraz właściwościom i wartościom niestandardowym nasz zestaw narzędzi do tworzenia kreacji się powiększa, co pozwala nam definiować typowane właściwości CSS i używać ich do tworzenia i animowania nowych, interesujących projektów. Więcej informacji znajdziesz w kolejce problemów z Houdini, gdzie możesz przekazać opinię i sprawdzić, co dalej z Houdini. Houdini ma na celu opracowywanie funkcji, które wyjaśniają „magię” stylizacji i układu w internecie, więc korzystaj z nich jak najwięcej.

Zdjęcie:Maik Jonietz w serwisie Unsplash