इस साल, Chrome की टीम ने CSS Day कॉन्फ़्रेंस में बढ़-चढ़कर हिस्सा लिया. हमने सीएसएस हेल्पडेस्क चलाया. इसमें हमने इवेंट में शामिल लोगों के सवालों के जवाब दिए. साथ ही, हमारे पास एक व्हाइटबोर्ड भी था. इस पर हमने लोगों से पूछा कि उन्हें सीएसएस में अब भी क्या कमी लग रही है. इस पोस्ट में, मैं उस सवाल के जवाब शेयर करूंगी. साथ ही, आपसे यह भी पूछूंगी कि आपको एचटीएमएल और सीएसएस में क्या कमी लगती है. इसके लिए, इस छोटे से सर्वे को पूरा करें. क्या आप CSS Day में शामिल होने वाले लोगों से सहमत हैं?
सबसे ज़्यादा किए गए दस अनुरोध
बैठक में शामिल लोगों से स्टिकी नोट पर आइडिया लिखने और उन्हें बोर्ड पर जोड़ने के लिए कहा गया. लोग स्टिकर जोड़कर भी, आइडिया के लिए वोट कर सकते हैं. सबसे ज़्यादा इस्तेमाल की जाने वाली दस सुविधाएँ यहाँ दी गई हैं.
स्टाइलिंग इनपुट के लिए सहायता
इस सुविधा के लिए हमें सबसे ज़्यादा अनुरोध मिले थे. इसके पक्ष में 21 वोट पड़े थे. आपको इन सामान्य यूज़र इंटरफ़ेस (यूआई) एलिमेंट को एक जैसे स्टाइल में दिखाने के तरीके चाहिए.
Chrome टीम को इस समस्या के बारे में पता है. यह डेवलपर के लिए एक बड़ी समस्या है. डेवलपर के लिए बेहतर समाधान बनाने पर काम चल रहा है. उदाहरण के लिए, पसंद के मुताबिक बनाए जा सकने वाले select एलिमेंट का मकसद, स्टाइल से जुड़े नए व्यवहार को ऑप्ट इन करने का तरीका उपलब्ध कराना है. इसके बाद, विकल्पों में इमेज जोड़ी जा सकती हैं या उन्हें और बेहतर स्टाइल में दिखाया जा सकता है. इस तरीके का फ़ायदा यह है कि यह सामान्य तौर पर काम करने वाले मेन्यू पर वापस आ जाएगा. इससे, इसे बेहतर बनाया जा सकेगा.
विज़ुअल रूप से छिपाया गया
सीएसएस डे पर, इस अनुरोध को 19 वोट मिले थे. यह दूसरा सबसे लोकप्रिय अनुरोध था. इस अनुरोध में, सिर्फ़ स्क्रीन रीडर के इस्तेमाल किए जाने वाले कॉन्टेंट को जोड़ने का तरीका पूछा गया है. यह एचटीएमएल एलिमेंट हो सकता है. इसमें कॉन्टेंट नहीं दिखता है और इसे सिर्फ़ स्क्रीन रीडर पढ़ता है.
आम तौर पर, लोग आज ऐसा .visually-hidden क्लास बनाकर करते हैं, ताकि कॉन्टेंट को छिपाया जा सके. हालांकि, स्क्रीन रीडर अब भी इसे ऐक्सेस कर सकते हैं.
यह एक लोकप्रिय अनुरोध है. हालांकि, कुछ लोगों का मानना है कि इसे लागू नहीं किया जाना चाहिए. ज़्यादा जानकारी के लिए, Visually hidden content is a hack that needs to be resolved, not enshrined और CSS WG issue 560 पर हुई चर्चा पढ़ें.
position: sticky inside overflow:hidden
इस अनुरोध को 16 वोट मिले हैं. फ़िलहाल, position: sticky का इस्तेमाल सिर्फ़ तब किया जा सकता है, जब सभी माता-पिता overflow: visible हों.
साल 2017 से एक समस्या खुली हुई है, जिसमें इस सुविधा का अनुरोध किया गया है. हालांकि, फ़्लोट को हटाने के लिए overflow: hidden का इस्तेमाल करने की शुरुआती ज़रूरत आज कम हो सकती है, लेकिन थ्रेड में कई अन्य स्थितियों के बारे में बताया गया है.
height: auto पर ऐनिमेट करें
बारह वोट मिलने पर, कई लोगों ने height: auto को ऐनिमेट करने का अनुरोध किया. हमें यह बताते हुए खुशी हो रही है कि यह सुविधा, वेब प्लैटफ़ॉर्म पर सीएसएस interpolate-size प्रॉपर्टी और calc-size() फ़ंक्शन के साथ उपलब्ध होगी.
ये Chrome 129 से उपलब्ध होंगे.
इनके बारे में ज़्यादा जानकारी के लिए, आने वाले समय में पोस्ट देखें.
इनपुट के अन्य टाइप
HTML5 में, आपको <input> एलिमेंट के कई अलग-अलग टाइप मिले. उदाहरण के लिए, ईमेल पते के लिए type="email" या रेंज स्लाइडर के लिए type="range".
सीएसएस डे पर, हमें इस तरह के और उदाहरणों के लिए 10 वोट मिले. जैसे, डबल रेंज या कस्टम डेटा सूची के साथ अपने-आप पूरा होने की सुविधा.
सीएसएस में असली रैंडम नंबर
एक और अनुरोध सीएसएस में रैंडम नंबर जनरेट करने के लिए किया गया था. इसे 10 वोट मिले थे. इसके लिए, पहले भी अनुरोध किया गया था. साथ ही, animation-duration की वैल्यू को रैंडम तरीके से सेट करने के लिए, एक तरीका अपनाया गया था.
मिक्सिन स्टाइल वाली क्लास
सीएसएस में कई ऐसी सुविधाएं जोड़ी गई हैं जो पहले सीएसएस प्रीप्रोसेसर में दिखती थीं. जैसे, कस्टम प्रॉपर्टी वाले वैरिएबल और अब सीएसएस नेस्टिंग. हालांकि, फिर से इस्तेमाल किए जा सकने वाले मिक्सइन को अब तक भाषा में शामिल नहीं किया गया है. हालांकि, CSS Day में हिस्सा लेने वाले सात लोगों ने इन्हें देखने में दिलचस्पी दिखाई.
इस सुविधा के लिए स्पेसिफ़िकेशन पर काम शुरू करने के लिए, सीएसएस वर्किंग ग्रुप का फ़ैसला लिया गया है. उस समस्या के बारे में चर्चा में अपने विचार और इस्तेमाल के उदाहरण जोड़े जा सकते हैं.
शैडो डीओएम में ग्लोबल स्टाइल
एक और समस्या यह है कि शैडो DOM में ग्लोबल सीएसएस स्टाइल लागू करने की अनुमति देने के अनुरोध के लिए, इस्तेमाल के उदाहरणों वाली एक बड़ी चर्चा थ्रेड है. सीएसएस डे पर छह लोगों ने इसके लिए अनुरोध किया था. इस सुविधा की मदद से, ग्लोबल रीसेट स्टाइल को वेब कॉम्पोनेंट में भी लागू किया जा सकेगा. साथ ही, एक ही सीएसएस फ़ाइल को किसी साइट के सभी कॉम्पोनेंट में इस्तेमाल किया जा सकेगा. इस्तेमाल के उदाहरणों की इस खास जानकारी को देखें. साथ ही, हमें बताएं कि क्या आपको भी यह सुविधा चाहिए.
अलग-अलग यूनिट को बांटना
Interop 2024 के लिए एक प्रस्ताव था, जिसमें अलग-अलग यूनिट के हिसाब से बांटने की सुविधा का अनुरोध किया गया था. उदाहरण के लिए, calc(100vw / 1px). इसे Interop 2024 के लिए बहुत बड़ा माना गया था. हालांकि, कई डेवलपर, जिनमें CSS Day में शामिल छह लोग भी शामिल हैं, इसे लागू होते हुए देखना चाहते हैं.
nth-letter
सीएसएस में कई स्यूडो-एलिमेंट होते हैं. ये ऐसे काम करते हैं जैसे आपने कॉन्टेंट के किसी सेक्शन को स्पैन में रैप किया हो. उदाहरण के लिए, ::first-letter सूडो-एलिमेंट, ब्लॉक कंटेनर की पहली लाइन के पहले अक्षर को टारगेट करता है.
इस सूची में ::nth-letter शामिल नहीं है. आपने करीब बीस साल से ::nth-letter की मांग की है. इसलिए, हमें पता है कि वेब डेवलपर लंबे समय से इसकी मांग कर रहे हैं. CSS Day में छह लोगों ने इसके लिए वोट किया. इस वजह से, यह सुविधा हमारी टॉप 10 सुविधाओं में आखिरी नंबर पर है.
क्या आप CSS Day के टॉप 10 से सहमत हैं?
हम इन समस्याओं के बारे में ज़्यादा से ज़्यादा लोगों से जानना चाहते हैं. क्या इनमें से कोई समस्या आपकी टॉप 10 समस्याओं में शामिल है? अगर नहीं, तो क्या आपको सीएसएस और एचटीएमएल में कुछ और देखना है? यह छोटा-सा फ़ॉर्म भरकर हमें इस बारे में बताएं. हम एक और पोस्ट में जवाबों के बारे में खास जानकारी देंगे.