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

इससे वेब के लिए ऐप्लिकेशन बनाना आसान हो जाता है.

Rachel Andrew

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

Flexbox gap

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

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

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

Firefox ने अक्टूबर 2018 में, फ़्लेक्स लेआउट के लिए इस प्रॉपर्टी को शिप किया था. यह सुविधा, जुलाई 2020 तक Chrome में उपलब्ध नहीं थी. इसके बाद, अप्रैल 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 के विज़न और ओरिजिन और डेवलपर के ट्रायल में किए जा रहे एक्सपेरिमेंट के बारे में ज़्यादा जानना है, तो आपको हमारी सहयोगी साइट developer.chrome.com पर ज़्यादा जानकारी मिलेगी. वहां मौजूद कॉन्टेंट एक्सपेरिमेंटल हो सकता है या फ़िलहाल सिर्फ़ Chrome में काम कर सकता है. हालांकि, हम चाहते हैं कि आप इसे एक्सप्लोर करें और हमें अपना सुझाव/राय दें या शिकायत करें.

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

क्रिस्टोफ़र मैक्सिमिलियन की ली गई फ़ोटो.