CSS-i kerimisriba generaator

Chrome'i, Safari ja Edge'i stiilis kerimisribad koos pseudoelementide perekonnaga ::-webkit-kerimisriba: raja, pöidla ja pöidla hõljumise oleku jaoks eraldi reeglid, lisaks piksli täpsusega laius ja pöidla äärise raadius. Firefox ignoreerib seda kõike täielikult ja loeb selle asemel kahte standardset atribuuti, kerimisriba laius ja kerimisriba värv, mis hiljem sisestasid CSS-i kerimisribade spetsifikatsiooni. Need ei ole kaks sama funktsiooniga dialekti – need on kaks erinevat funktsioonide komplekti, millel on erinevad laed, ja enamik kerimisriba generaatoreid täidab vaikselt tühimiku, näidates ainult WebKiti tulemust. See ei tee seda.

Määrake üks kord laius, raja värv, pöidla värv, hõljumise värv ja pöidla nurga raadius ning tööriist koostab samadest sisenditest kaks reeglikomplekti. WebKiti ploki ulatused ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb ja selle olek :hover vasakpoolsesse demokasti, nii et see, mida näete, on täpselt see, mida Chrome, Safari ja Edge renderdavad – brauseri enda tõeline mootor, mitte simuleeritud ülekate. Firefoxi plokk määrab kerimisriba laiuse ja kerimisriba värvi paremal demokastil, kasutades sama brauseri enda mootorit, mistõttu näeb kast teistsugune välja ainult siis, kui see leht on Firefoxis tegelikult avatud; WebKiti brauseris näitab see seal oma vaikekerimisriba ja tööriist ütleb nii, mitte ei teeskleks laenatud pikslitega Firefoxi välimust.

Laiuse kaardistamine on lünga selgeim näide: Firefoxi kerimisriba laius aktsepteerib ainult märksõnu auto, õhuke või mitte – mitte kunagi täpset piksliarvu. See generaator kaardistab teie valitud laiuse ausalt (8 pikslit ja alla selle muutub õhukeseks, kõik laiem muutub automaatselt) ja kuvab saadud märksõna teie sisendi kõrval, selle asemel, et leiutada võltspikslitega täiuslikku Firefoxi tulemust, mida pole olemas. Firefoxil pole ka võimalust määrata eraldi hõljumise värvi, sõltumatut pöidla äärise raadiust või raja värvi, mis pole lihtsalt kerimisriba värvi teine ​​väärtus – need on platvormi püsivad, tõelised piirangud, mitte selle tööriista väljajätmised.

Kopeerige kombineeritud CSS-plokk ja mõlemad reeglikomplektid liiguvad koos, igaüks oma kommentaari all, valmis kleepimiseks stiilitabelile sellisel kujul, nagu see on. Kõik renderdatakse ja värskendatakse teie brauseris, kui lohistate juhtnuppe – pole üleslaadimist, kontot, serveri edasi-tagasi reisimist ja see töötab ka pärast lehe laadimist võrguühenduseta.