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

साल के आखिरी छह महीनों में, यह जानना दिलचस्प होगा कि Interop 2024 ने इस साल वेब इंटरऑपरेबिलिटी को कैसे बेहतर बनाया है.

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

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

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

पॉपओवर

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

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

<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>

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 125.
  • Safari: 17.

Source

ज़्यादा जानने के लिए, Popover API के बेसलाइन में शामिल होने के बारे में पढ़ें. कई ऐप्लिकेशन में पहले से ही पॉपओवर का इस्तेमाल किया जा रहा है. Tokopedia ने इस सुविधा का फ़ायदा उठाकर, React कोड की संख्या को काफ़ी कम कर दिया. इसके लिए, उन्होंने उन ब्राउज़र के लिए polyfill का इस्तेमाल किया जो इस सुविधा के साथ काम नहीं करते.

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

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

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

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

Browser Support

  • Chrome: 85.
  • Edge: 85.
  • Firefox: 128.
  • Safari: 16.4.

Source

ज़्यादा जानने के लिए, @property: CSS वैरिएबल को बेहतर बनाने के बारे में जानकारी लेख पढ़ें.

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

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

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

Browser Support

  • Chrome: 127.
  • Edge: 127.
  • Firefox: 3.
  • Safari: 16.4.

Source

text-wrap: balance

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

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

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 121.
  • Safari: 17.5.

Source


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