⭐ 0
🔍
Teksti Kuva PDF & Docs Ääni Musiikki Elektroniikka Aika Apuohjelmat Validaattorit Esoteerinen Pelit

CSS-vierityspalkkigeneraattori

Muotoile vierityspalkin leveys, pohja, peukalo ja hover-väri ja näe aito WebKit-tulos aidon Firefox-tuloksen vieressä — kaksi aidosti erilaista selainjärjestelmää rinnakkain.

🔒 Käsitelty kokonaan selaimessasi – mitään tähän kirjoittamaasi ei koskaan ladata.

10px
8px

Muotoiltu ::-webkit-scrollbar-näennäiselementeillä – tämä laatikko renderöidään selaimesi omalla todellisella moottorilla, jos se on Chrome, Safari tai Edge.

Muotoiltu Firefoxin scrollbar-width- ja scrollbar-color-ominaisuuksilla. Muut selaimet jättävät nämä huomiotta ja näyttävät tässä oman oletusvierityspalkkinsa – avaa tämä sivu Firefoxissa nähdäksesi todellisen tuloksen.

Firefoxissa ei ole erillistä hover-väriä, vierityspalkin peukalon reunasädettä tai itsenäistä raiteen muotoilua – vain scrollbar-width, joka on yhdistetty valitsemastasi paksuudesta todelliseen avainsanaan: thin

Käsitellään... 0%

Tulos

Chrome, Safari ja Edge muotoilevat vierityspalkkeja ::-webkit-scrollbar-pseudo-elementtiperheellä: erilliset säännöt pohjalle, peukalolle ja peukalon hover-tilalle sekä pikselintarkka leveys ja peukalon pyöristyssäde. Firefox jättää nämä täysin huomiotta ja lukee sen sijaan kahta standardiominaisuutta, scrollbar-width ja scrollbar-color, jotka lisättiin myöhemmin CSS Scrollbars -spesifikaatioon. Kyse ei ole saman ominaisuuden eri murteista — vaan kahdesta eri ominaisuusjoukosta, joilla on eri mahdollisuudet, ja useimmat vierityspalkkigeneraattorit sivuuttavat eron hiljaa näyttämällä vain WebKit-tuloksen. Tämä ei tee niin.

Aseta leveys, pohjan väri, peukalon väri, hover-väri ja peukalon pyöristyssäde kerran, ja työkalu muodostaa kaksi sääntösarjaa samoista syötteistä. WebKit-lohko rajaa ::-webkit-scrollbar-, ::-webkit-scrollbar-track-, ::-webkit-scrollbar-thumb- ja sen :hover-tilan säännöt vasempaan esittelylaatikkoon, joten siinä näkyvä on täsmälleen sitä, mitä Chrome, Safari ja Edge näyttävät — selaimen oma aito moottori, ei simuloitu päällekkäisyys. Firefox-lohko asettaa scrollbar-width- ja scrollbar-color-ominaisuudet oikeaan esittelylaatikkoon käyttäen saman selaimen omaa moottoria, minkä vuoksi laatikko näyttää erilaiselta ainoastaan silloin, kun tämä sivu on todella auki Firefoxissa; WebKit-selaimessa siinä näkyy sen oma oletusvierityspalkki, ja työkalu kertoo sen teeskentelemättä Firefoxin ulkoasua lainapikseleillä.

Leveyskuvaus on selkein esimerkki erosta: Firefoxin scrollbar-width hyväksyy vain avainsanat auto, thin tai none — ei koskaan tarkkaa pikselilukua. Tämä generaattori kuvaa valitsemasi leveyden rehellisesti (8px tai alle muuttuu thin, kaikki leveämpi muuttuu auto) ja näyttää tuloksena olevan avainsanan syötteesi vieressä keksimättä olematonta pikselintarkkaa Firefox-tulosta. Firefox ei myöskään tue erillistä hover-väriä, itsenäistä peukalon pyöristyssädettä tai pohjan väriä, joka ei ole yksinkertaisesti scrollbar-colorin toinen arvo — nämä ovat alustan pysyviä ja todellisia rajoituksia, eivät tämän työkalun puutteita.

Kopioi yhdistetty CSS-lohko, ja molemmat sääntösarjat kulkevat mukana, kukin oman kommenttinsa alla, valmiina liitettäväksi tyylitiedostoon sellaisenaan. Kaikki muodostuu ja päivittyy omassa selaimessasi, kun vedät säätimiä — ei latausta, ei tiliä, ei palvelinkutsuja, ja se toimii offline-tilassa, kun sivu on kerran ladattu.

Nautitko tästä työkalusta? Onko tämä tuote mielestäsi hyödyllinen? Näetkö siinä potentiaalia ja haluat tukea sitä?

🛡️
Suoritetaan selaimessa

Tiedostosi ja syötteesi eivät koskaan poistu tältä laitteelta. Käsittely tapahtuu täysin offline-tilassa. 100 % turvallista.

Hyväksytyt muodot ja säännöt

  • Jaetut säätimet — leveys, pohjan väri, peukalon väri, hover-väri, peukalon pyöristyssäde — ohjaavat molempia selainmoottoreita samoista syötteistä.
  • Rehellinen scrollbar-width-kuvaus: Firefox tukee vain arvoja thin, auto tai none, joten valitsemasi tarkka pikseliarvo kuvataan lähimpään todelliseen avainsanaan ja näytetään syötteesi vieressä.
  • Yhdistetty, kopioitava CSS-tuloste sisältää sekä WebKitin pseudo-elementtisäännöt että Firefoxin standardiominaisuudet selkeästi kommentoituna.

Keskeiset hyödyt

✓ Kahdessa live-esittelylaatikossa näkyy kunkin selainmoottorin oma aito vierityspalkki — WebKit-laatikko näyttää aina todellisen lopputuloksen Chromessa, Safarissa ja Edgessä, ei simuloitua kuvaa.
✓ Firefoxin puutteita ei piiloteta: hover-väriä, peukalon pyöristyssädettä ja erillistä pohjan muotoilua ei yksinkertaisesti ole Firefoxissa, ja työkalu kertoo sen suoraan eikä teeskentele muuta.
✓ Yksi kopioitava CSS-lohko sisältää molemmat sääntösarjat yhdessä varakommentin kera, valmiina liitettäväksi sellaisenaan.

Käyttötapaukset

  • • Tyylitä hallintapaneelin sivupalkin vierityspalkki brändin väripaletin mukaiseksi ja näe samalla tarkalleen, kuinka pitkälle tyylit ulottuvat Firefoxissa, ennen kuin julkaiset ne.
  • • Poimi Firefoxin rehellinen vierityspalkin leveyden avainsana valitulle paksuudelle sen sijaan, että arvailisit, onko thin vai auto lähempänä vastinetta.
  • • Kopioi yksittäinen CSS-lohko, joka sisältää sekä WebKitin pseudo-elementtisäännöt että Firefoxin standardiominaisuudet, kumpikin selkeästi kommentoituna, suoraan tyylitiedostoon.