Wystarczy kilka kliknięć, aby zwiększyć wydajność usługi porównywania cen dzięki modułom pracy Houdini.
CSS Houdini to termin ogólny, który określa serię interfejsów API niskiego poziomu przeglądarki, które zapewniają deweloperom znacznie większą kontrolę nad stylami.
Houdini umożliwia bardziej semantyczne CSS dzięki modelowi obiektów typu Typed Object. Deweloperzy mogą definiować zaawansowane właściwości niestandardowe CSS za pomocą składni, wartości domyślnych i dziedziczenia za pomocą interfejsu Properties and Values API.
Wprowadza też worklety do obsługi rysowania, układu i animacji, które otwierają przed autorami wiele możliwości, ułatwiając im tworzenie stylów i układu w ramach silnika renderowania przeglądarki.
Elementy Houdini
Worklety Houdini to instrukcje przeglądarki, które działają w wątku głównym i mogą być wywoływane w razie potrzeby. Worklety umożliwiają pisanie modułowego kodu CSS do wykonywania określonych zadań. Do importowania i rejestracji wystarczy jeden wiersz kodu JavaScript. Podobnie jak w przypadku usług workerów w przypadku stylu CSS, worklety Houdini są rejestrowane w aplikacji i po zarejestrowaniu mogą być używane w CSS według nazwy.
Zapisz plik worklet Zarejestruj moduł worklet (CSS.paintWorklet.addModule(workletURL)) Użyj worklet (background: paint(confetti))
Wdrażanie własnych funkcji za pomocą interfejsu CSS Painting API
Przykładem takiego modułu roboczego (moduł roboczy Paint) jest interfejs API do malowania w CSS, który umożliwia deweloperom definiowanie niestandardowych funkcji malowania na podobieństwo obrazu, które można stosować bezpośrednio w CSS jako tła, obramowania, maski itp. Istnieje wiele możliwości wykorzystania CSS Paint w interfejsach.
Zamiast czekać, aż przeglądarka wdroży funkcję zaokrąglonych krawędzi, możesz napisać własny moduł Paint lub użyć opublikowanego wcześniej modułu. Zamiast używać atrybutu border-radius zastosuj tę funkcję do krawędzi i przycinania.
.angled {
--corner-radius: 15 0 0 0;
--paint-color: #6200ee;
--stroke-weight: 0;
/* Mask every angled button with fill mode */
-webkit-mask: paint(angled-corners, filled);
}
.outline {
--stroke-weight: 1;
/* Paint outline */
border-image: paint(angled-corners, outlined) 0 fill !important;
}
Interfejs CSS Painting API jest obecnie jednym z najlepiej obsługiwanych interfejsów Houdini, a jego specyfikacja jest zaleceniem kandydata W3C. Jest on obecnie włączony we wszystkich przeglądarkach opartych na Chromium, częściowo obsługiwany w Safari i rozważany w przypadku Firefoxa.
Nawet bez pełnej obsługi w przeglądarkach możesz tworzyć kreacje za pomocą interfejsu Houdini Paint API i sprawdzać, czy Twoje style działają we wszystkich nowoczesnych przeglądarkach za pomocą CSS Paint Polyfill. Aby zaprezentować kilka unikalnych implementacji oraz udostępnić zasoby i bibliotekę workletów, mój zespół stworzył stronę houdini.how.
Houdini.how
Houdini.how to biblioteka i strona odsyłająca do zasobów i workletów Houdini. Znajdziesz w nim wszystko, co musisz wiedzieć o CSS Houdini: informacje o obsługiwanych przeglądarkach, omówienie różnych interfejsów API, informacje o użytkowaniu, dodatkowe zasoby oraz próbki dotyczące funkcji live-paint. Każdy przykład na stronie Houdini.how jest obsługiwany przez interfejs CSS Paint API, co oznacza, że działa we wszystkich nowoczesnych przeglądarkach. Sprawdź to!
Korzystanie z Houdini
Worklety Houdini muszą być uruchamiane na serwerze lokalnie lub w produkcji przez HTTPS. Aby pracować z workletem Houdini, musisz go zainstalować lokalnie lub użyć sieci dystrybucji treści (CDN), takiej jak unpkg, aby przesyłać pliki. Następnie musisz zarejestrować widżet lokalnie.
Istnieje kilka sposobów na umieszczenie workletów z galerii Houdini.how w swoich projektach internetowych. Można ich używać za pomocą CDN do tworzenia prototypów lub samodzielnie zarządzać nimi za pomocą modułów npm. W obu przypadkach warto też dołączyć bibliotekę CSS Paint Polyfill, aby zapewnić zgodność z wieloma przeglądarkami.
1. Prototypowanie z wykorzystaniem CDN
Podczas rejestrowania za pomocą unpkg możesz połączyć się bezpośrednio z plikiem worklet.js, nie instalując go lokalnie. Unpkg zwróci jako główny skrypt plik worklet.js lub możesz go określić samodzielnie. Unpkg nie powoduje problemów z CORS, ponieważ jest udostępniany przez HTTPS.
CSS.paintWorklet.addModule("https://unpkg.com/<package-name>");
Pamiętaj, że nie rejestruje to właściwości niestandardowych pod kątem składni i wartości zastępczych. Zamiast tego mają one wartości zastępcze zakodowane w ramach workletu.
Aby opcjonalnie zarejestrować właściwości niestandardowe, dołącz też plik properties.js.
<script src="https://unpkg.com/<package-name>/properties.js"></script>
Aby uwzględnić wypełnienie za pomocą usługi porównywania cen w CSS Paint:
<script src="https://unpkg.com/css-paint-polyfill"></script>
2. Zarządzanie elementami roboczymi za pomocą NPM
Zainstaluj worklet z npm:
npm install <package-name>
npm install css-paint-polyfill
Zaimportowanie tego pakietu nie powoduje automatycznego wstrzyknięcia workletu paint. Aby zainstalować worklet, musisz wygenerować adres URL, który przekierowuje do pliku worklet.js pakietu, i go zarejestrować. Możesz to zrobić:
CSS.paintWorklet.addModule(..file-path/worklet.js)
Na karcie każdego zadania znajdziesz nazwę i link do pakietu npm.
Musisz też uwzględnić usługę CSS Paint Polyfill za pomocą skryptu lub zaimportować ją bezpośrednio, tak jak w przypadku frameworka lub narzędzia do tworzenia pakietów.
Oto przykład użycia Houdini w połączeniu z polyfillem paint w ramach nowoczesnych pakietów:
import 'css-paint-polyfill';
import '<package-name>/properties.js'; // optionally register properties
import workletURL from 'url:<package-name>/worklet.js';
CSS.paintWorklet.addModule(workletURL);
Publikuj
Teraz, gdy już pobawisz się z kilkoma przykładami Houdini, możesz stworzyć własne. Houdini.how nie hostuje żadnych workletów, ale prezentuje prace społeczności. Jeśli masz jakieś treści lub zasoby, które chcesz przesłać, zapoznaj się z repozytorium GitHub z wytycznymi dotyczącymi publikowania. Chętnie zobaczymy, co wymyślisz.