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

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

रेचल एंड्रू

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

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

समस्या वाली प्रॉपर्टी के उदाहरण के तौर पर, gap प्रॉपर्टी की मदद से, ग्रिड या फ़्लेक्स आइटम या मल्टीकोल कंटेनर में मौजूद कॉलम के बीच गैप किया जा सकता है. हमारे पास लंबे समय से 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 में कई सुविधाओं के लिए सहायता उपलब्ध कराने में मदद की गई. इन सुविधाओं में फ़्लेक्स लेआउट में गैप प्रॉपर्टी भी शामिल है. इस साल इंटरऑप 2022 में 15 सुविधाओं पर फ़ोकस किया गया है. इनमें से कुछ सुविधाओं पर पहले ही कोई बदलाव किया जा चुका है.

Interop 2022 डैशबोर्ड पर, प्रोग्रेस फ़ॉलो की जा सकती है.

मैसेज सेवा

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

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

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

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

ब्राउज़र सहायता

  • 84
  • 84
  • 63
  • 78 जीबी में से

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

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

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