Innowacyjne rozwiazania dla stron www - Houdini API
Houdini to nazwa określająca zbiór API przeglądarek, ma na celu wprowadzenie znaczących usprawnień do procesu rozwoju sieci i ogólnie do rozwoju standardów CSS. Programiści Frontendowi będą mogli rozszerzyć CSS o nowe funkcje przy użyciu JavaScript, podłączyć się do silnika renderującego CSS i powiedzieć przeglądarce, jak stosować CSS podczas procesu renderowania. Obsługa Houdini przez przeglądarki jest coraz lepsza, a niektóre API są dostępne do użytku już dziś, więc jest to dobry moment na zapoznanie się z nimi i eksperymentowanie. Przyjrzymy się każdej części Houdini, jego obecnemu wsparciu dla przeglądarek i zobaczymy, jak mogą być one dzisiaj wykorzystywane.
Potrzeba dużo czasu, aby nowa funkcja lub rozszerzenie CSS przeszła od wstępnej wersji roboczej do w pełni wspieranej i stabilnej funkcji CSS, której mogą używać deweloperzy. Oparte na skryptach JavaScript Polyfill-e (Polyfill to rodzaj rozszerzenia interfejsu API przeglądarki) mogą być używane jako substytut braku wsparcia dla przeglądarek w celu wykorzystania nowych funkcji CSS zanim zostaną oficjalnie wdrożone. Jednak w większości przypadków są one wadliwe. Na przykład, scrollsnap-polyfill jest jednym z kilku Polifillów, które mogą być użyte do naprawienia niespójności w obsłudze przeglądarki dla specyfikacji CSS Scroll Snap. Ale nawet to rozwiązanie ma pewne ograniczenia, błędy i niespójności.
Potencjalną wadą używania polyfillów jest to, że mogą one mieć negatywny wpływ na wydajność i są trudne do prawidłowego wdrożenia. Ta wada jest związana z modelami DOM i CSSOM przeglądarki. Przeglądarka tworzy DOM (Document Object Model) na podstawie znacznika HTML i podobnie tworzy CSSOM (CSS Object Model) na podstawie znaczników CSS. Te dwa drzewa obiektowe są niezależne od siebie. JavaScript działa na DOM-ie i ma bardzo ograniczony dostęp do CSSOM-u.
Rozwiązania JavaScript Polyfill działają dopiero po zakończeniu początkowego cyklu renderowania, tzn. gdy zarówno DOM jak i CSSOM zostały utworzone i dokument został załadowany. Po tym jak Polyfill dokona zmian stylów w DOM-ie (poprzez zakreślenie ich), powoduje to ponowne uruchomienie procesu renderowania i re-render całej strony. Negatywny wpływ wydajności staje się jeszcze bardziej widoczny, jeśli zależy on od metody requestAnimationFrame lub od interakcji użytkownika, takich jak zdarzenia przewijania.
Kolejną przeszkodą w rozwoju stron internetowych są różne ograniczenia narzucone przez standardy CSS. Na przykład, istnieje tylko ograniczona liczba właściwości CSS, które mogą być natywnie animowane. CSS wie jak natywnie animować kolory, ale nie wie jak animować gradienty. Zawsze istniała potrzeba wprowadzania innowacji i tworzenia imponujących rozwiązań internetowych poprzez przesuwanie granic, pomimo ograniczeń technicznych. Dlatego programiści często mają tendencję do stosowania mniej niż idealnych rozwiązań lub JavaScript do implementacji bardziej zaawansowanych stylizacji i efektów, które nie są obecnie obsługiwane przez CSS, takich jak zaawansowane efekty 3D, zaawansowane animacje, animacja typografi, animowane gradienty itp.
Wydaje się, że specyfikacje CSS nie są w stanie nadążyć za różnymi wymaganiami branży, takimi jak większa kontrola nad animacjami, ulepszone obcinanie tekstu, lepsze opcje stylizacji elementów, więcej opcji wyświetlania, więcej opcji filtrowania, itp.
Co może być potencjalnym rozwiązaniem? Dać programistom natywny sposób na rozszerzenie CSS przy użyciu różnych API.