⭐ 0
🔍
Tekstas Vaizdas PDF ir dokumentai Garsas Muzika Elektronika Laikas Komunalinės paslaugos Validatoriai Ezoterinis Žaidimai

CSS slinkties juostos generatorius

Nustatykite slinkties juostos plotį, foną, slankiklį ir užvedimo spalvą, o tada greta pamatykite tikrą „WebKit“ rezultatą ir realų „Firefox“ rezultatą – dvi iš esmės skirtingas naršyklių sistemas vieną šalia kitos.

🔒 Visiškai apdorojama jūsų naršyklėje – niekas, kurį čia įvedėte, niekada neįkeliama.

10px
8px

Stilizuota naudojant ::-webkit-scrollbar pseudoelementus – šis langelis atvaizduojamas per jūsų naršyklės tikrąjį varikliuką, jei tai Chrome, Safari arba Edge.

Stilizuota naudojant Firefox scrollbar-width ir scrollbar-color savybes. Kitos naršyklės jų nepaiso ir rodo savo numatytąją slinkties juostą čia – atidarykite šį puslapį Firefox, kad pamatytumėte tikrą rezultatą.

Firefox neturi atskiros užvedimo spalvos, nykščio kraštinės spindulio ar nepriklausomo takelio stiliaus – tik scrollbar-width, čia susietą iš jūsų pasirinkto storio į tikrąjį raktažodį: thin

Apdorojama... 0%

Rezultatas

„Chrome“, „Safari“ ir „Edge“ stilių slinkties juostoms taiko naudodamos ::-webkit-scrollbar pseudo-elementų šeimą: atskiros taisyklės fonui, slankikliui ir slankiklio užvedimo būsenai, plius tikslus plotis pikseliais ir slankiklio border-radius. „Firefox“ visa tai visiškai ignoruoja ir vietoj to skaito dvi standartines savybes – scrollbar-width ir scrollbar-color, kurios vėliau atsirado CSS slinkties juostų specifikacijoje. Tai ne dvi tos pačios funkcijos tarmės – tai du skirtingi funkcijų rinkiniai su skirtingomis galimybių lubomis, ir dauguma slinkties juostų generatorių tyliai užglaisto šią spragą rodydami tik „WebKit“ rezultatą. Šis – ne.

Vieną kartą nustatykite plotį, fono spalvą, slankiklio spalvą, užvedimo spalvą ir slankiklio kampų apvalumą, o įrankis sudaro du taisyklių rinkinius iš tų pačių įvesčių. „WebKit“ blokas apriboja ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb ir jo :hover būseną kairiajam demonstraciniam laukeliui, tad tai, ką jame matote, yra būtent tai, ką atvaizduoja „Chrome“, „Safari“ ir „Edge“ – pats naršyklės tikras variklis, o ne imituotas perdengimas. „Firefox“ blokas dešiniajam demonstraciniam laukeliui nustato scrollbar-width ir scrollbar-color naudodamas tos pačios naršyklės variklį, todėl laukelis atrodo kitaip tik tuomet, kai šis puslapis atidarytas būtent „Firefox“; „WebKit“ naršyklėje jis ten rodo savo numatytąją slinkties juostą, ir įrankis tai įvardija, užuot suklastojęs „Firefox“ išvaizdą pasiskolintais pikseliais.

Pločio susiejimas yra ryškiausias spragos pavyzdys: „Firefox“ scrollbar-width priima tik raktinius žodžius auto, thin arba none – niekada tikslaus pikselių skaičiaus. Šis generatorius sąžiningai susieja jūsų pasirinktą plotį (8px ir mažiau tampa thin, viskas plačiau tampa auto) ir parodo gautą raktinį žodį greta jūsų įvesties, užuot išgalvojęs netikrą, pikseliais tikslų „Firefox“ rezultatą, kurio nėra. „Firefox“ taip pat neturi galimybės nustatyti atskiros užvedimo spalvos, nepriklausomo slankiklio border-radius ar fono spalvos, kuri nėra tik antroji scrollbar-color reikšmė – tai nuolatiniai, realūs platformos apribojimai, o ne šio įrankio trūkumai.

Nukopijuokite sudėtinį CSS bloką ir abu taisyklių rinkiniai keliauja kartu, kiekvienas po savo komentaru, paruošti įklijuoti į stilių failą tokie, kokie yra. Viskas atvaizduojama ir atnaujinama jūsų pačių naršyklėje vos tik pajudinate valdiklius – jokių įkėlimų, jokios paskyros, jokių serverio užklausų, o puslapiui įsikrovus veikia ir be interneto.

Patinka šis įrankis? Manote, kad šis produktas naudingas? Matote jame potencialo ir norite paremti?

🛡️
Vykdoma naršyklėje

Jūsų bylos ir įvestys niekada nepalieka šio įrenginio. Apdorojimas vyksta visiškai atsijungus. 100 % saugu.

Priimtini formatai ir taisyklės

  • Bendri valdikliai – plotis, fono spalva, slankiklio spalva, užvedimo spalva, slankiklio kampų apvalumas – valdo abu variklius iš tų pačių įvesčių.
  • Sąžiningas slinkties juostos pločio susiejimas: „Firefox“ palaiko tik thin, auto arba none, todėl jūsų pasirinkta tiksli pikselių reikšmė susiejama su artimiausiu realiu raktiniu žodžiu ir parodoma greta jūsų įvesties.
  • Vientisas, kopijuojamas CSS rezultatas su abiem – „WebKit“ pseudo-klasių taisyklėmis ir „Firefox“ standartinėmis savybėmis, aiškiai pakomentuotas.

Pagrindiniai privalumai

✓ Du tiesioginės demonstracijos laukeliai atvaizduoja tikras kiekvieno variklio slinkties juostas – „WebKit“ laukelis visada rodo autentišką rezultatą „Chrome“, „Safari“ ir „Edge“ naršyklėse, be jokios imitacijos.
✓ „Firefox“ galimybių spragos nerodomos paslėptos: užvedimo spalva, slankiklio spindulys ir nepriklausomas fono stilius „Firefox“ tiesiog neegzistuoja, o įrankis tai atvirai įvardija, užuot apsimetęs, kad yra kitaip.
✓ Vienas nukopijuojamas CSS blokas pateikia abu taisyklių rinkinius kartu su atsarginiu komentaru – paruoštas įklijuoti toks, koks yra.

Naudojimo atvejai

  • • Suformuokite prietaisų skydelio šoninės juostos slinkties juostą taip, kad ji atitiktų prekės ženklo spalvų paletę, ir prieš publikuodami pamatykite, kiek toli tas stilius siekia „Firefox“ naršyklėje.
  • • Paimkite tikrą „Firefox“ slinkties juostos pločio raktinį žodį pasirinktam storiui, užuot spėlioję, ar „thin“, ar „auto“ yra tinkamesnis atitikmuo.
  • • Nukopijuokite vieną CSS bloką, kuriame yra ir „WebKit“ pseudoelementų taisyklės, ir „Firefox“ standartinės savybės, kiekviena aiškiai pakomentuota, tiesiai į stilių lentelę.