Aby ulepszyć swoją usługę porównywania cen za pomocą farb Houdini, wystarczy kilka kliknięć.
CSS Houdini to ogólny termin, który opisuje serię niskopoziomowych interfejsów API w przeglądarkach, które dają programistom większą kontrolę i większą kontrolę w ich stylu.
Houdini umożliwia korzystanie z bardziej semantycznego kodu CSS za pomocą obiektu Typed Object Model. Deweloperzy mogą zdefiniować zaawansowane właściwości niestandardowe CSS ze składnią, wartościami domyślnymi i dziedziczeniem Właściwości i wartości interfejsu API.
Wprowadziliśmy też renderowanie, układ i animację. worklety, które otwierają do świata szerokiego wachlarza możliwości, ułatwiając autorom wchłonięcie się w proces stylu i układu z silnikiem renderowania w przeglądarce.
Jak działają Worklety Houdini
Worklety Houdini to instrukcje przeglądarki, które przebiegają poza wątkiem głównym i mogą być wywoływane, gdy niezbędną. Worklety umożliwiają pisanie modułowego kodu CSS do wykonywania określonych zadań i wymagają pojedynczego JavaScript do zaimportowania i zarejestrowania. Worklety Houdini – podobnie jak mechanizmy Service Worklety stylu CSS są rejestrowane w Twojej aplikacji, a po zarejestrowaniu można używać ich w Twojej usłudze porównywania cen.
Zapisz plik Worklet Rejestrowanie modułu Workletu (CSS.paintWorklet.addModule(workletURL)) Użyj Workletu
(background: paint(confetti))
Wdrażanie własnych funkcji za pomocą interfejsu CSS Painting API
CSS Painting API jest przykładem (Worklet Paint) i umożliwia programistom definiowanie niestandardowych funkcji malowania podobnych do tych na płótnie. których można używać bezpośrednio w CSS jako tła, obramowania, maski i nie tylko. Istnieje cały świat – wykorzystanie CSS Paint we własnych interfejsach użytkownika.
Na przykład zamiast czekać, aż przeglądarka zaimplementuje funkcję zaokrąglonych obramowań, możesz napisać własny Worklet Paint lub użyć istniejącego już opublikowanego Workletu. Następnie, zamiast korzystać z parametru border-radius, zastosuj ten worklet do obramowania i przycięcia.
.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 API Houdini, a jego specyfikacja to W3C z rekomendacji. Obecnie jest włączone we wszystkich przeglądarkach opartych na Chromium, częściowo obsługiwany w przeglądarce Safari i jest uwzględniany w przeglądarce Firefox.
Nawet bez pełnej obsługi przeglądarek możesz puścić wodze fantazji dzięki interfejsowi Houdini Paint API Twoje style działają we wszystkich nowoczesnych przeglądarkach z komponentem CSS Paint Polyfill. Aby zaprezentować kilka unikalnych a także aby zapewnić zasoby i bibliotekę Workletów, mój zespół stworzył houdini.how.
Houdini.how
Houdini.how to biblioteka, w której znajdziesz Worklety i zasoby Houdini. it zawiera wszystko, co trzeba wiedzieć o CSS Houdini: obsługę przeglądarek, omówienie różnych interfejsów API, wykorzystanie informacje, dodatkowe zasoby i pracownik malowania na żywo przykłady. Każda próbka na Houdini.how korzysta z interfejsu CSS Paint API, co oznacza, działają we wszystkich nowoczesnych przeglądarkach. Sprawdź się!
Korzystanie z Houdini
Worklety Houdini muszą być uruchamiane przez serwer lokalnie lub przez HTTPS w środowisku produkcyjnym. Aby musisz zainstalować ją lokalnie lub skorzystać z dostawy treści, sieć (CDN), np. unpkg, aby wyświetlić pliki. Musisz wtedy zarejestrować lokalnie.
Listę obiektów Houdini.how można prezentować we własnych projektach internetowych na kilka sposobów. Mogą mogą być używane przez CDN w ramach prototypowania lub możesz zarządzać nimi samodzielnie za pomocą moduły npm. W obu przypadkach warto też dołączyć kod polyfill CSS Paint, aby mieć pewność, że i przeglądarki.
1. Prototypowanie z CDN
Podczas rejestracji z unpkg możesz utworzyć bezpośredni link do pliku worklet.js bez konieczności wykonywania połączenia lokalnie zainstalować Worklet. Element Unpkg zostanie przeniesiony do worklet.js jako głównego skryptu. Możesz też go określić siebie. Polecenie Unpkg nie powoduje problemów CORS, ponieważ jest wyświetlane 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 umieszczone 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ć kod CSS Paint Polyfill z parametrem unpkg:
<script src="https://unpkg.com/css-paint-polyfill"></script>
2. Zarządzanie listami roboczymi za pomocą NPM
Zainstaluj Worklet z npm:
npm install <package-name>
npm install css-paint-polyfill
Importowanie tego pakietu nie powoduje automatycznego wstrzykiwania obszaru roboczego malowania. Aby zainstalować Worklet, musisz wygenerować adres URL, który prowadzi do pliku worklet.js pakietu, i go zarejestrować. Ty np.:
CSS.paintWorklet.addModule(..file-path/worklet.js)
Nazwę pakietu npm i link znajdziesz na każdej karcie Worklet.
Musisz też dołączyć kod polyfill CSS Paint za pomocą skryptu lub zaimportować go bezpośrednio, tak jak za pomocą platformy lub narzędzia tworzenia pakietów.
Oto przykład użycia Houdini z farbą polyfill w nowoczesnych modułach pakowania:
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
Po zapoznaniu się z próbkami próbek Houdini nadszedł czas, aby przesłać własne. Houdini.how nie hostuje żadnych workletów, a zamiast tego prezentuje pracę społeczności. Jeśli masz Worklet lub zasób, który chcesz przesłać, zapoznaj się z githubem z repozytorium z wytycznymi dotyczącymi publikowania. Chętnie zobaczymy, co nam zaproponujesz.