Compat 2021: वेब पर काम करने से जुड़ी पांच मुख्य समस्याओं को दूर करना

Google, ब्राउज़र के अन्य वेंडर और इंडस्ट्री पार्टनर के साथ मिलकर काम कर रहा है, ताकि वेब डेवलपर को ब्राउज़र के साथ काम करने से जुड़ी पांच मुख्य समस्याओं को ठीक किया जा सके: सीएसएस फ़्लेक्सबॉक्स, सीएसएस ग्रिड, position: sticky, aspect-ratio, और सीएसएस ट्रांसफ़ॉर्म.

फ़िलिप जेगेनस्टेड

रॉबर्ट निमन

Google, वेब डेवलपर के लिए ब्राउज़र के साथ काम करने से जुड़ी पांच मुख्य समस्याओं को ठीक करने के लिए, अन्य ब्राउज़र वेंडर और इंडस्ट्री पार्टनर के साथ काम कर रहा है. इसमें सीएसएस फ़्लेक्सबॉक्स, सीएसएस ग्रिड, position: sticky, aspect-ratio, और सीएसएस ट्रांसफ़ॉर्म पर फ़ोकस किया गया है. शामिल होने का तरीका जानने के लिए, योगदान देने का तरीका देखें.

बैकग्राउंड

वेब पर डिवाइस का इस्तेमाल करना, हमेशा से डेवलपर के लिए बड़ी चुनौती रही है. पिछले कुछ सालों में, Google और Mozilla और Microsoft जैसे अन्य पार्टनरों ने, वेब डेवलपर के लिए सबसे ज़्यादा मुश्किल समस्याओं के बारे में ज़्यादा जानने का काम किया है. इनका मकसद, इस स्थिति को बेहतर बनाने के लिए, हमारे काम को बढ़ावा देना और प्राथमिकता तय करना है. यह प्रोजेक्ट Google के डेवलपर संतुष्टि (DevSAT) काम से जुड़ा है. इसे बड़े स्तर पर 2019 और 2020 में एमडीएन डीएनए (डेवलपर की ज़रूरत का आकलन) सर्वे तैयार करके शुरू किया गया था. साथ ही, एमडीएन ब्राउज़र कंपैटिबिलिटी रिपोर्ट 2020 में दी गई गहराई से रिसर्च के बाद भी इस प्रोजेक्ट को शुरू किया गया. सीएसएस की स्थिति और जेएस की स्थिति सर्वे जैसे अलग-अलग चैनलों के ज़रिए, ज़्यादा रिसर्च की गई है.

साल 2021 में, हम उन पांच मुख्य क्षेत्रों में ब्राउज़र के साथ काम करने से जुड़ी समस्याओं को खत्म करना चाहते हैं जिनके लिए डेवलपर भरोसेमंद हैं. इस कोशिश को #Compat 2021 कहा जाता है.

चुनें कि किस पर फ़ोकस करना है

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

कम्पैटबिलटी प्रोजेक्ट में कई शर्तों का इस्तेमाल होता है, जो इस बात पर असर डालते हैं कि किन क्षेत्रों को प्राथमिकता देनी है और कुछ:

• सुविधा का इस्तेमाल. उदाहरण के लिए, सभी पेज व्यू के 75% में फ़्लेक्सबॉक्स का इस्तेमाल किया जाता है. साथ ही, एचटीटीपी संग्रह में इसका इस्तेमाल तेज़ी से बढ़ रहा है.
• बग की संख्या (Chromium, Gecko, WebKit) और Chromium में कितने स्टार हैं.

• सर्वे के नतीजे:

  • एमडीएन डीएनए सर्वे
  • एमडीएन ब्राउज़र के साथ काम करने से जुड़ी रिपोर्ट
  • सीएसएस की स्थिति की सबसे ज़्यादा जानी-पहचानी और इस्तेमाल की गई सुविधाएं

• web-platform-tests से मिले नतीजों की जांच करें. उदाहरण के लिए, wpt.fyi पर flexbox.

• क्या मैं सबसे ज़्यादा खोजी गई सुविधाओं का इस्तेमाल कर सकता/सकती हूं.

वे पांच मुख्य क्षेत्र जिन पर साल 2021 में सबसे ज़्यादा ध्यान दिया गया

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

यहां उन समस्याओं के बारे में बताया गया है जिन्हें 2021 में ठीक करने का वादा किया गया है.

सीएसएस फ़्लेक्सबॉक्स

सीएसएस फ़्लेक्सबॉक्स को वेब पर बड़े पैमाने पर इस्तेमाल किया जाता है. हालांकि, इसके बावजूद डेवलपर के लिए इसे इस्तेमाल करने में कुछ बड़ी चुनौतियां हैं. उदाहरण के लिए, Chromium और WebKit, दोनों में auto-height फ़्लेक्स कंटेनर में समस्याएं हैं. इस वजह से, इमेज के साइज़ गलत हो रहे हैं.

गड़बड़ियों की वजह से, इमेज का साइज़ गलत है.

सही साइज़ की इमेज.
फ़ोटो, अलिरेज़ा महमूदी ने ली है.

Igalia की flexbox Cats ब्लॉग पोस्ट, और कई उदाहरणों के साथ इन समस्याओं के बारे में गहराई से बता रही है.

इसे प्राथमिकता क्यों दी गई है

