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

CSS Scrollbar Generator

Upravte styl šířky posuvníku, stopy, palce a barvy kurzoru a poté uvidíte skutečný výsledek WebKit vedle skutečného výsledku Firefoxu – dva skutečně odlišné systémy prohlížečů vedle sebe.

10px
8px

Stylizované pomocí pseudoprvků ::-webkit-scrollbar – toto pole se vykresluje prostřednictvím vlastního skutečného enginu vašeho prohlížeče, pokud je to Chrome, Safari nebo Edge.

Stylizované s vlastnostmi šířky posuvníku a barvy posuvníku Firefoxu. Jiné prohlížeče je ignorují a zobrazují zde svůj vlastní výchozí posuvník – otevřete tuto stránku ve Firefoxu a uvidíte skutečný výsledek.

Firefox nemá žádnou samostatnou barvu kurzoru, poloměr okraje palce nebo nezávislý styl stopy – pouze šířku posuvníku, mapovanou zde od vámi zvolené tloušťky ke skutečnému klíčovému slovu: thin

Zpracování... 0%

Výsledek

Posouvací lišty ve stylu Chrome, Safari a Edge s rodinou pseudoprvků ::-webkit-scrollbar: samostatná pravidla pro stopu, palec a stav držení palce, plus přesná šířka v pixelech a poloměr okraje palce. Firefox to vše zcela ignoruje a místo toho čte dvě standardní vlastnosti, scrollbar-width a scrollbar-color, které později vstoupily do specifikace CSS Scrollbars. Nejedná se o dva dialekty stejné funkce – jedná se o dvě různé sady funkcí s různými stropy a většina generátorů posuvníků tiše přepíše mezeru tím, že zobrazí pouze výsledek WebKit. Tento ne.

Jednou nastavte šířku, barvu stopy, barvu palce, barvu kurzoru a poloměr rohu palce a nástroj vytvoří dvě sady pravidel ze stejných vstupů. Rozsah bloku WebKit je ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb a jeho stav :hover na levém ukázkovém poli, takže to, co tam vidíte, je přesně to, co vykreslují Chrome, Safari a Edge – vlastní skutečný engine prohlížeče, nikoli simulované překrytí. Blok Firefoxu nastavuje šířku posuvníku a barvu posuvníku na pravém ukázkovém poli pomocí stejného enginu prohlížeče, což je důvod, proč pole vypadá jinak, pouze když je tato stránka skutečně otevřena ve Firefoxu; v prohlížeči WebKit tam zobrazuje svůj vlastní výchozí posuvník a nástroj to říká spíše než předstírání vzhledu Firefoxu s vypůjčenými pixely.

Mapování šířky je nejjasnějším příkladem mezery: Šířka posuvníku Firefoxu akceptuje pouze klíčová slova auto, tenký nebo žádný – nikdy ne přesný počet pixelů. Tento generátor poctivě mapuje vámi zvolenou šířku (8 pixelů a méně se ztenčí, cokoli širšího se stane automatickým) a zobrazí výsledné klíčové slovo vedle vašeho vstupu, místo aby vymýšlel falešný výsledek Firefoxu s dokonalými pixely, který neexistuje. Firefox také nemá žádný způsob, jak nastavit samostatnou barvu kurzoru, nezávislý poloměr okraje palce nebo barvu stopy, která není jen druhou hodnotou barvy posuvníku – to jsou trvalá, skutečná omezení platformy, nikoli opomenutí v tomto nástroji.

Zkopírujte kombinovaný blok CSS a obě sady pravidel putují společně, každá pod vlastním komentářem, připravené k vložení do šablony stylů tak, jak jsou. Při přetahování ovládacích prvků se vše vykresluje a aktualizuje ve vašem vlastním prohlížeči – žádné nahrávání, žádný účet, žádná zpáteční cesta na server a po načtení stránky funguje offline.

🛡️
Spuště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řijaté formáty a pravidla

  • Sdílené ovládací prvky – šířka, barva stopy, barva palce, barva kurzoru, poloměr rohu palce – pohání oba motory ze stejných vstupů.
  • Poctivé mapování šířky posuvníku: Firefox podporuje pouze tenké, automatické nebo žádné, takže přesná hodnota pixelu, kterou vyberete, je namapována na nejbližší skutečné klíčové slovo a zobrazena vedle vašeho vstupu.
  • Kombinovaný, kopírovatelný výstup CSS s pravidly pseudoprvků WebKit a standardními vlastnostmi Firefoxu, jasně okomentován.

Hlavní výhody

✓ Dva živé demo boxy vykreslují každý motor vlastní skutečný posuvník – pole WebKit vždy zobrazuje skutečný výsledek v Chrome, Safari a Edge, žádné falešné vykreslování.
✓ Mezera ve schopnostech Firefoxu je zobrazena, nikoli skryta: barva kurzoru, poloměr palce a nezávislý styl stopy ve Firefoxu prostě neexistují a nástroj to říká jasně, místo aby předstíral opak.
✓ Jeden kopírovatelný blok CSS dodává obě sady pravidel společně s nouzovým komentářem, připraveným k vložení tak, jak jsou.

Případy použití

  • • Upravte styl posuvníku postranního panelu řídicího panelu tak, aby odpovídal paletě značky, a přitom přesně zjistěte, jak daleko tento styl dosáhne ve Firefoxu před odesláním.
  • • Pro zvolenou tloušťku vezměte poctivé klíčové slovo Firefox scrollbar-width, místo abyste hádali, zda je bližší tenká nebo automatická.
  • • Zkopírujte jeden blok CSS, který nese jak pravidla pro pseudoprvky WebKit, tak standardní vlastnosti Firefoxu, každý s jasným komentářem, přímo do šablony stylů.