⭐ 0
🔍
Tekst Slika PDF i dokumenti Audio Glazba Elektronika Vrijeme Komunalije Validatori Ezoterija Igre

CSS Generator traka za pomicanje

Stilizirajte širinu trake za pomicanje, trag, kvačicu i boju pri prijelazu mišem te pogledajte stvarni WebKit rezultat pored stvarnog Firefox rezultata — dva istinski različita sustava preglednika, jedan pored drugog.

🔒 U potpunosti se obrađuje u vašem pregledniku — ništa što ovdje unesete nikada se ne učitava.

10px
8px

Oblikovano pomoću ::-webkit-scrollbar pseudo-elemenata — ovaj okvir se prikazuje kroz stvarni mehanizam vašeg preglednika ako je to Chrome, Safari ili Edge.

Oblikovano pomoću Firefoxovih svojstava scrollbar-width i scrollbar-color. Ostali preglednici ih zanemaruju i ovdje prikazuju svoju zadanu traku za pomicanje — otvorite ovu stranicu u Firefoxu da vidite stvarni rezultat.

Firefox nema zasebnu boju za lebdjenje, radijus obruba klizača niti neovisno oblikovanje trake — samo scrollbar-width, ovdje preslikan iz vaše odabrane debljine u stvarnu ključnu riječ: thin

Obrada... 0%

Rezultat

Chrome, Safari i Edge stiliziraju trake za pomicanje pomoću obitelji pseudo-elemenata ::-webkit-scrollbar: odvojenih pravila za trag, kvačicu i stanje prijelaza mišem iznad kvačice, plus točnu širinu u pikselima i border-radius kvačice. Firefox sve to potpuno zanemaruje i umjesto toga čita dva standardna svojstva, scrollbar-width i scrollbar-color, koja su kasnije ušla u CSS specifikaciju za trake za pomicanje. To nisu dva dijalekta iste značajke — to su dva različita skupa značajki s različitim gornjim granicama, a većina generatora traka za pomicanje tiho prekriva tu razliku prikazujući samo WebKit rezultat. Ovaj to ne čini.

Jednom postavite širinu, boju traga, boju kvačice, boju pri prijelazu mišem i radijus kuta kvačice, a alat iz istih unosa gradi dva skupa pravila. WebKit blok obuhvaća ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb i njegovo :hover stanje na lijevom pokaznom okviru, tako da je ono što tamo vidite upravo ono što Chrome, Safari i Edge prikazuju — stvarni pogonski mehanizam preglednika, a ne simulirani sloj. Firefox blok postavlja scrollbar-width i scrollbar-color na desnom pokaznom okviru koristeći vlastiti pogonski mehanizam tog preglednika, zbog čega okvir izgleda drugačije samo kada je ova stranica stvarno otvorena u Firefoxu; u WebKit pregledniku ondje prikazuje svoju zadanu traku za pomicanje, a alat to navodi umjesto da lažira Firefox izgled s posuđenim pikselima.

Preslikavanje širine najjasniji je primjer razlike: Firefox scrollbar-width prihvaća samo ključne riječi auto, thin ili none — nikad točnu brojku u pikselima. Ovaj generator iskreno preslikava vašu odabranu širinu (8px i manje postaje thin, sve šire postaje auto) i prikazuje rezultirajuću ključnu riječ uz vaš unos, umjesto da izmišlja lažni piksel-savršeni Firefox rezultat koji ne postoji. Firefox također nema način za postavljanje zasebne boje pri prijelazu mišem, neovisnog border-radiusa kvačice ili boje traga koja nije jednostavno druga vrijednost scrollbar-colora — to su trajna, stvarna ograničenja platforme, a ne propusti u ovom alatu.

Kopirajte kombinirani CSS blok i oba skupa pravila putuju zajedno, svaki pod vlastitim komentarom, spreman za izravno lijepljenje u stylesheet. Sve se prikazuje i ažurira u vašem pregledniku dok povlačite kontrole — bez prijenosa podataka, bez računa, bez komunikacije s poslužiteljem i nastavlja raditi izvan mreže nakon što se stranica učita.

Uživate u ovom alatu? Mislite da je ovaj proizvod koristan? Vidite potencijal u njemu i želite ga podržati?

🛡️
Izvršava se u pregledniku

Vaše datoteke i unosi nikad ne napuštaju ovaj uređaj. Obrada se odvija potpuno izvan mreže. 100% sigurno.

Prihvaćeni formati i pravila

  • Zajedničke kontrole — širina, boja traga, boja kvačice, boja pri prijelazu mišem, radijus kuta kvačice — upravljaju obama pogonskim mehanizmima iz istih unosa.
  • Iskreno preslikavanje širine trake za pomicanje: Firefox podržava samo thin, auto ili none, pa se točna vrijednost piksela koju odaberete preslikava na najbližu stvarnu ključnu riječ i prikazuje uz vaš unos.
  • Kombinirani CSS izlaz spreman za kopiranje s WebKit pseudo-element pravilima i Firefox standardnim svojstvima, jasno komentiran.

Ključne prednosti

✓ Dva okvira s prikazom uživo prikazuju stvarnu traku za pomicanje svakog pogonskog mehanizma — WebKit okvir uvijek pokazuje pravi rezultat u Chromeu, Safariju i Edgeu, bez lažnog prikaza.
✓ Razlika u mogućnostima Firefoxa nije skrivena, već prikazana: boja pri prijelazu mišem, radijus kvačice i neovisno stiliziranje traga u Firefoxu jednostavno ne postoje, a alat to jasno navodi umjesto da se pretvara suprotno.
✓ Jedan CSS blok spreman za kopiranje isporučuje oba skupa pravila zajedno s komentarom o rezervnom rješenju, spreman za izravno lijepljenje.

Slučajevi upotrebe

  • • Prilagodite klizač bočne trake nadzorne ploče paleti boja brenda i istovremeno provjerite dokle taj stil doseže u Firefoxu prije nego što ga pošaljete u produkciju.
  • • Uzmite stvarnu CSS ključnu riječ za širinu klizača u Firefoxu za odabranu debljinu umjesto da pogađate odgovara li bolje thin ili auto.
  • • Kopirajte jedan CSS blok koji sadrži i pseudo-elemente za WebKit i standardna svojstva za Firefox, svaki uredno komentiran, izravno u svoj stylesheet.