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

वेब के लिए निर्माण करना आसान बनाना.

Rachel Andrew

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

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

समस्या वाली प्रॉपर्टी के उदाहरण के तौर पर, gap प्रॉपर्टी की मदद से, grid या flex आइटम या 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) के तौर पर 'सही है' दिखेगा.

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

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

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

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

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

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

समस्याएं

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

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

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

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

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

मैसेज सेवा

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

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

• सीएसएस सीखना
• फ़ॉर्म के बारे में जानकारी
• डिज़ाइन के बारे में जानें
• पीडब्ल्यूए के बारे में जानें

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

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

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

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

फ़ोटो: क्रिस्टोफ़र मैक्समिलियन.