⭐ 0
🔍
Tekst Pilt PDF ja dokumendid Heli Muusika Elektroonika Aeg Kommunaalteenused Validaatorid Esoteeriline Mängud

CSS-i kerimisriba generaator

Kujunda kerimisriba laiust, rada, pöialt ja hõljumisvärvi ning näe päris WebKiti tulemust Firefoxi tulemuse kõrval — kaks tõeliselt erinevat brauserimootorit, kõrvuti.

🔒 Töödeldud täielikult teie brauseris – midagi, mida siia sisestate, ei laadita kunagi üles.

10px
8px

Kujundatud ::-webkit-scrollbar pseudoelementidega – see kast renderdub läbi sinu brauseri enda tegeliku mootori, kui see on Chrome, Safari või Edge.

Kujundatud Firefoxi scrollbar-width ja scrollbar-color omadustega. Teised brauserid ignoreerivad neid ja näitavad siin oma vaikimisi kerimisriba – ava see leht Firefoxis, et näha tegelikku tulemust.

Firefoxil ei ole eraldi hover-värvi, pöidla ääreraadiust ega sõltumatut raja kujundust – ainult scrollbar-width, mis on siin kaardistatud sinu valitud paksusest tegelikuks märksõnaks: thin

Töötlen... 0%

Tulemus

Chrome, Safari ja Edge kujundavad kerimisribasid ::-webkit-scrollbar pseudoelementide perekonnaga: eraldi reeglid rajale, pöidlale ja pöidla hõljumisolekule, pluss täpne laius pikslites ning pöidla border-radius. Firefox ignoreerib seda kõike ja kasutab hoopis kahte standardset omadust, scrollbar-width ja scrollbar-color, mis hiljem CSS-i kerimisribade spetsifikatsiooni lisati. Need ei ole kaks sama funktsiooni dialekti — need on kaks erinevat omaduste kogumit erinevate võimalustega ning enamik kerimisriba generaatoreid vaikselt silub selle lünga, näidates ainult WebKiti tulemust. See siin mitte.

Määra laius, raja värv, pöidla värv, hõljumisvärv ja pöidla nurgaümardus üks kord ning tööriist ehitab kaks reeglistikku samadest sisenditest. WebKiti plokk seob ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb ja selle :hover oleku vasaku demokastiga, nii et seal nähtu on täpselt see, mida Chrome, Safari ja Edge renderdavad — brauseri oma päris mootor, mitte simuleeritud ülekate. Firefoxi plokk seab scrollbar-width ja scrollbar-color parempoolsele demokastile kasutades sama brauseri mootorit, mistõttu kast näeb teistsugune välja ainult siis, kui seda lehte just Firefoxis avada; WebKiti brauseris näitab see seal omaenda vaikimisi kerimisriba ja tööriist ütleb seda, selle asemel et võltsida Firefoxi välimust laenatud pikslitega.

Laiuse vastendus on lünga selgeim näide: Firefoxi scrollbar-width aktsepteerib ainult märksõnu auto, thin või none — mitte kunagi täpset piksliväärtust. See generaator vastendab sinu valitud laiuse ausalt (8px ja vähem saab thin, kõik laiem saab auto) ning kuvab tulemuseks oleva märksõna sinu sisendi kõrval, selle asemel et leiutada olematut täiuslikult pikslitäpset Firefoxi tulemust. Firefoxil pole ka võimalust määrata eraldi hõljumisvärvi, sõltumatut pöidla border-radius'i või raja värvi, mis ei oleks lihtsalt scrollbar-color teine väärtus — need on platvormi püsivad, tegelikud piirangud, mitte puudujäägid selles tööriistas.

Kopeeri kombineeritud CSS-plokk ja mõlemad reeglistikud liiguvad koos, igaüks oma kommentaari all, valmis as-is stiililehte kleepimiseks. Kõik renderdub ja uueneb sinu enda brauseris juhtelemente lohistades — ei mingeid üleslaadimisi, kontosid ega serveripöördusi, ning pärast lehe laadimist töötab ka võrguühenduseta edasi.

Meeldib see tööriist? Arvad, et see toode on kasulik? Näed selles potentsiaali ja soovid seda toetada?

🛡️
Käivitatakse brauseris

Sinu failid ja sisestused ei lahku sellest seadmest. Töötlus toimub täiesti võrguühenduseta. 100% turvaline.

Aktsepteeritud formaadid ja reeglid

  • Jagatud juhtelemendid — laius, raja värv, pöidla värv, hõljumisvärv, pöidla nurgaümardus — juhivad mõlemat mootorit samadest sisenditest.
  • Aus kerimisriba laiuse vastendus: Firefox toetab ainult thin, auto või none, seega valitud täpne piksliväärtus vastendatakse lähima tegeliku märksõnaga ja kuvatakse sinu sisendi kõrval.
  • Kombineeritud, kopeeritav CSS-väljund koos nii WebKiti pseudoelementide reeglite kui ka Firefoxi standardomadustega, selgelt kommenteeritud.

Peamised eelised

✓ Kaks reaalajas demokasti renderdavad kumbki oma mootori ehtsa kerimisriba — WebKiti kast näitab alati tõest tulemust Chrome'is, Safaris ja Edge'is, mitte võltsitud pilti.
✓ Firefoxi võimekuste lünka ei peideta: hõljumisvärv, pöidla nurgaümardus ja eraldi raja kujundamine lihtsalt puuduvad Firefoxis ning tööriist ütleb selle otse välja, teeskluse asemel.
✓ Üks kopeeritav CSS-plokk sisaldab mõlemad reeglistikud koos tagavarareeglite kommentaariga, valmis as-is kleepimiseks.

Kasutusjuhud

  • • Kujunda armatuurlaua külgriba kerimisriba brändi värvipaletile vastavaks ja näe kohe, kui kaugele see kujundus Firefoxis ulatub, enne kui selle kasutusele võtad.
  • • Hangi valitud paksuse jaoks aus Firefoxi scrollbar-width märksõna, selle asemel et arvata, kas thin või auto on täpsem vaste.
  • • Kopeeri üks CSS-plokk, mis sisaldab nii WebKiti pseudoelemendi reegleid kui ka Firefoxi standardseid omadusi – mõlemad selgelt kommenteerituna – otse stiililehte.