⭐ 0
🔍
Besedilo Slika PDF in dokumenti Avdio Glasba elektronika Čas Pripomočki Validatorji Ezoterika igre

Generator CSS drsnikov

Oblikujte širino drsnika, progo, barvo drsnika in barvo ob prehodu miške, nato pa si oglejte dejanski rezultat za WebKit poleg dejanskega rezultata za Firefox – dva zares različna brskalniška sistema, drug ob drugem.

🔒 V celoti obdelano v vašem brskalniku – nič, kar tukaj vnesete, ni nikoli naloženo.

10px
8px

Slogi so določeni s psevdoelementi ::-webkit-scrollbar – to polje se upodablja z resničnim mehanizmom vašega brskalnika, če je ta Chrome, Safari ali Edge.

Slogi so določeni z lastnostma Firefoxa scrollbar-width in scrollbar-color. Drugi brskalniki te lastnosti prezrejo in tukaj prikažejo svoj privzeti drsni trak – odprite to stran v Firefoxu, da vidite pravi rezultat.

Firefox nima ločene barve za lebdenje, zaokrožitve robov drsnika ali neodvisnega sloga steze – samo scrollbar-width, ki je tukaj preslikan iz izbrane debeline v dejansko ključno besedo: thin

Obdelava ... 0%

Rezultat

Chrome, Safari in Edge oblikujejo drsnike z družino psevdo-elementov ::-webkit-scrollbar: ločena pravila za progo, drsnik in stanje drsnika ob prehodu miške, poleg tega pa še točno širino v slikovnih pikah in zaobljenost robov drsnika. Firefox vse to povsem prezre in namesto tega uporablja dve standardni lastnosti, scrollbar-width in scrollbar-color, ki sta bili kasneje vključeni v specifikacijo CSS Scrollbars. To nista dva narečja iste funkcionalnosti – gre za dva različna nabora zmožnosti z različnimi zgornjimi mejami, in večina generatorjev drsnikov ta razkorak tiho prekrije s tem, da prikazuje le rezultat za WebKit. Ta ga ne.

Enkrat nastavite širino, barvo proge, barvo drsnika, barvo ob prehodu miške in zaobljenost vogalov drsnika, orodje pa iz istih vnosov zgradi dva nabora pravil. Blok za WebKit omeji psevdo-elemente ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb in njegovo stanje :hover na levo predstavitveno škatlo, tako da je to, kar vidite tam, točno tisto, kar upodabljajo Chrome, Safari in Edge – dejanski pogon brskalnika, ne simuliran prekrivni element. Blok za Firefox nastavi lastnosti scrollbar-width in scrollbar-color na desni predstavitveni škatli z uporabo lastnega pogona tega brskalnika, zato je škatla videti drugačna le, če je ta stran dejansko odprta v Firefoxu; v brskalniku WebKit tam prikazuje svoj privzeti drsnik, kar orodje tudi pove, namesto da bi videz Firefoxa ponarejalo s sposojenimi slikovnimi pikami.

Preslikavanje širine je najjasnejši primer razkoraka: lastnost scrollbar-width v Firefoxu sprejme le ključne besede auto, thin ali none – nikoli točne vrednosti v slikovnih pikah. Ta generator iskreno preslika vašo izbrano širino (8 slikovnih pik ali manj postane thin, vse širše postane auto) in prikaže nastalo ključno besedo ob vašem vnosu, namesto da bi si izmišljeval lažni slikovno pikčasto popoln rezultat za Firefox, ki ne obstaja. Firefox prav tako nima možnosti za nastavitev ločene barve ob prehodu miške, neodvisne zaobljenosti robov drsnika ali barve proge, ki ni zgolj druga vrednost lastnosti scrollbar-color – to so trajne, dejanske omejitve platforme, ne pa opustitve tega orodja.

Kopirajte združeni blok CSS in oba nabora pravil gresta skupaj, vsak pod svojo pripombo, pripravljena za takojšnje lepljenje v slogovno predlogo. Vse se upodablja in posodablja v vašem brskalniku sproti, medtem ko premikate kontrolnike – brez nalaganja, brez računa, brez povratnega klica na strežnik, in deluje tudi brez povezave, ko se stran enkrat naloži.

Uživate v tem orodju? Se vam zdi izdelek uporaben? Vidite v njem potencial in ga želite podpreti?

🛡️
Izvaja se v brskalniku

Vaše datoteke in vnosi nikoli ne zapustijo te naprave. Obdelava poteka povsem brez povezave. 100-odstotno varno.

Sprejeti formati in pravila

  • Skupni kontrolniki – širina, barva proge, barva drsnika, barva ob prehodu miške, zaobljenost vogalov drsnika – poganjajo oba pogona iz istih vnosov.
  • Iskreno preslikavanje širine drsnika: Firefox podpira le vrednosti thin, auto ali none, zato se natančna vrednost v slikovnih pikah, ki jo izberete, preslika v najbližjo dejansko ključno besedo in se prikaže ob vašem vnosu.
  • Združen, kopirljiv izpis CSS z obema naboroma pravil – psevdo-elementi za WebKit in standardne lastnosti za Firefox, jasno opremljeno s pripombami.

Ključne prednosti

✓ Dve predstavitveni škatli v živo upodabljata dejanski drsnik vsakega pogona – škatla za WebKit vedno prikaže pravi rezultat v Chromu, Safariju in Edgeu, brez simuliranja.
✓ Razkorak zmožnosti Firefoxa ni skrit: barva ob prehodu miške, zaobljenost drsnika in neodvisno oblikovanje proge v Firefoxu preprosto ne obstajajo, kar orodje odkrito pove, namesto da bi se pretvarjalo drugače.
✓ En kopirljiv blok CSS združuje oba nabora pravil skupaj s pripombo o nadomestnem slogu, pripravljen za takojšnje lepljenje.

Primeri uporabe

  • • Oblikujte drsnik stranske vrstice nadzorne plošče v skladu z barvno paleto znamke in hkrati v živo preverite, kako daleč to oblikovanje seže v Firefoxu, še preden ga objavite.
  • • Pridobite iskreno ključno besedo Firefoxa za širino drsnika za izbrano debelino, namesto da ugibate, ali je thin ali auto ustreznejša.
  • • Kopirajte en blok CSS, ki vsebuje tako psevdo-elementna pravila za WebKit kot standardne lastnosti za Firefox, vsaka z jasnim komentarjem, neposredno v slogovno datoteko.