CSS-vierityspalkin generaattori

Chrome-, Safari- ja Edge-tyyliset vierityspalkit, joissa on pseudoelementtien ::-webkit-vierityspalkkiperhe: erilliset säännöt raidalle, peukalolle ja peukalon hover-tilalle sekä pikselin tarkka leveys ja peukalon reunan säde. Firefox jättää kaiken tämän kokonaan huomiotta ja lukee sen sijaan kaksi vakioominaisuutta, vierityspalkin leveys ja vierityspalkin väri, jotka myöhemmin tulivat CSS:n vierityspalkkien spesifikaatioihin. Nämä eivät ole kaksi saman ominaisuuden murretta – ne ovat kaksi erilaista ominaisuusjoukkoa, joilla on erilaiset katot, ja useimmat vierityspalkin generaattorit selvittävät aukon hiljaa näyttämällä vain WebKit-tuloksen. Tämä ei.

Aseta leveys, raidan väri, peukalon väri, osoittimen väri ja peukalon kulman säde kerran, ja työkalu rakentaa kaksi sääntöjoukkoa samoista syötteistä. WebKit-lohkon laajuudet ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb ja sen :hover-tila vasemmassa esittelyruudussa, joten se, mitä näet, on juuri sitä, mitä Chrome, Safari ja Edge renderöivät – selaimen oma todellinen moottori, ei simuloitu peitto. Firefox-lohko asettaa vierityspalkin leveyden ja vierityspalkin värin oikeanpuoleiseen esittelylaatikkoon käyttämällä saman selaimen omaa moottoria, minkä vuoksi laatikko näyttää erilaiselta vain, kun tämä sivu on todella auki Firefoxissa; WebKit-selaimessa se näyttää oman oletusvierityspalkin siellä, ja työkalu sanoo niin sen sijaan, että teeskentelee Firefox-ulkoasua lainatuilla pikseleillä.

Leveyskartoitus on selkein esimerkki erosta: Firefoxin vierityspalkin leveys hyväksyy vain avainsanat auto, ohut tai ei mitään – ei koskaan tarkkaa pikselilukua. Tämä generaattori kartoittaa valitsemasi leveyden rehellisesti (8 pikseliä ja alle ohut, leveämmistä tulee automaattisia) ja näyttää tuloksena olevan avainsanan syöttämäsi vieressä sen sijaan, että keksisi väärennetyn pikselin täydellisen Firefox-tuloksen, jota ei ole olemassa. Firefox ei myöskään voi asettaa erillistä hover-väriä, riippumatonta peukalon reunan sädettä tai raidan väriä, joka ei ole vain vierityspalkin värin toinen arvo – nämä ovat pysyviä, todellisia alustan rajoituksia, eivät tämän työkalun puutteita.

Kopioi yhdistetty CSS-lohko ja molemmat sääntöjoukot kulkevat yhdessä, kukin oman kommenttinsa alla, valmiina liitettäväksi tyylitaulukkoon sellaisenaan. Kaikki hahmontuu ja päivittyy omassa selaimessasi, kun vedät säätimiä – ei latausta, ei tiliä, ei palvelimen edestakaista kuljetusta, ja se toimii offline-tilassa sivun latautumisen jälkeen.