Generator paska przewijania CSS

Paski przewijania w stylu Chrome, Safari i Edge z rodziną pseudoelementów ::-webkit-scrollbar: oddzielne reguły dla ścieżki, kciuka i stanu najechania kciukiem, a także szerokość dokładna w pikselach i promień obramowania kciuka. Firefox całkowicie to ignoruje i zamiast tego czyta dwie standardowe właściwości, scrollbar-width i scrollbar-color, które później weszły do ​​specyfikacji CSS Scrollbars. Nie są to dwa dialekty tej samej funkcji — są to dwa różne zestawy funkcji z różnymi pułapami, a większość generatorów pasków przewijania po cichu zakrywa lukę, pokazując jedynie wynik WebKit. Ten nie.

Ustaw raz szerokość, kolor ścieżki, kolor kciuka, kolor wskaźnika myszy i promień narożnika kciuka, a narzędzie utworzy dwa zestawy reguł na podstawie tych samych danych wejściowych. Blok WebKit obejmuje zakresy ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb i jego stan :hover w lewym oknie demonstracyjnym, więc to, co widzisz, jest dokładnie tym, co renderują przeglądarki Chrome, Safari i Edge — prawdziwy silnik przeglądarki, a nie symulowana nakładka. Blok Firefoksa ustawia szerokość paska przewijania i kolor paska przewijania w prawym oknie demonstracyjnym, korzystając z własnego silnika tej samej przeglądarki, dlatego też okno wygląda inaczej tylko wtedy, gdy ta strona jest faktycznie otwarta w przeglądarce Firefox; w przeglądarce WebKit pokazuje tam swój własny domyślny pasek przewijania, a narzędzie to mówi, zamiast udawać wygląd Firefoksa za pomocą pożyczonych pikseli.

Mapowanie szerokości jest najwyraźniejszym przykładem luki: szerokość paska przewijania przeglądarki Firefox akceptuje tylko słowa kluczowe auto, cienki lub brak — nigdy nie jest to dokładna liczba pikseli. Ten generator rzetelnie odwzorowuje wybraną szerokość (8 pikseli i mniej staje się cienkie, wszystko szersze staje się automatyczne) i wyświetla wynikowe słowo kluczowe obok wprowadzonych danych, zamiast wymyślać fałszywy, doskonały pod względem pikseli wynik Firefoksa, który nie istnieje. Firefox nie ma również możliwości ustawienia osobnego koloru najechania kursorem, niezależnego promienia obramowania kciuka lub koloru ścieżki, który nie jest po prostu drugą wartością koloru paska przewijania — są to stałe, rzeczywiste ograniczenia platformy, a nie pominięcia w tym narzędziu.

Skopiuj połączony blok CSS, a oba zestawy reguł zostaną połączone, każdy z własnym komentarzem, gotowy do wklejenia do arkusza stylów w niezmienionej postaci. Wszystko renderuje się i aktualizuje w Twojej przeglądarce w miarę przeciągania elementów sterujących — bez przesyłania, bez konta, bez przełączania serwera w obie strony i działa w trybie offline po załadowaniu strony.