कमियों को दूर करना

वेब के लिए ऐप्लिकेशन बनाना आसान हो गया है.

जब हम डेवलपर से बात करते हैं, चाहे वह व्यक्तिगत तौर पर हो या State of CSS जैसे सर्वे के ज़रिए, हमें बार-बार एक ही तरह की बातें सुनने को मिलती हैं. डेवलपर को ऐसी वेबसाइटें और ऐप्लिकेशन बनाने में मुश्किल होती है जो सभी ब्राउज़र पर अच्छी तरह से काम करें. साथ ही, उन्हें यह जानने में भी मुश्किल होती है कि नई और दिलचस्प सुविधाओं का इस्तेमाल करना कब सुरक्षित है.

फ़्लेक्सबॉक्स गैप

समस्या वाली प्रॉपर्टी के उदाहरण के तौर पर, gap प्रॉपर्टी की मदद से, ग्रिड या फ़्लेक्स आइटम या मल्टीकॉल कंटेनर में कॉलम के बीच गैप बनाए जा सकते हैं. हमारे पास लंबे समय से मल्टीकॉल में column-gap है. हालांकि, यह प्रॉपर्टी सबसे पहले ग्रिड लेआउट में grid-gap के तौर पर दिखी. इसके साथ ही, grid-column-gap और grid-row-gap भी दिखे.

ब्राउज़र में ग्रिड लेआउट की सुविधा लॉन्च होने के तुरंत बाद, इस प्रॉपर्टी का नाम बदलकर gap कर दिया गया. साथ ही, row-gap और column-gap का नाम भी बदल दिया गया. इसके बाद, इसे फ़्लेक्स लेआउट में भी काम करने के लिए सेट किया गया. नाम बदलने का मतलब है कि हमारे पास एक ही काम करने वाली कई प्रॉपर्टी नहीं हैं.

.box {
  display: flex;
  gap: 1em;
}

Firefox ने अक्टूबर 2018 में, फ़्लेक्स लेआउट के लिए प्रॉपर्टी को शिप किया. यह Chrome में जुलाई 2020 तक नहीं दिखा. इसके बाद, अप्रैल 2021 में Safari में भी नहीं दिखा. इसका मतलब है कि gap को सुरक्षित तरीके से इस्तेमाल करने से पहले, दो साल और छह महीने का अंतर था. हालांकि, ज़्यादातर डेवलपर को इससे ज़्यादा इंतज़ार करना पड़ा. इसकी वजह यह थी कि उन्हें ब्राउज़र के सबसे नए वर्शन के साथ-साथ पुराने वर्शन के साथ भी काम करना था. फ़्लेक्स लेआउट में gap का इस्तेमाल करना और भी मुश्किल हो गया था. इसकी वजह यह थी कि हम फ़्लेक्स लेआउट में गैप की सुविधा का पता लगाने के लिए, फ़ीचर क्वेरी का इस्तेमाल नहीं कर सकते थे. ग्रिड में gap प्रॉपर्टी का इस्तेमाल किया जा सकता है. इसलिए, @supports (gap:1em) की वैल्यू true होगी.

एक और समस्या यह है कि जब किसी ब्राउज़र में कोई नई सुविधा आती है, तो लोग उसके बारे में बात करने लगते हैं और डेमो शेयर करते हैं. यह प्रोसेस, किसी भी स्टेबल ब्राउज़र में सुविधा उपलब्ध होने से काफ़ी पहले शुरू हो जाती है. इससे डेवलपर को भ्रम हो सकता है या कम से कम, निराशा हो सकती है. अक्सर ऐसा होता है कि हर जगह नई और शानदार सुविधाओं के बारे में बात की जाती है. हालांकि, बाद में आपको पता चलता है कि आपके डिवाइस पर ये सुविधाएं काम नहीं करतीं.

सहायता पाने में रुकावटें क्यों आ रही हैं?

इस पोस्ट का मकसद, किसी एक ब्राउज़र को धीमा बताना नहीं है. अगर अलग-अलग प्लैटफ़ॉर्म की सुविधाओं को देखा जाए, तो आपको पता चलेगा कि अलग-अलग ब्राउज़र, अलग-अलग सुविधाओं में आगे हैं.

ज़्यादातर सुविधाओं का प्रोटोटाइप एक ही ब्राउज़र में बनाया जाएगा. उदाहरण के लिए, ग्रिड लेआउट की खास जानकारी को सबसे पहले Microsoft ने बनाया था. साथ ही, इसे शुरुआती तौर पर Internet Explorer 10 में लागू किया गया था. Mozilla के एक इंजीनियर ने यह पता लगाने के लिए काफ़ी काम किया कि सबग्रिड को कैसे काम करना चाहिए. इसलिए, यह सुविधा सबसे पहले Firefox में उपलब्ध हुई. हम देख रहे हैं कि Safari, रंग से जुड़े कुछ नए और दिलचस्प फ़ंक्शन में सबसे आगे है.

प्रोटोटाइप बनाने में कोई एक ब्राउज़र सबसे आगे हो सकता है. हालांकि, सीएसएस वर्किंग ग्रुप में सभी ब्राउज़र और अन्य संगठनों के प्रतिनिधि, सीएसएस की सुविधाओं पर चर्चा करते हैं. यह बहुत ज़रूरी है कि किसी सुविधा को सभी ब्राउज़र में लागू किया जा सके. साथ ही, उसे इस तरह से डिज़ाइन न किया गया हो कि उसे किसी ब्राउज़र में लागू करना नामुमकिन हो. इससे, इस सुविधा को हमेशा के लिए बंद कर दिया जाएगा और इसे इस्तेमाल नहीं किया जा सकेगा.

