Przegląd Możliwości
33 min · HTML i CSS · Full-stack i Programowanie
Adam GospodarczykObecnie CSS Houdini a konkretnie różne API które należą do tej grupy, nie są jeszcze w pełni dostępne. W tym warsztacie skupimy się na poznaniu tych, z których już teraz możemy korzystać z uwzględnieniem wsparcia nowoczesnych przeglądarek. Są to: Typed OM API, Custom Properties & Values API oraz Paint API.
Do tej pory interakcja pomiędzy JavaScriptem a CSS była możliwa, natomiast jednocześnie bardzo ograniczona. Dodatkowo np. animacje tworzone w ten sposób często charakteryzowały się niższą wydajnością w porównaniu do zastosowania natywnych opcji takich jak "transition" czy "animation". Z pomocą CSS Houdini zyskujemy dostęp do poszczególnych etapów procesu renderowania w przeglądarce, co daje nam niemal nieograniczone możliwości przy zachowaniu wysokiej wydajności.
Na ten moment trudno jeszcze jednoznacznie to stwierdzić. Jednocześnie patrząc na już dostępne API i ich możliwości, trudno wyobrazić sobie że może stać się inaczej. Z tego powodu dobrym pomysłem jest rozszerzanie swojej wiedzy zarówno z zakresu CSS, JavaScript (w szczególności Canvas) ale również tego w jaki sposób działają przeglądarki oraz jak renderowane są elementy interfejsu. W przypadku wzrostu popularności CSS Houdini taka wiedza będzie na wagę złota.
To zależy od tego jaki projekt realizujesz, natomiast na dzień przygotowania tego materiału, tylko część API jest dostępna i tylko w niektórych przeglądarkach. Więcej na temat dostępności CSS Houdini możesz przeczytać tutaj: https://ishoudinireadyyet.com
Tak, bez wątpienia. A jeżeli czujesz że masz jeszcze braki dotyczące wykorzystania samego CSS lub tego w jaki sposób działają przeglądarki pod kątem wyświetlania elementów, to jest to wiedza którą warto uzupełnić. Wiele wskazuje na to, że sposób w jaki będziemy pracować z CSSem w dużym stopniu przeniesie się do środowiska JavaScriptu.
Warsztat przeznaczony jest dla osób które chcą poznać nowe możliwości CSS. CSS Houdini to zaawansowany temat wymagający dobrej znajomości samego CSS, JavaScriptu oraz elementów dotyczących tego jak działa przeglądarka (szczególnie sposób renderowania elementów).