साल के बीच में, इंटरऑप 2024 का अपडेट

Rachel Andrew

साल के दूसरे छमाही में आने के बाद, यह देखने का सही समय है कि कैसे इंटरऑप 2024 की वजह से, इस साल वेब इंटरऑपरेबिलिटी में सुधार हुआ है.

हमने कहां से शुरुआत की

साल की शुरुआत में, Chrome का प्रयोग के तौर पर ब्राउज़र के लिए सपोर्ट स्कोर 83 था.

स्कोर-इंटरऑप: 65, जांच: 0, Chrome कैनरी: 83, Edge Dev: 82, Firefox Nightly: 80, Safari टेक्नोलॉजी प्रीव्यू: 79 वाला डैशबोर्ड.
फ़रवरी 2024 में इंटरऑप 2024 डैशबोर्ड.
स्कोर-इंटरऑप: 75, जांच: 5, Chrome कैनरी: 90, Edge Dev: 89, Firefox Nightly: 87, Safari टेक्नोलॉजी प्रीव्यू: 88 वाला डैशबोर्ड.
इंटरऑप 2024 डैशबोर्ड, जून 2024 के आखिर में होगा.

आज यह स्कोर 90 है और जून में Chrome 126 की रिलीज़ के बारे में बताया. एक्सपेरिमेंट के तौर पर कुल इंटरऑप स्कोर में बढ़ोतरी हुई है 10 पॉइंट पाएं. इस पोस्ट में ऐसी कुछ सुविधाओं के बारे में बताया गया है उस स्कोर को बेहतर बनाने में मदद मिलेगी.

पॉपओवर

पॉपओवर, अप्रैल 2024 में बेसलाइन न्यूली उपलब्ध का हिस्सा बन गया था. पॉपओवर है दिलचस्प है, क्योंकि यूआई की इतनी सारी सुविधाएं आपको बनाने की ज़रूरत है—उदाहरण के लिए, मेन्यू, टूलटिप, चुनने के लिए ओवरले, और सिखाने के यूज़र इंटरफ़ेस (यूआई)—ये कुछ ऐसे ऐप्लिकेशन हैं पॉपओवर. पॉपओवर करने से पहले, इनमें से कोई भी सुविधा बनाने में कोड. कोड, यह पक्का करने के लिए कि एक से ज़्यादा एलिमेंट एक साथ न खुले हों या फिर चालू करने के लिए उपयोगकर्ता के एलिमेंट के बाहर क्लिक करने पर, लाइट खारिज हो जाएगी. आपके पास शायद ये चीज़ें भी हों z-index को इस्तेमाल करने में परेशानी हुई. यूज़र इंटरफ़ेस (यूआई) एलिमेंट को बाकी एलिमेंट के ऊपर रखा गया डालें.

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

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.</p>
</div>

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

  • Chrome: 114. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Edge: 114. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 125. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 17. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

इस बारे में ज़्यादा जानने के लिए, बेसलाइन में पॉपओवर एपीआई के बारे में जानें. कई ऐप्लिकेशन में पॉपओवर के फ़ायदे पहले से ही दिख रहे हैं. Tokopedia ने प्रतिक्रिया कोड की मात्रा को काफ़ी कम किया इसके लिए, पॉलीफ़िल का इस्तेमाल करें.

@property के साथ बेहतर कस्टम प्रॉपर्टी

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

@property --myColor {
  syntax: '<color>';
  inherits: false;
  initial-value: hotpink;
}

फ़िलहाल, @property नियम Firefox के प्रयोग के स्कोर को बेहतर बनाता है, इस महीने के आखिर में जब Firefox 128 रिलीज़ होगा, तब स्थिर स्कोर को बढ़ाना. यह टूल, बेसलाइन नया उपलब्ध है.

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

  • Chrome: 85. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 85. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 128. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 16.4. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

ज़्यादा जानने के लिए, @property: अपवाद वाले सीएसएस वैरिएबल देना लेख पढ़ें.

font-size-adjust प्रॉपर्टी

सीएसएस font-size-adjust प्रॉपर्टी की मदद से, लोअरकेस के साइज़ में बदलाव किया जा सकता है अंग्रेज़ी के बड़े अक्षरों के साइज़ के हिसाब से. यह स्थितियों में काम आता है जहां फ़ॉन्ट फ़ॉलबैक हो सकता है, क्योंकि इससे यह पक्का करने में मदद मिलती है कि फ़ॉलबैक फ़ॉन्ट खास तौर पर, छोटे फ़ॉन्ट साइज़ में होनी चाहिए.

फ़िलहाल, font-size-adjust प्रॉपर्टी, एक्सपेरिमेंट के स्कोर में शामिल है हालाँकि, रिलीज़ होने पर स्टेबल स्कोर बढ़ जाएगा. इस महीने Chrome 127 वर्शन पर. यह Baseline Newly उपलब्ध में भी शामिल है.

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

  • Chrome: 127. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 127. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • फ़ायरफ़ॉक्स: 3. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 16.4. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

टेक्स्ट-रैप: संतुलन

text-wrap: balance का इस्तेमाल करने से, ब्राउज़र को सबसे सही संतुलन की पहचान करने का निर्देश मिलता है टेक्स्ट के लिए लाइन रैपिंग. यह ऐसे शीर्षकों के लिए विशेष रूप से उपयोगी होता है, जो उदाहरण के लिए, पंक्ति दो पर किसी एक शब्द के लिए हेडिंग रैप करना.

हाल ही में, यह समस्या Safari पर काम करने लगी है. इसे अन्य ब्राउज़र पर भी ठीक किया जा रहा है यह सुविधा सभी ब्राउज़र पर अच्छी तरह से काम करती है, यह पक्का करने के लिए टेस्ट सफल नहीं रहे हैं.

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

  • Chrome: 114. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Edge: 114. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 121. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 17.5. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

इन प्रमुख सुविधाओं को इंटरऑपरेबल बनाने के अलावा, कई अन्य सुधार किए गए हैं. पास होने वाली हर जांच का मतलब है एक ऐसी इंटरऑपरेबिलिटी समस्या जिसका आप सामना नहीं करेंगे. हम यह देखने के लिए उत्साहित हैं कि साल के आखिर तक वह 100% स्कोर हासिल कर सकता है.