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

छद्म तत्वों के ::-वेबकिट-स्क्रॉलबार परिवार के साथ क्रोम, सफारी और एज स्टाइल स्क्रॉलबार: ट्रैक, अंगूठे और अंगूठे की होवर स्थिति के लिए अलग-अलग नियम, साथ ही एक पिक्सेल-सटीक चौड़ाई और एक अंगूठे की सीमा-त्रिज्या। फ़ायरफ़ॉक्स उन सभी को पूरी तरह से अनदेखा कर देता है और इसके बजाय दो मानक गुणों, स्क्रॉलबार-चौड़ाई और स्क्रॉलबार-रंग को पढ़ता है, जो बाद में सीएसएस स्क्रॉलबार स्पेक में दर्ज हुआ। ये एक ही फ़ीचर की दो बोलियाँ नहीं हैं - ये अलग-अलग छतों के साथ दो अलग-अलग फ़ीचर सेट हैं, और अधिकांश स्क्रॉलबार जेनरेटर केवल वेबकिट परिणाम दिखाकर अंतर को चुपचाप कागज पर रख देते हैं। ये वाला नहीं है.

चौड़ाई, ट्रैक रंग, अंगूठे का रंग, होवर रंग और अंगूठे के कोने की त्रिज्या को एक बार सेट करें, और टूल एक ही इनपुट से दो नियम सेट बनाता है। वेबकिट ब्लॉक स्कोप ::-वेबकिट-स्क्रॉलबार, ::-वेबकिट-स्क्रॉलबार-ट्रैक, ::-वेबकिट-स्क्रॉलबार-थंब और इसकी :होवर स्थिति को बाएं डेमो बॉक्स पर ले जाता है, इसलिए आप वहां जो देखते हैं वह बिल्कुल वही है जो क्रोम, सफारी और एज प्रस्तुत करते हैं - ब्राउज़र का अपना वास्तविक इंजन है, कोई सिम्युलेटेड ओवरले नहीं। फ़ायरफ़ॉक्स ब्लॉक उसी ब्राउज़र के स्वयं के इंजन का उपयोग करके सही डेमो बॉक्स पर स्क्रॉलबार-चौड़ाई और स्क्रॉलबार-रंग सेट करता है, यही कारण है कि बॉक्स केवल तभी अलग दिखता है जब यह पृष्ठ वास्तव में फ़ायरफ़ॉक्स में खुला होता है; वेबकिट ब्राउज़र में यह अपना स्वयं का डिफ़ॉल्ट स्क्रॉलबार दिखाता है, और टूल उधार के पिक्सेल के साथ फ़ायरफ़ॉक्स लुक को नकली करने के बजाय ऐसा कहता है।

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

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