Wystarczy kilka kliknięć, aby zwiększyć wydajność usługi porównywania cen dzięki modułom pracy Houdini.
CSS Houdini to ogólny termin opisujący szereg niskopoziomowych interfejsów API w przeglądarkach, które dają programistom większą kontrolę i większą kontrolę nad tworzonymi przez siebie stylami.
Houdini umożliwia korzystanie z bardziej semantycznego kodu CSS za pomocą typowego modelu obiektu. 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 trafiają do wątku głównego i można je w razie potrzeby wywoływać. Worklety umożliwiają pisanie modułowego kodu CSS do wykonywania określonych zadań. Wymagają tylko jednej linii kodu JavaScript do importowania i rejestrowania. 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 Rejestruj moduł Worklet (CSS.paintWorklet.addModule(workletURL)) Użyj Workleta (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 użytkownika.
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. Następnie zamiast obramowania
.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 rekomendacją 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ądarce 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ć bibliotekę zasobów i 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 przykłady workletów do tworzenia na żywo. Każda próbka na Houdini.how korzysta z interfejsu CSS Paint API, co oznacza, że działa we wszystkich nowoczesnych przeglądarkach. Sprawdź się!
Korzystanie z Houdini
Worklety Houdini muszą być uruchamiane na serwerze lokalnym 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 w swoich projektach internetowych workletów z prezentacją Houdini.how. Można ich używać przez CDN w ramach prototypowania lub samodzielnie zarządzać listami 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, bez konieczności instalowania 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 spowoduje to zarejestrowania właściwości niestandardowych wartości składni ani wartości zastępczych. Zamiast tego każdy z nich ma wartości zastępcze osadzone w workletze.
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 CSS Paint za pomocą unpkg:
<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 ramach polyfilla paint w nowoczesnych pakietach:
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ż zapoznałeś/zapoznałaś 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.