⭐ 0
🔍
Text Obrázek PDF a Dokumenty Audio Hudba Elektronika Čas Užitečné programy Validátory Ezoterika Hry

Generátor CSS scrollbarů

Nastavte šířku, barvu dráhy, palce a barvu při najetí myší a hned vedle sebe uvidíte skutečný výsledek ve WebKitu a skutečný výsledek ve Firefoxu – dva opravdu odlišné systémy prohlížečů bok po boku.

🔒 Zpracováno výhradně ve vašem prohlížeči – nic, co zde zadáte, se nikdy nenahraje.

10px
8px

Stylováno pomocí pseudo-elementů ::-webkit-scrollbar – toto pole se vykresluje skrze skutečný engine vašeho prohlížeče, pokud je to Chrome, Safari nebo Edge.

Stylováno pomocí vlastností scrollbar-width a scrollbar-color pro Firefox. Ostatní prohlížeče je ignorují a zobrazí zde svůj vlastní výchozí posuvník – pro zobrazení skutečného výsledku otevřete tuto stránku ve Firefoxu.

Firefox nemá samostatnou barvu při najetí, border-radius jezdce ani nezávislé stylování dráhy – pouze scrollbar-width, zde mapovaný z vámi zvolené tloušťky na skutečné klíčové slovo: thin

Zpracovává se... 0%

Výsledek

Chrome, Safari a Edge stylují scrollbary pomocí rodiny pseudo-elementů ::-webkit-scrollbar: oddělená pravidla pro dráhu, palec a stav palce při najetí, plus přesná šířka v pixelech a border-radius palce. Firefox toto vše zcela ignoruje a místo toho čte dvě standardní vlastnosti, scrollbar-width a scrollbar-color, které později přibyly do specifikace CSS Scrollbars. Nejde o dva dialekty jedné funkce – jde o dvě odlišné sady funkcí s různými limity a většina generátorů scrollbarů tuto mezeru tiše zakrývá tím, že ukazuje jen výsledek ve WebKitu. Tento nástroj to nedělá.

Nastavte jednou šířku, barvu dráhy, barvu palce, barvu při najetí a zaoblení rohů palce a nástroj z těchto vstupů vytvoří dvě sady pravidel. Blok pro WebKit omezuje ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb a jeho :hover stav na levý náhledový box, takže to, co tam vidíte, je přesně to, co vykreslí Chrome, Safari a Edge – skutečný engine prohlížeče, ne simulované překrytí. Blok pro Firefox nastavuje scrollbar-width a scrollbar-color na pravém náhledovém boxu za použití vlastního enginu tohoto prohlížeče, a proto box vypadá jinak, jen když je tato stránka skutečně otevřená ve Firefoxu; ve WebKitovém prohlížeči tam uvidíte jeho výchozí scrollbar a nástroj to uvádí, místo aby předstíral vzhled Firefoxu pomocí vypůjčených pixelů.

Mapování šířky je nejzřetelnějším příkladem této mezery: scrollbar-width ve Firefoxu přijímá pouze klíčová slova auto, thin nebo none – nikdy přesný pixelový údaj. Tento generátor poctivě mapuje vámi zvolenou šířku (8 px a méně se převede na thin, cokoli širšího na auto) a výsledné klíčové slovo zobrazí vedle vašeho vstupu, místo aby si vymýšlel falešný pixelově přesný výsledek pro Firefox, který neexistuje. Firefox také neumožňuje nastavit samostatnou barvu při najetí, nezávislý border-radius palce ani barvu dráhy, která by nebyla pouze druhou hodnotou scrollbar-color – to jsou trvalá, skutečná omezení platformy, nikoli opomenutí tohoto nástroje.

Zkopírujte celý CSS blok a obě sady pravidel putují společně, každá pod svým vlastním komentářem, připravené k přímému vložení do stylopisu. Při posouvání ovládacích prvků se vše vykresluje a aktualizuje přímo ve vašem prohlížeči – žádné nahrávání, žádný účet, žádné dotazy na server, a po načtení stránky nástroj funguje i offline.

Líbí se vám tento nástroj? Přijde vám tento produkt užitečný? Vidíte v něm potenciál a chcete ho podpořit?

🛡️
Zpracováno v prohlížeči

Vaše soubory a vstupy nikdy neopustí toto zařízení. Zpracování probíhá zcela offline. 100% bezpečné.

Přijímané formáty a pravidla

  • Sdílené ovládací prvky – šířka, barva dráhy, barva palce, barva při najetí, zaoblení rohů palce – ovlivňují oba enginy ze stejných vstupních hodnot.
  • Poctivé mapování šířky scrollbaru: Firefox podporuje pouze thin, auto nebo none, takže zvolenou přesnou pixelovou hodnotu převedeme na nejbližší skutečné klíčové slovo a zobrazíme ho vedle vašeho vstupu.
  • Kombinovaný, kopírovatelný CSS výstup s oběma sadami – pseudo-elementy pro WebKit a standardními vlastnostmi pro Firefox, přehledně okomentovaný.

Klíčové výhody

✓ Dva živé náhledy vykreslují skutečný scrollbar každého enginu – ve WebKit boxu vždy vidíte přesný výsledek v Chromu, Safari a Edge, žádná falešná simulace.
✓ Omezení Firefoxu ukazujeme otevřeně: barva při najetí, zaoblení palce a nezávislý styl dráhy ve Firefoxu prostě neexistují a nástroj to na rovinu sděluje, místo aby to předstíral.
✓ Jeden zkopírovatelný CSS blok obsahuje obě sady pravidel spolu s komentářem pro odlišení, připravený k vložení tak, jak je.

Případy užití

  • • Nastylujte posuvník v bočním panelu dashboardu tak, aby odpovídal brandové paletě, a ještě před nasazením si ověřte, kam až tento styl dosáhne ve Firefoxu.
  • • Získejte poctivé klíčové slovo pro šířku posuvníku ve Firefoxu pro zvolenou tloušťku a přestaňte hádat, jestli je blíž tenký, nebo automatický.
  • • Zkopírujte jeden CSS blok, který obsahuje jak pseudoelementová pravidla pro WebKit, tak standardní vlastnosti pro Firefox, obojí přehledně okomentované, a vložte ho přímo do stylopisu.