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

Przeniesienia i ochrona danych w usłudze porównywania cen

Sam Richard

Niestandardowe właściwości CSS, nazywane też zmiennymi CSS, pozwalają definiować w CSS własne właściwości i używać ich wartości w całym kodzie CSS. Obecnie są one niezwykle przydatne, ale mają wady, które utrudniają im pracę. Mogą przyjąć dowolną wartość, aby przypadkowo zastąpić je czymś nieoczekiwanym, ale zawsze dziedziczą wartości po elemencie nadrzędnym i nie można ich przenieść. Dzięki opracowanym przez Houdinimu interfejsowi CSS Właściwości and Values API Level 1, który jest teraz dostępny w Chrome 78, udało się wyeliminować te braki, dzięki czemu niestandardowe właściwości CSS stają się niezwykle przydatne.

Co to jest Houdini?

Zanim zaczniemy omawianie nowego interfejsu API, porozmawiajmy szybko o Houdini. Zadaniem organizacji CSS-TAG Houdini Task Force, bardziej znanej pod nazwą CSS Houdini lub po prostu Houdini, jest „opracowywanie funkcji, które wyjaśniają „magię” stylu i układu w internecie”. Kolekcja specyfikacji Houdini została opracowana po to, aby zwiększyć możliwości silnika renderowania przeglądarki, pozwalając na lepszy wgląd w style i możliwość rozszerzenia mechanizmu renderowania. W ten sposób można wpisać wartości CSS w JavaScript i polyfilling oraz opracować nowy kod CSS bez działań związanych z wydajnością. Houdini ma potencjał, by pochwalić się kreatywnością w internecie.

Interfejs API właściwości i wartości CSS – poziom 1

Poziom interfejsu API Właściwości i wartości CSS 1 (Houdini Props i Vals) umożliwia nam nadanie struktury właściwościom niestandardowym. Oto obecny stan, gdy korzystasz z właściwości niestandardowych:

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

Właściwości niestandardowe nie mają typów, więc mogą zostać zastąpione w nieoczekiwany sposób. Zobacz 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 --my-color nie został wpisany, więc nie wie, że adres URL nie jest prawidłową wartością koloru. Gdy go używamy, wraca do wartości domyślnych (czarny w przypadku color, przezroczysty w przypadku background). Dzięki usługom i wałom Houdini można zarejestrować właściwości niestandardowe, aby przeglądarka powinna wiedzieć, jak powinna działać.

Teraz właściwość niestandardowa --my-color jest zarejestrowana jako kolor. Dzięki temu przeglądarka poinformuje przeglądarkę, jakie rodzaje wartości są dozwolone oraz jak może wpisać i traktować daną właściwość.

Struktura zarejestrowanej usługi

Proces rejestracji usługi przebiega 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

Analizowanie właściwości niestandardowej. Pełną listę możliwych wartości znajdziesz w specyfikacji wartości i jednostek 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 urządzeniu syntax. Jest wiele prawidłowych opcji: od liczb przez kolory po typy <custom-ident>. Te składni można również modyfikować za pomocą poniższych wartości

• Dodatek + oznacza, że akceptuje rozdzielaną spacjami listę wartości tej składni. np. <length>+ będzie listą rozdzielonych spacjami długości
• Dołączenie# oznacza, że akceptowane są rozdzielone przecinkami listę wartości w danej składni. np. <color># może być listą kolorów oddzielonych przecinkami
• Dodanie parametru | między składniami lub identyfikatorami oznacza, że dowolna z podanych opcji jest prawidłowa. Na przykład <color># | <url> | magic może zawierać listę kolorów rozdzielonych przecinkami, adres URL lub słowo magic.

Gotchas

Są 2 zamki z houdini i vals. Po pierwsze, po zdefiniowaniu właściwości nie ma możliwości aktualizacji istniejącej zarejestrowanej właściwości, a próba ponownego zarejestrowania właściwości spowoduje wyświetlenie błędu wskazującego, że została już zdefiniowana.

Po drugie, w przeciwieństwie do właściwości standardowych, zarejestrowane właściwości nie są sprawdzane podczas analizy. Zamiast tego są weryfikowane podczas obliczania. Oznacza to, że nieprawidłowe wartości nie będą traktowane jako nieprawidłowe podczas sprawdzania właściwości elementu, a dodanie nieprawidłowej właściwości po prawidłowej nie spowoduje zmiany wartości prawidłowej. Nieprawidłowa właściwość jednak przełączy się na wartość domyślną zarejestrowanej usługi.

Animowanie właściwości niestandardowych

Zarejestrowana właściwość niestandardowa to ciekawy dodatek, który wykracza poza sprawdzanie typu: możliwość animacji. 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 kursorem na przycisk, zacznie się animować od czerwonego do zielonego. Bez zarejestrowania właściwości przeskakuje z jednego koloru na drugi. Bez rejestracji przeglądarka nie wie, czego może oczekiwać między jedną wartością a następną, dlatego nie może zagwarantować możliwości ich przeniesienia. Ten przykład można jednak pójść o krok dalej i animować gradienty CSS. Ten kod CSS może być zapisany przy użyciu 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 niestandardowej właściwości, która jest częścią właściwości linear-gradient, i tym samym animowanie gradientu liniowego. Sprawdź glitch poniżej, aby zobaczyć, jak działa pełny kod, i samodzielnie go wypróbować.

Podsumowanie

Houdini jest w drodze do przeglądarek, a razem z nimi wprowadza zupełnie nowe sposoby pracy z CSS i ich rozszerzania. Dzięki interfejsowi Paint API, a teraz Niestandardowe rekwizyty i elementy do tworzenia kreacji, rozwijamy nasz zestaw narzędzi do tworzenia kreacji, co pozwala nam definiować właściwości CSS i wykorzystywać je do tworzenia i animowania nowych, ekscytujących projektów. Planujemy też dodać kolejne nowości w kolejce problemów z Houdini, w której możesz przekazywać opinie i sprawdzać, co jeszcze może zrobić Houdini. Houdini tworzy funkcje, które wyjaśniają „magię” stylu i układu w internecie. Warto więc się do tego dostosować.

Fot. Maik Jonietz w Unsplash