CSS görgetősáv generátor

Chrome, Safari és Edge stílusú görgetősávok a ::-webkit-scrollbar pszeudoelemek családjával: külön szabályok a sávra, a hüvelykujjra és a hüvelykujj lebegési állapotára, valamint egy pixel pontos szélességre és egy hüvelykujj szegélysugárra. A Firefox mindezt teljesen figyelmen kívül hagyja, és ehelyett két szabványos tulajdonságot olvas be, a scrollbar-width és a scrollbar-color, amelyek később bekerültek a CSS Scrollbars specifikációjába. Ez nem két azonos funkciójú dialektus – ez két különböző funkciókészlet, eltérő mennyezettel, és a legtöbb görgetősáv-generátor csendesen áthidalja a rést azzal, hogy csak a WebKit eredményét mutatja. Ez nem.

Állítsa be egyszer a szélességet, a nyomvonal színét, a hüvelykujj színét, a lebegtetés színét és a hüvelykujj sarok sugarát, és az eszköz két szabálykészletet készít ugyanazokból a bemenetekből. A WebKit blokk hatókörei ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb és :hover állapota a bal oldali demódobozhoz, tehát amit ott lát, az pontosan az, amit a Chrome, a Safari és az Edge megjelenít – a böngésző saját valódi motorja, nem szimulált átfedés. A Firefox blokk beállítja a görgetősáv szélességét és színét a jobb oldali demódobozban ugyanazon böngésző saját motorjával, ezért a doboz csak akkor néz ki másként, ha ez az oldal ténylegesen meg van nyitva a Firefoxban; WebKit böngészőben a saját alapértelmezett görgetősávját mutatja ott, és az eszköz ezt mondja, nem pedig kölcsönzött pixelekkel hamisít egy Firefox megjelenést.

A szélesség-leképezés a legvilágosabb példa a különbségre: a Firefox görgetősáv-szélessége csak az auto, vékony vagy none kulcsszavakat fogadja el – soha nem pontos pixelszámot. Ez a generátor őszintén leképezi a választott szélességet (8 képpont alatti vékonyabb lesz, minden szélesebb automatikus lesz), és megjeleníti az eredményül kapott kulcsszót a bevitel mellett, ahelyett, hogy kitalálna egy nem létező, hamis pixel-tökéletes Firefox-eredményt. A Firefox nem tud külön lebegő színt, független hüvelykujj-szegély sugarat vagy olyan sávszínt beállítani, amely nem egyszerűen a görgetősáv színének második értéke – ezek a platform állandó, valós korlátai, nem pedig az eszköz hiányosságai.

Másolja ki a kombinált CSS-blokkot, és mindkét szabálykészlet együtt utazik, mindegyik saját megjegyzés alatt, és készen áll a stíluslapba való beillesztésre. Minden a saját böngészőjében jelenik meg és frissül, ahogy húzza a vezérlőket – nincs feltöltés, nincs fiók, nincs oda-vissza út a szerverhez, és az oldal betöltése után offline állapotban is működik.