CSS Görgetősáv Generátor

A Chrome, a Safari és az Edge a ::-webkit-scrollbar pszeudo-elem család segítségével stilizálja a görgetősávokat: külön szabályok a sávra, a hüvelykujjra és a hüvelykujj hover állapotára, plusz egy pixelpontos szélesség és egy hüvelykujj border-radius. A Firefox mindezt teljesen figyelmen kívül hagyja, és helyette két szabványos tulajdonságot, a scrollbar-width és a scrollbar-color értékeket olvassa, amelyek később kerültek be a CSS Scrollbars specifikációba. Ez nem ugyanannak a funkciónak két dialektusa – két különböző funkciókészlet, eltérő lehetőségekkel, és a legtöbb görgetősáv-generátor csendben elfedi ezt a különbséget, mivel csak a WebKit-eredményt jeleníti meg. Ez az eszköz nem.

Állítsd be egyszer a szélességet, a sáv színét, a hüvelykujj színét, a hover színt és a hüvelykujj saroklekerekítését, és az eszköz ugyanazokból a bemenetekből építi fel a két szabálykészletet. A WebKit blokk a ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb és annak :hover állapotát a bal oldali demódobozra korlátozza, így pontosan azt látod ott, amit a Chrome, a Safari és az Edge renderel – a böngésző saját, valós motorját, nem egy szimulált réteget. A Firefox blokk a scrollbar-width és scrollbar-color tulajdonságokat állítja be a jobb oldali demódobozon, ugyanazt a böngészőmotort használva, ezért a doboz csak akkor néz ki másképp, ha ezt az oldalt ténylegesen Firefoxban nyitod meg; WebKit böngészőben ott a saját alapértelmezett görgetősávját mutatja, és az eszköz ezt közli, ahelyett hogy kölcsönzött pixelekkel hamisítana egy Firefox-kinézetet.

A szélesség hozzárendelése a különbség legvilágosabb példája: a Firefox scrollbar-width tulajdonsága csak az auto, thin vagy none kulcsszavakat fogadja el – soha nem egy pontos pixelértéket. Ez a generátor őszintén képezi le a választott szélességet (8px és az alatt vékony lesz, minden szélesebb automatikus), és a bemenet mellett megjeleníti az eredményül kapott kulcsszót, ahelyett hogy egy hamis, pixelpontos Firefox-eredményt találna ki, ami nem létezik. A Firefoxban emellett nincs mód külön hover szín, független hüvelykujj border-radius vagy olyan sávszín beállítására, ami nem egyszerűen a scrollbar-color második értéke – ezek a platform valós, állandó korlátai, nem pedig hiányosságok ebben az eszközben.

Másold ki a kombinált CSS blokkot, és mindkét szabálykészlet együtt utazik, mindegyik a saját megjegyzése alatt, készen arra, hogy egy az egyben beilleszd egy stíluslapba. Minden a saját böngésződben renderelődik és frissül, ahogy a vezérlőket húzod – nincs feltöltés, nincs fiók, nincs szerveroldali körút, és miután az oldal betöltődött, offline is működik.