• सर्वे: एमडीएन ब्राउज़र के साथ काम करने की रिपोर्ट में मौजूद सबसे बड़ी समस्या. इसे सीएसएस की स्थिति में सबसे ज़्यादा इस्तेमाल किया जाता है.
• टेस्ट: सभी ब्राउज़र में 85% पास
• इस्तेमाल: पेज व्यू में से 75% व्यू, एचटीटीपी संग्रह में तेज़ी से बढ़ रहे हैं

सीएसएस ग्रिड

CSS Grid आधुनिक वेब लेआउट के लिए एक मुख्य बिल्डिंग ब्लॉक है. यह कई पुरानी तकनीकों और समाधानों की जगह ले रहा है. जैसे-जैसे इसका इस्तेमाल बढ़ रहा है, वैसे-वैसे इसे मज़बूत बनाना होगा, ताकि अलग-अलग ब्राउज़र के बीच अंतर होने से उन्हें ऐसा करने से रोका न जा सके. ग्रिड लेआउट को ऐनिमेट करने की सुविधा उपलब्ध नहीं है. यह Gecko में काम करता है. हालांकि, Chromium या WebKit का इस्तेमाल नहीं किया जा सकता. समर्थित होने पर, इस तरह के प्रभाव संभव होते हैं:

चेन हुई जिंग का ऐनिमेशन वाला शतरंज डेमो.

इसे प्राथमिकता क्यों दी गई है

• सर्वे: एमडीएन ब्राउज़र कंपैटिबिलिटी रिपोर्ट में रनर-अप. इस रिपोर्ट को सीएसएस ऑफ़ सीएसएस में कम इस्तेमाल किया जाता है.
• टेस्ट: सभी ब्राउज़र में 75% पास
• इस्तेमाल: 8% और लगातार बढ़ रहे, HTTP Archive में थोड़ी बढ़ोतरी

ध्यान दें: सबग्रिड जैसी नई सुविधा डेवलपर के लिए अहम है, लेकिन यह इस खास कोशिश का हिस्सा नहीं है. आगे बढ़ने के लिए, MDN पर सबग्रिड कमैट देखें.

सीएसएस की स्थिति: स्टिकी

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

"TablesNG" के साथ Chromium

Gecko

WebKit

रॉब फ़्लैक का स्टिकी टेबल हेडर डेमो देखें.

इसे प्राथमिकता क्यों दी गई है

• सर्वे: यह सीएसएस की स्थिति में काफ़ी लोकप्रिय है/इस्तेमाल किया जाता है. साथ ही, इसे कई बार MDN ब्राउज़र कंपैटिबिलिटी रिपोर्ट में दिखाया गया है
• टेस्ट: सभी ब्राउज़र में 66% पास
• इस्तेमाल: 8%

सीएसएस की आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) प्रॉपर्टी

नई aspect-ratio सीएसएस प्रॉपर्टी की मदद से, एलिमेंट की चौड़ाई-ऊंचाई के अनुपात को एक जैसा बनाए रखना आसान हो जाता है. इससे लोकप्रिय padding-top हैक की ज़रूरत नहीं पड़ती:

पैडिंग-टॉप का इस्तेमाल करना

.container {
  width: 100%;
  padding-top: 56.25%;
}

आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) का इस्तेमाल करना

.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

ऐसा होने की वजह से, इसे बड़े पैमाने पर इस्तेमाल किए जाने की उम्मीद होती है. साथ ही, हम यह पक्का करना चाहते हैं कि यह सभी सामान्य स्थितियों और सभी ब्राउज़र में काम करता हो.

इसे प्राथमिकता क्यों दी गई है

• सर्वे: सीएसएस में पहले से ही जाने-माने लोग हैं, लेकिन इनका इस्तेमाल बड़े पैमाने पर नहीं किया जाता
• टेस्ट: सभी ब्राउज़र में 27% पास
• इस्तेमाल: 3% और बढ़ने की उम्मीद

सीएसएस ट्रांसफ़ॉर्म

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

Chromium (बाएं), Gecko (बीच के) और वेबकिट (दाएं) में कार्ड फ़्लिप इफ़ेक्ट. गड़बड़ी की टिप्पणी से, डेविड बैरन का डेमो.

इसे प्राथमिकता क्यों दी गई है

• सर्वे: स्टेट ऑफ़ सीएसएस में काफ़ी लोकप्रिय और इस्तेमाल किया जाने वाला
• टेस्ट: सभी ब्राउज़र में 55% पास
• इस्तेमाल: 80%

योगदान कैसे दिया जा सकता है और इसे कैसे फ़ॉलो किया जा सकता है

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

यहां web.dev पर, प्रोग्रेस के बारे में समय-समय पर अपडेट मिलते रहेंगे. साथ ही, Compat 2021 डैशबोर्ड में जाकर, हर अहम क्षेत्र में हुई प्रोग्रेस को फ़ॉलो किया जा सकता है.

The Compat 2021 डैशबोर्ड (स्क्रीनशॉट 16 नवंबर, 2021 को लिया गया है).

हमें उम्मीद है कि विश्वसनीयता और इंटरऑपरेबिलिटी को बेहतर बनाने के लिए, ब्राउज़र वेंडर की इस कोशिश से आपको वेब पर शानदार चीज़ें बनाने में मदद मिलेगी!