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

CSS klizni generator

Stilizirajte širinu trake za pomicanje, boju traga, palca i lebdenja, a zatim pogledajte pravi WebKit rezultat pored pravog rezultata Firefoxa — dva istinski različita sustava preglednika, jedan pored drugog.

10px
8px

Stiliziran s ::-webkit-scrollbar pseudo-elementima — ovaj se okvir prikazuje kroz pravi motor vašeg preglednika ako je u pitanju Chrome, Safari ili Edge.

Stiliziran Firefoxovim svojstvima širine i boje trake za pomicanje. Drugi preglednici ih ignoriraju i ovdje prikazuju vlastitu zadanu traku za pomicanje — otvorite ovu stranicu u Firefoxu da vidite pravi rezultat.

Firefox nema zasebnu boju lebdenja, radijus obruba palca ili neovisni stil staze — samo širinu trake za pomicanje, mapiranu ovdje od vaše odabrane debljine do prave ključne riječi: thin

Obrada... 0%

Rezultat

Trake za pomicanje u stilu Chrome, Safari i Edge s obitelji pseudoelemenata ::-webkit-scrollbar: odvojena pravila za stazu, palac i stanje lebdenja palca, plus točna širina piksela i radijus obruba palca. Firefox sve to u potpunosti ignorira i umjesto toga čita dva standardna svojstva, scrollbar-width i scrollbar-color, koja su kasnije ušla u specifikaciju CSS Scrollbars. Ovo 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 prazninu prikazujući samo rezultat WebKita. Ovaj ne.

Jednom postavite širinu, boju traga, boju palca, boju lebdenja i radijus kuta palca, a alat iz istih unosa gradi dva skupa pravila. WebKit blok obuhvata ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb i njegovo :hover stanje na lijevi demo okvir, tako da ono što tamo vidite je točno ono što Chrome, Safari i Edge prikazuju — stvarni motor preglednika, a ne simulirano preklapanje. Blok Firefoxa postavlja širinu trake za pomicanje i boju trake za pomicanje na desnom demo okviru koristeći isti motor preglednika, zbog čega okvir izgleda drugačije samo kada je ova stranica stvarno otvorena u Firefoxu; u pregledniku WebKit ondje prikazuje vlastitu zadanu traku za pomicanje, a alat to kaže umjesto da lažira izgled Firefoxa s posuđenim pikselima.

Mapiranje širine je najjasniji primjer praznine: Firefoxova scrollbar-width prihvaća samo ključne riječi auto, thin ili none — nikad točnu brojku piksela. Ovaj generator iskreno mapira vašu odabranu širinu (8px i manje postaje tanko, sve šire postaje automatski) i prikazuje rezultirajuću ključnu riječ pored vašeg unosa, umjesto da izmišlja lažni rezultat Firefoxa savršen za piksele koji ne postoji. Firefox također ne može postaviti zasebnu boju lebdenja, neovisni radijus obruba palca ili boju staze koja nije samo druga vrijednost boje trake za pomicanje — 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 svojim komentarom, spremni za lijepljenje u tablicu stilova kakva jest. Sve se renderira i ažurira u vašem vlastitom pregledniku dok povlačite kontrole — nema prijenosa, nema računa, nema povratnog putovanja poslužitelja, i nastavlja raditi izvan mreže nakon što se stranica učita.

🛡️
Izvršeno u pregledniku

Vaše datoteke i unosi nikada ne napuštaju ovaj uređaj. Obrada se odvija potpuno offline. 100% siguran.

Prihvaćeni formati i pravila

  • Zajedničke kontrole — širina, boja staze, boja palca, boja lebdenja, radijus kuta palca — pokreću oba motora iz istih ulaza.
  • Iskreno preslikavanje širine trake za pomicanje: Firefox podržava samo tanko, automatsko ili ništa, tako da se točna vrijednost piksela koju odaberete preslikava na najbližu stvarnu ključnu riječ i prikazuje se pored vašeg unosa.
  • Kombinirani CSS izlaz koji se može kopirati s pravilima WebKit pseudoelementa i standardnim svojstvima Firefoxa, jasno komentiran.

Ključne prednosti

✓ Dva demo okvira uživo renderiraju vlastitu stvarnu traku za pomicanje svakog motora — okvir WebKit uvijek prikazuje pravi rezultat u Chromeu, Safariju i Edgeu, bez lažnog renderiranja.
✓ Nedostatak mogućnosti Firefoxa je prikazan, a ne skriven: boja lebdenja, radijus palca i neovisni stil staze jednostavno ne postoje u Firefoxu, a alat to jasno kaže umjesto da se pretvara suprotno.
✓ Jedan CSS blok koji se može kopirati otprema oba skupa pravila zajedno s rezervnim komentarom, spreman za lijepljenje kakav jest.

Slučajevi upotrebe

  • • Stilizirajte traku za pomicanje bočne trake nadzorne ploče kako bi odgovarala paleti robne marke dok točno vidite dokle taj stil seže u Firefoxu prije nego što ga pošaljete.
  • • Zgrabite iskrenu ključnu riječ Firefox scrollbar-width za odabranu debljinu umjesto da nagađate je li tanak ili auto bliži izbor.
  • • Kopirajte jedan CSS blok koji nosi i pravila WebKit pseudoelementa i standardna svojstva Firefoxa, svaki jasno komentiran, ravno u stilsku tablicu.