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

Generator drsnega traku CSS

Oblikujte širino drsnega traku, barvo sledi, palca in lebdenja, nato pa si oglejte pravi rezultat WebKit poleg pravega rezultata Firefoxa – dva resnično različna sistema brskalnika, drug ob drugem.

10px
8px

Oblikovano s psevdoelementi ::-webkit-scrollbar — to polje se upodablja prek pravega mehanizma vašega brskalnika, če je Chrome, Safari ali Edge.

Oblikovan z Firefoxovimi lastnostmi širine in barve drsnega traku. Drugi brskalniki jih ignorirajo in tukaj prikažejo svoj privzeti drsni trak - odprite to stran v Firefoxu, da vidite pravi rezultat.

Firefox nima ločene barve lebdenja, radija obrobe palca ali neodvisnega sloga sledi - samo širina drsnega traku, ki je tukaj preslikana iz vaše izbrane debeline v pravo ključno besedo: thin

Obdelava ... 0%

Rezultat

Drsni trakovi v slogu Chrome, Safari in Edge z družino psevdoelementov ::-webkit-scrollbar: ločena pravila za sled, palec in stanje lebdenja palca ter širina, natančna glede na slikovno piko, in polmer obrobe palca. Firefox vse to v celoti ignorira in namesto tega prebere dve standardni lastnosti, scrollbar-width in scrollbar-color, ki sta kasneje vstopili v specifikacijo CSS Scrollbars. To nista dve narečji iste funkcije - sta dva različna nabora funkcij z različnimi zgornjimi mejami in večina generatorjev drsnih trakov tiho prekrije vrzel tako, da prikaže samo rezultat WebKita. Ta ne.

Enkrat nastavite širino, barvo sledi, barvo palca, barvo lebdenja in polmer vogala palca in orodje iz istih vnosov zgradi dva niza pravil. Blok WebKit obsega ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb in njegovo stanje :hover v levem predstavitvenem polju, tako da je tisto, kar tam vidite, točno to, kar upodabljajo Chrome, Safari in Edge – lasten resnični motor brskalnika, ne simulirano prekrivanje. Blok Firefox nastavi širino drsnega traku in barvo drsnega traku na desnem predstavitvenem polju z uporabo istega motorja brskalnika, zaradi česar je polje videti drugače le, ko je ta stran dejansko odprta v Firefoxu; v brskalniku WebKit tam prikaže svoj privzeti drsni trak in orodje to pove, namesto da bi ponaredilo videz Firefoxa s sposojenimi slikovnimi pikami.

Preslikava širine je najbolj jasen primer vrzeli: Firefoxova širina drsnega traku sprejme samo ključne besede samodejno, tanko ali nič – nikoli natančnega števila slikovnih pik. Ta generator pošteno preslika vašo izbrano širino (8 slikovnih pik in manj postane tanko, vse, kar je širše, postane samodejno) in prikaže nastalo ključno besedo poleg vašega vnosa, namesto da bi si izmislil lažni slikovni pik popoln rezultat Firefoxa, ki ne obstaja. Firefox prav tako ne more nastaviti ločene barve lebdenja, neodvisnega polmera obrobe palca ali barve sledi, ki ni le druga vrednost barve drsnega traku – to so trajne, resnične omejitve platforme, ne izpusti v tem orodju.

Kopirajte kombinirani blok CSS in oba nabora pravil potujeta skupaj, vsak pod svojim komentarjem, pripravljena za lepljenje v datoteko slogov, kot je. Vse se upodablja in posodablja v vašem brskalniku, ko povlečete kontrolnike – brez nalaganja, brez računa, brez povratnega obiska strežnika in deluje brez povezave, ko se stran naloži.

🛡️
Izvedeno v brskalniku

Vaše datoteke in vnosi nikoli ne zapustijo te naprave. Obdelava poteka popolnoma brez povezave. 100 % varno.

Sprejeti formati in pravila

  • Skupni kontrolniki – širina, barva steze, barva palca, barva lebdenja, polmer kota palca – poganjata oba motorja iz istih vhodov.
  • Iskreno preslikavo širine drsnega traku: Firefox podpira le tanko, samodejno ali nič, tako da je natančna vrednost slikovnih pik, ki jo izberete, preslikana na najbližjo resnično ključno besedo in prikazana poleg vašega vnosa.
  • Kombiniran izhod CSS, ki ga je mogoče kopirati, s pravili psevdoelementov WebKit in standardnimi lastnostmi Firefoxa, jasno komentiran.

Ključne prednosti

✓ Dve predstavitveni škatli v živo upodabljata lasten pravi drsni trak vsakega motorja — polje WebKit vedno prikazuje pravi rezultat v Chromu, Safariju in Edgeu, brez ponarejenega upodabljanja.
✓ Vrzel v zmogljivosti Firefoxa je prikazana, ne skrita: barva lebdenja, radij palca in neodvisen slog sledi preprosto ne obstajajo v Firefoxu in orodje to jasno pove, namesto da bi se pretvarjalo drugače.
✓ En blok CSS, ki ga je mogoče kopirati, pošlje oba niza pravil skupaj z nadomestnim komentarjem, pripravljenim za lepljenje, kot je.

Primeri uporabe

  • • Oblikujte drsni trak stranske plošče na nadzorni plošči, da se ujema s paleto blagovne znamke, medtem ko natančno vidite, kako daleč ta stil seže v Firefoxu, preden ga pošljete.
  • • Zgrabite pošteno ključno besedo Firefox scrollbar-width za izbrano debelino, namesto da ugibate, ali je tanek ali samodejni bližje ujemanje.
  • • Kopirajte en blok CSS, ki vsebuje pravila psevdoelementov WebKit in standardne lastnosti Firefoxa, pri čemer je vsaka jasno komentirana, naravnost v slogovno tabelo.