⭐ 0
🔍
Tekst Obraz PDF i Dokumenty Audio Muzyka Elektronika Czas Użyteczne programy Walidatory Ezoteryka Gry

Generator CSS dla pasków przewijania

Określ szerokość paska przewijania, kolor toru, kolor suwaka i kolor po najechaniu, a potem zobacz rzeczywisty wynik w WebKit obok rzeczywistego wyniku w Firefoksie – dwa naprawdę różne systemy przeglądarek, ramię w ramię.

🔒 Przetwarzane w całości w Twojej przeglądarce — nic, co tu wpiszesz, nie zostanie nigdy przesłane.

10px
8px

Stylizowany za pomocą pseudoelementów ::-webkit-scrollbar — to pole renderuje się przez rzeczywisty silnik Twojej przeglądarki, jeśli jest to Chrome, Safari lub Edge.

Stylizowany za pomocą właściwości scrollbar-width i scrollbar-color Firefoksa. Inne przeglądarki ignorują je i pokazują tutaj swój własny domyślny pasek przewijania — otwórz tę stronę w Firefoksie, aby zobaczyć rzeczywisty wynik.

Firefox nie ma osobnego koloru najechania, promienia zaokrąglenia suwaka ani niezależnego stylizowania ścieżki — tylko scrollbar-width, odwzorowany tutaj z wybranej grubości na rzeczywiste słowo kluczowe: thin

Przetwarzanie... 0%

Wynik

Chrome, Safari i Edge stylują paski przewijania rodziną pseudoelementów ::-webkit-scrollbar: osobne reguły dla toru, suwaka i stanu suwaka po najechaniu, plus dokładna szerokość w pikselach i promień zaokrąglenia suwaka. Firefox całkowicie to wszystko ignoruje i zamiast tego odczytuje dwie standardowe właściwości, scrollbar-width i scrollbar-color, które później weszły do specyfikacji CSS Scrollbars. To nie są dwa dialekty tej samej funkcjonalności – to dwa różne zestawy funkcji o różnych pułapach możliwości, a większość generatorów pasków przewijania po cichu tuszuje tę różnicę, pokazując wyłącznie wynik WebKit. Ten tego nie robi.

Ustaw raz szerokość, kolor toru, kolor suwaka, kolor po najechaniu i promień zaokrąglenia suwaka, a narzędzie z tych samych danych wejściowych zbuduje dwa zestawy reguł. Blok WebKit ogranicza ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb i jego stan :hover do lewego pola demonstracyjnego, więc to, co w nim widzisz, jest dokładnie tym, co renderują Chrome, Safari i Edge – prawdziwy silnik przeglądarki, nie symulowana nakładka. Blok Firefoksa ustawia scrollbar-width i scrollbar-color na prawym polu demonstracyjnym, używając własnego silnika tej samej przeglądarki, dlatego to pole wygląda inaczej tylko wtedy, gdy ta strona jest faktycznie otwarta w Firefoksie; w przeglądarce WebKit pokazuje ono swój domyślny pasek przewijania i narzędzie otwarcie o tym informuje, zamiast udawać wygląd Firefoksa za pomocą zapożyczonych pikseli.

Mapowanie szerokości jest najwyraźniejszym przykładem tej różnicy: scrollbar-width w Firefoksie przyjmuje wyłącznie słowa kluczowe auto, thin lub none – nigdy konkretną wartość w pikselach. Ten generator rzetelnie odwzorowuje wybraną szerokość (8px i mniej staje się thin, każda szersza – auto) i wyświetla otrzymane słowo kluczowe obok Twojego ustawienia, zamiast wymyślać nieistniejący, pikselowo idealny wynik w Firefoksie. Firefox nie ma również możliwości ustawienia osobnego koloru po najechaniu, niezależnego promienia zaokrąglenia suwaka ani koloru toru, który nie jest po prostu drugą wartością scrollbar-color – to trwałe, rzeczywiste ograniczenia platformy, a nie pominięcia w tym narzędziu.

Skopiuj połączony blok CSS – oba zestawy reguł wędrują razem, każdy pod własnym komentarzem, gotowe do wklejenia w arkuszu stylów bez zmian. Wszystko renderuje się i aktualizuje w Twojej przeglądarce w miarę przesuwania kontrolek – bez wysyłania plików, bez konta, bez komunikacji z serwerem; narzędzie działa również offline, gdy strona została już załadowana.

Podoba Ci się to narzędzie? Uważasz ten produkt za przydatny? Widzisz w nim potencjał i chcesz go wesprzeć?

🛡️
Wykonywane w przeglądarce

Twoje pliki i dane nigdy nie opuszczają tego urządzenia. Przetwarzanie odbywa się całkowicie offline. W 100% bezpieczne.

Akceptowane formaty i zasady

  • Wspólne kontrolki – szerokość, kolor toru, kolor suwaka, kolor po najechaniu i zaokrąglenie suwaka – zasilają obydwa silniki z tych samych danych wejściowych.
  • Uczciwe mapowanie szerokości paska przewijania: Firefox obsługuje tylko wartości thin, auto lub none, dlatego wybrana przez Ciebie dokładna wartość w pikselach jest odwzorowywana na najbliższe rzeczywiste słowo kluczowe i wyświetlana obok Twojego ustawienia.
  • Połączony, gotowy do skopiowania kod CSS z regułami WebKit opartymi na pseudoelementach i standardowymi właściwościami Firefoksa, z czytelnymi komentarzami.

Kluczowe korzyści

✓ Dwa interaktywne pola podglądu renderują prawdziwe paski przewijania własnym silnikiem danego przeglądarki – pole WebKit zawsze pokazuje rzeczywisty wynik w Chrome, Safari i Edge, bez sztucznego imitowania wyglądu.
✓ Różnica w możliwościach Firefoksa jest pokazana wprost, a nie ukrywana: osobny kolor po najechaniu, zaokrąglenie suwaka i niezależne stylowanie toru po prostu w Firefoksie nie istnieją, a narzędzie mówi o tym otwarcie, zamiast udawać, że jest inaczej.
✓ Jeden blok CSS do skopiowania zawiera oba zestawy reguł wraz z komentarzem opisującym rozwiązanie awaryjne – gotowy do wklejenia bez żadnych zmian.

Przypadki użycia

  • • Dostosuj pasek przewijania w bocznym panelu do palety barw marki i od razu sprawdź, jak daleko te style działają w Firefoksie, zanim wyślesz je na produkcję.
  • • Pobierz rzeczywistą wartość słowa kluczowego scrollbar-width z Firefoksa dla wybranej grubości, zamiast zgadywać, czy bliżej jej do thin czy auto.
  • • Skopiuj jeden blok CSS zawierający zarówno reguły z pseudoelementami WebKit, jak i standardowe właściwości Firefoksa – każda z czytelnym komentarzem – i wklej go prosto do arkusza stylów.