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

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

Philip Jägenstedt

Robert Nyman

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

बैकग्राउंड

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

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

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

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

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

• सुविधा का इस्तेमाल. उदाहरण के लिए, flexbox का इस्तेमाल इसमें किया गया है 75% के कितने प्रतिशत पृष्ठ दृश्य हुए, और HTTP संग्रहित करें.
• गड़बड़ियों की संख्या (Chromium में, गेको, WebKit), और Chromium के लिए देखें कि कितने स्टार हैं.

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

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

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

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

साल 2021 में इन पांच पर सबसे ज़्यादा फ़ोकस

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

यहां वे क्षेत्र बताए गए हैं जिन्हें 2021 में ठीक करने का वादा किया गया था.

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

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

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

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

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

सीएसएस ग्रिड

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

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

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

सीएसएस पोज़िशन: स्टिकी

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

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

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

• सर्वे: राज्य CSS और उसके बाद, में कई बार एमडीएन ब्राउज़र के साथ काम करने से जुड़ी रिपोर्ट
• जांच के आंकड़े: 66% पास सभी ब्राउज़र में
• इस्तेमाल: 8%

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

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

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

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

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

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

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

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

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

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

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

योगदान देने और उसे फ़ॉलो करने का तरीका

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

इससे जुड़ी प्रोग्रेस के बारे में web.dev पर नियमित तौर पर अपडेट मिलते रहेंगे. इसके लिए, ये काम किए जा सकते हैं साथ ही, Compan 2021 में हर फ़ोकस एरिया से जुड़े प्रोग्रेस को देखा जाएगा डैशबोर्ड पर जाएं.

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