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

CSS Scrollbar Generator

Upravte štýl šírky, stopy, palca a farby posúvača a potom uvidíte skutočný výsledok WebKit vedľa skutočného výsledku Firefoxu – dva skutočne odlišné systémy prehliadačov vedľa seba.

10px
8px

Štylizované s pseudoprvkami ::-webkit-scrollbar – toto pole sa vykresľuje prostredníctvom vlastného skutočného motora vášho prehliadača, ak je to Chrome, Safari alebo Edge.

Štylizované s vlastnosťami šírky posúvača a farby posúvača Firefoxu. Iné prehliadače ich ignorujú a zobrazujú tu svoj vlastný predvolený posúvač – otvorte túto stránku vo Firefoxe a uvidíte skutočný výsledok.

Firefox nemá žiadnu samostatnú farbu kurzora, polomer okraja palca ani nezávislý štýl stopy – iba šírku posúvača, namapovanú tu z vami zvolenej hrúbky na skutočné kľúčové slovo: thin

Spracovanie... 0%

Výsledok

Posuvné lišty v štýle Chrome, Safari a Edge s rodinou pseudoprvkov ::-webkit-scrollbar: samostatné pravidlá pre stopu, palec a stav vznášania palca plus presná šírka v pixeloch a polomer okraja palca. Firefox to všetko úplne ignoruje a namiesto toho číta dve štandardné vlastnosti, scrollbar-width a scrollbar-color, ktoré neskôr vstúpili do špecifikácie CSS Scrollbars. Toto nie sú dva dialekty tej istej funkcie – sú to dve rôzne sady funkcií s rôznymi stropmi a väčšina generátorov posúvačov potichu prekryje medzeru tým, že zobrazí iba výsledok WebKit. Tento nie.

Raz nastavte šírku, farbu stopy, farbu palca, farbu kurzora a polomer rohu palca a nástroj vytvorí dve sady pravidiel z rovnakých vstupov. Rozsah bloku WebKit je ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb a jeho stav :hover na ľavom demo boxe, takže to, čo tam vidíte, je presne to, čo vykresľujú Chrome, Safari a Edge – vlastný skutočný engine prehliadača, nie simulované prekrytie. Blok Firefox nastavuje šírku posúvača a farbu posúvača v pravom demo boxe pomocou toho istého prehliadača, čo je dôvod, prečo pole vyzerá inak, len keď je táto stránka skutočne otvorená vo Firefoxe; v prehliadači WebKit tam zobrazuje svoj vlastný predvolený posuvník a nástroj to hovorí, namiesto toho, aby predstieral vzhľad Firefoxu s vypožičanými pixelmi.

Mapovanie šírky je najjasnejším príkladom medzery: šírka posúvača Firefoxu akceptuje iba kľúčové slová auto, tenký alebo žiadny – nikdy nie presný počet pixelov. Tento generátor poctivo mapuje vami zvolenú šírku (8 a menej pixelov sa stáva tenkým, čokoľvek širšie sa stáva automatickým) a zobrazuje výsledné kľúčové slovo vedľa vášho vstupu, namiesto toho, aby vymýšľal falošný výsledok Firefoxu s dokonalými pixelmi, ktorý neexistuje. Firefox tiež nemá žiadny spôsob, ako nastaviť samostatnú farbu kurzora, nezávislý polomer okraja palca alebo farbu stopy, ktorá nie je jednoducho druhou hodnotou farby posúvača – toto sú trvalé, skutočné obmedzenia platformy, nie vynechania v tomto nástroji.

Skopírujte kombinovaný blok CSS a obe sady pravidiel putujú spolu, každá pod vlastným komentárom, pripravené na prilepenie do šablóny so štýlmi tak, ako sú. Všetko sa vykresľuje a aktualizuje vo vašom vlastnom prehliadači, keď presúvate ovládacie prvky – žiadne nahrávanie, žiadny účet, žiadna spätná cesta na server a po načítaní stránky funguje offline.

🛡️
Spustené v prehliadači

Vaše súbory a vstupy nikdy neopustia toto zariadenie. Spracovanie prebieha úplne offline. 100% bezpečné.

Prijaté formáty a pravidlá

  • Zdieľané ovládacie prvky – šírka, farba stopy, farba palca, farba kurzora, polomer rohu palca – poháňajú oba motory z rovnakých vstupov.
  • Poctivé mapovanie šírky posúvača: Firefox podporuje iba tenké, automatické alebo žiadne, takže presná hodnota pixelov, ktorú vyberiete, sa priradí k najbližšiemu skutočnému kľúčovému slovu a zobrazí sa vedľa vášho vstupu.
  • Kombinovaný, kopírovateľný výstup CSS s pravidlami pseudoprvkov WebKit a štandardnými vlastnosťami Firefoxu, jasne komentovaný.

Hlavné výhody

✓ Dve živé ukážkové boxy vykresľujú každý vlastný skutočný posuvník – pole WebKit vždy zobrazuje skutočný výsledok v prehliadačoch Chrome, Safari a Edge, žiadne falošné vykresľovanie.
✓ Medzera v schopnostiach Firefoxu je zobrazená, nie skrytá: farba kurzora, polomer palca a nezávislý štýl stopy vo Firefoxe jednoducho neexistujú a nástroj to hovorí jasne namiesto toho, aby predstieral opak.
✓ Jeden kopírovateľný blok CSS odošle obe sady pravidiel spolu so záložným komentárom, pripraveným na prilepenie tak, ako je.

Prípady použitia

  • • Upravte štýl posuvnej lišty na bočnom paneli tak, aby zodpovedal palete značky, pričom presne uvidíte, ako ďaleko tento štýl siaha vo Firefoxe pred jeho odoslaním.
  • • Uchopte čestné kľúčové slovo Firefox s šírkou posúvača pre zvolenú hrúbku namiesto toho, aby ste hádali, či je pre vás tenká alebo automatická.
  • • Skopírujte jeden blok CSS, ktorý obsahuje pravidlá pseudoprvkov WebKit aj štandardné vlastnosti Firefoxu, pričom každý z nich je jasne komentovaný, priamo do šablóny so štýlmi.