हालांकि, किसी सुविधा को लागू करते समय, उसे उस ब्राउज़र की अन्य सभी संभावित सुविधाओं के साथ प्राथमिकता दी जानी चाहिए. कभी-कभी, ब्राउज़र को बेहतर बनाने के लिए किए जाने वाले अन्य कामों की वजह से, कुछ चीज़ें रुक जाती हैं. इसका एक बेहतरीन उदाहरण, Chromium में RenderingNG का काम है. इससे सबग्रिड को लागू करने का रास्ता साफ़ हो गया. हालांकि, Firefox और Chromium के सबग्रिड को शिप करने के बीच काफ़ी समय लगा. इसकी वजह यह थी कि ग्रिड लेआउट को पहले नए रेंडरिंग इंजन में फिर से लागू करना पड़ा.

समस्याएं

यहां दो समस्याएं हैं. पहली समस्या इंटरऑपरेबिलिटी की है. इसका मतलब है कि किसी ब्राउज़र में कोई सुविधा लॉन्च होने के बाद, उसे हर जगह उपलब्ध होने में काफ़ी समय लग सकता है.

दूसरी समस्या, मैसेजिंग से जुड़ी है. हम यह कैसे साफ़ तौर पर बता सकते हैं कि सहायता में कहां कमियां हैं? हम नई सुविधाओं को इस तरह कैसे शेयर करें कि लोगों को हर सुविधा के बारे में बारीकी से रिसर्च न करनी पड़े और उन्हें यह पता चल जाए कि वह सुविधा कितनी काम की है?

इंटरोऑपरेबिलिटी

ब्राउज़र, इंटरऑपरेबिलिटी की समस्या को हल करने के लिए पहले से ही मिलकर काम कर रहे हैं. पिछले साल Compat 2021 ने कई सुविधाओं के लिए, ब्राउज़र के बीच के अंतर को कम करने में मदद की. इनमें फ़्लेक्स लेआउट में गैप प्रॉपर्टी भी शामिल है. इस साल Interop 2022 का फ़ोकस 15 सुविधाओं पर है. इनमें से कुछ सुविधाओं पर पहले से ही काम चल रहा है.

Interop 2022 डैशबोर्ड पर जाकर, प्रोग्रेस देखी जा सकती है.

मैसेज सेवा

दूसरी समस्या ऐसी है जिसमें मुझे मदद करना पसंद है. जब हम web.dev और developer.chrome.com पर सुविधाओं के बारे में बात करते हैं, तो मैं चाहता हूं कि जब आप हमारा कॉन्टेंट पढ़ें, तो आपको सुविधाओं की स्थिति के बारे में साफ़ तौर पर पता चले. साथ ही, हम सहायता से जुड़ी समस्याओं को हल करने के लिए व्यावहारिक तरीके उपलब्ध कराएं.

हमने कई बुनियादी कोर्स लॉन्च किए हैं. आने वाले समय में, हम और भी कोर्स लॉन्च करेंगे. इन कोर्स की मदद से, आपको वेब प्लैटफ़ॉर्म की मुख्य टेक्नोलॉजी का इस्तेमाल करके, आधुनिक वेब के लिए ऐप्लिकेशन बनाने का तरीका सीखने में मदद मिलती है. चेक आउट:

हम इस साइट पर मौजूद कॉन्टेंट को उन चीज़ों पर फ़ोकस करने की कोशिश कर रहे हैं जिन्हें सुरक्षित तरीके से इस्तेमाल किया जा सकता है. हम अब भी इस पर काम कर रहे हैं. हालांकि, आने वाले महीनों में आपको इस बदलाव का असर दिखना शुरू हो जाएगा.

हम Open Web Docs प्रोजेक्ट को सपोर्ट करके, ओपन वेब दस्तावेज़ों में भी योगदान देते हैं. इससे यह पक्का होता है कि हमारे पास MDN पर बेहतरीन दस्तावेज़ मौजूद हों. साथ ही, ब्राउज़र के साथ काम करने से जुड़ा अप-टू-डेट डेटा भी हो. इसके बाद, हम इस डेटा का इस्तेमाल web.dev पर करते हैं, ताकि सुविधाओं के लिए सहायता दिखाई जा सके. फ़िलहाल, फ़्लेक्स लेआउट में gap की सुविधा उपलब्ध है.

Browser Support

  • Chrome: 84.
  • Edge: 84.
  • Firefox: 63.
  • Safari: 14.1.

अगर आपको वेब के लिए Chrome के विज़न के बारे में ज़्यादा जानना है, तो हमारी सिस्टर साइट developer.chrome.com पर जाएं. यहां आपको उन चीज़ों के बारे में भी जानकारी मिलेगी जिन्हें हम ओरिजिन और डेवलपर ट्रायल में एक्सपेरिमेंट कर रहे हैं. यहां मौजूद कॉन्टेंट, एक्सपेरिमेंट के तौर पर हो सकता है या फ़िलहाल सिर्फ़ Chrome पर काम करता हो. हालांकि, हमें खुशी होगी कि आप इसे एक्सप्लोर करें और सुझाव/राय दें या शिकायत करें.

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