Wystarczy kilka kliknięć, aby uzupełnić CSS o worklety farb Houdini.
CSS Houdini to ogólny termin opisujący szereg niskopoziomowych interfejsów API przeglądarek, które zapewniają programistom znacznie większą kontrolę nad pisanymi stylami.
Houdini włącza bardziej semantyczne CSS w modelu obiektu typu wpisanym. Deweloperzy mogą definiować zaawansowane niestandardowe właściwości CSS, używając składni, wartości domyślnych i dziedziczenia, za pomocą interfejsu Właściwości i wartości API.
Wprowadzamy też worklety malowania, układu i animacji, które otwierają świat pełen możliwości, ułatwiając autorom przyswojenie stylu i układu mechanizmu renderowania w przeglądarce.
Informacje o workletach Houdini
Worklety Houdini to instrukcje przeglądarki, które uruchamiają się w wątku głównym i można je wywoływać w razie potrzeby. Worklety umożliwiają pisanie modułowych arkuszy CSS do wykonywania konkretnych zadań. Do importu i rejestracji wymagają też pojedynczego wiersza JavaScriptu. Podobnie jak mechanizmy Service Workletów dla stylu CSS, Worklety Houdini są rejestrowane w aplikacji, a po zarejestrowaniu mogą być używane w CSS według nazwy.
Zapis pliku worklet Rejestrowanie modułu worklet (CSS.paintWorklet.addModule(workletURL)) Użyj workletu
(background: paint(confetti))
Wdrażanie własnych funkcji za pomocą interfejsu CSS Painting API
Przykładem takiego workletu (tzw. workletu Paint) jest CSS Painting API. Pozwala on programistom definiować niestandardowe funkcje malowania przypominające obiekty canvas, których można używać bezpośrednio w CSS jako tła, obramowania, maski itp. Jest wiele możliwości zastosowania CSS Paint we własnych interfejsach.
Na przykład zamiast czekać, aż przeglądarka zaimplementuje funkcję obramowań pod kątem, możesz napisać własny skoroszyt Paint lub użyć istniejącego opublikowanego workletu. Następnie zamiast granicznego promienia 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;
}
CSS Painting API jest obecnie jednym z najlepiej obsługiwanych interfejsów API Houdini. Jego specyfikacja jest rekomendacją dla kandydatów W3C. Obecnie jest on włączony we wszystkich przeglądarkach opartych na Chromium, częściowo obsługiwany w Safari, a obecnie jest rozważany w przeglądarce Firefox.
Jednak nawet bez pełnej obsługi przeglądarek możesz uwolnić swoją kreatywność dzięki Houdini Paint API i zobaczyć swoje style we wszystkich nowoczesnych przeglądarkach dzięki CSS Paint Polyfill. Aby zaprezentować kilka niepowtarzalnych implementacji oraz udostępnić bibliotekę zasobów i workletów, mój zespół stworzył plik houdini.how.
Houdini.how
Houdini.how to biblioteka oraz źródło informacji o workletach i zasobach Houdini. Znajdziesz w nim wszystko, co musisz wiedzieć o CSS Houdini: obsługę przeglądarek, omówienie różnych interfejsów API, informacje o użytkowaniu, dodatkowe zasoby oraz próbki farbowania. Każda próbka w Houdini.how korzysta z interfejsu CSS Paint API, co oznacza, że każdy z nich działa we wszystkich nowoczesnych przeglądarkach. Sprawdź się!
Korzystanie z Houdini
Worklety Houdini muszą być uruchamiane lokalnie przez serwer lub przy użyciu protokołu HTTPS w środowisku produkcyjnym. Jeśli chcesz korzystać z workletu Houdini, musisz go zainstalować lokalnie lub udostępniać pliki przy użyciu sieci dostarczania treści (CDN), takiej jak unpkg. Musisz potem zarejestrować worklet lokalnie.
Istnieje kilka sposobów na uwzględnienie Workletów z usługi Houdini.how w swoich projektach internetowych. Można ich używać przez CDN do tworzenia prototypów lub samodzielnie zarządzać workletami za pomocą modułów npm. W obu przypadkach musisz też dodać kod CSS Paint Polyfill, aby zapewnić zgodność w różnych przeglądarkach.
1. Prototypowanie z siecią CDN
Podczas rejestracji z unpkg możesz połączyć bezpośrednio z plikiem worklet.js bez konieczności jego lokalnego instalowania. Plik Unpkg zostanie ustawiony na skrypt worklet.js jako skrypt główny. Możesz go też określić samodzielnie. Rozpakowanie plików nie powoduje problemów CORS, ponieważ jest udostępniana przez HTTPS.
CSS.paintWorklet.addModule("https://unpkg.com/<package-name>");
Pamiętaj, że nie rejestruje to właściwości niestandardowych dla wartości składni ani wartości zastępczych. Zamiast tego każda z nich ma wartości zastępcze osadzone w 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 dołączyć kod CSS Paint Polyfill z parametrem unpkg:
<script src="https://unpkg.com/css-paint-polyfill"></script>
2. Zarządzanie workletami przez NPM
Zainstaluj Worklet z npm:
npm install <package-name>
npm install css-paint-polyfill
Importowanie tego pakietu nie powoduje automatycznego wstrzyknięcia workletu malowania. Aby zainstalować worklet, musisz wygenerować adres URL odpowiadający plikowi worklet.js pakietu i go zarejestrować. Użyj do tego:
CSS.paintWorklet.addModule(..file-path/worklet.js)
Nazwę i link pakietu npm znajdziesz na każdej karcie workletu.
Musisz też dodać kod CSS Paint Polyfill za pomocą skryptu lub zaimportować go bezpośrednio, tak jak w przypadku platformy lub pakietu SDK.
Oto przykład zastosowania Houdini z farbą polyfill 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
Znasz już kilka sampli z Houdini, więc teraz Twoja kolej na przesłanie własnych. Witryna Houdini.how nie hostuje żadnych swoich prac – zamiast tego prezentuje pracę społeczności. Jeśli masz worklet lub zasób, który chcesz przesłać, sprawdź repozytorium GitHub ze wskazówkami dotyczącymi udostępniania. Chętnie poznamy Twoje pomysły.