CSS स्क्रॉलबार जनरेटर

Chrome, Safari और Edge ::-webkit-scrollbar छद्म-तत्वों के परिवार से स्क्रॉलबार को स्टाइल करते हैं: ट्रैक, थंब और थंब की होवर स्थिति के लिए अलग-अलग नियम, साथ ही एक सटीक पिक्सेल चौड़ाई और थंब का बॉर्डर-रेडियस। Firefox इन सबको पूरी तरह अनदेखा करता है और इसके बजाय दो मानक गुण, scrollbar-width और scrollbar-color, पढ़ता है जो बाद में CSS Scrollbars विनिर्देश में आए। ये एक ही सुविधा की दो बोलियाँ नहीं हैं — ये अलग-अलग क्षमताओं वाले दो अलग सुविधा सेट हैं, और अधिकांश स्क्रॉलबार जनरेटर केवल WebKit परिणाम दिखाकर चुपचाप इस अंतर को ढक देते हैं। यह जनरेटर ऐसा नहीं करता।

चौड़ाई, ट्रैक रंग, थंब रंग, होवर रंग और थंब का कोना त्रिज्या एक बार सेट करें, और टूल एक ही इनपुट से दो नियम सेट बनाता है। WebKit ब्लॉक ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb और इसकी :hover स्थिति को बाएँ डेमो बॉक्स तक सीमित करता है, ताकि वहाँ आपको ठीक वही दिखे जो Chrome, Safari और Edge रेंडर करते हैं — ब्राउज़र का अपना असली इंजन, कोई सिम्युलेटेड ओवरले नहीं। Firefox ब्लॉक दाएँ डेमो बॉक्स पर उसी ब्राउज़र के अपने इंजन का उपयोग करके scrollbar-width और scrollbar-color सेट करता है, यही कारण है कि जब यह पृष्ठ वास्तव में Firefox में खुला हो तभी वह बॉक्स अलग दिखता है; किसी WebKit ब्राउज़र में वहाँ अपनी डिफ़ॉल्ट स्क्रॉलबार दिखाता है, और टूल उधार के पिक्सेल से Firefox का रूप नकली बनाने के बजाय ऐसा कहता है।

चौड़ाई मैपिंग इस अंतर का सबसे स्पष्ट उदाहरण है: Firefox का scrollbar-width केवल कीवर्ड auto, thin या none स्वीकार करता है — कभी कोई सटीक पिक्सेल आँकड़ा नहीं। यह जनरेटर आपकी चुनी हुई चौड़ाई को ईमानदारी से मैप करता है (8px और उससे कम thin बन जाता है, उससे अधिक कुछ भी auto बन जाता है) और परिणामी कीवर्ड आपके इनपुट के बगल में दिखाता है, बजाय इसके कि कोई नकली पिक्सेल-परफ़ेक्ट Firefox परिणाम गढ़ा जाए जो मौजूद ही नहीं है। Firefox में अलग होवर रंग, स्वतंत्र थंब बॉर्डर-रेडियस, या ट्रैक रंग सेट करने का भी कोई तरीका नहीं है जो केवल scrollbar-color का दूसरा मान न हो — ये प्लेटफ़ॉर्म की स्थायी, वास्तविक सीमाएँ हैं, इस टूल की कोई चूक नहीं।

संयुक्त CSS ब्लॉक कॉपी करें और दोनों नियम सेट एक साथ चलते हैं, हर एक अपनी टिप्पणी के अंतर्गत, जैसे-का-तैसे स्टाइलशीट में पेस्ट करने के लिए तैयार। जैसे ही आप नियंत्रण खींचते हैं, सब कुछ आपके अपने ब्राउज़र में रेंडर और अपडेट होता है — कोई अपलोड नहीं, कोई खाता नहीं, कोई सर्वर राउंड-ट्रिप नहीं, और पृष्ठ लोड होने के बाद यह ऑफ़लाइन भी काम करता रहता है।