जनवरी में वेब प्लैटफ़ॉर्म पर नई सुविधाएं

कुछ दिलचस्प सुविधाओं के बारे में जानें, जो जनवरी 2024 में, स्टेबल और बीटा वर्शन वाले वेब ब्राउज़र पर मिली हैं.

रेचल ऐंड्रू

स्थायी ब्राउज़र रिलीज़

जनवरी 2024 में, Firefox 122, Chrome 121, और Safari 17.3 स्टेबल हो गया. इस पोस्ट में, वेब प्लैटफ़ॉर्म में जोड़ी गई नई सुविधाओं के बारे में बताया गया है.

<select> में <hr>

Firefox 122 में <hr> एलिमेंट को <select> एलिमेंट के चाइल्ड एलिमेंट के तौर पर जोड़ा जाता है. इसकी मदद से, कई विकल्पों वाली चुनिंदा सूचियों को आसानी से पढ़ा जा सकता है. यह सुविधा सभी मुख्य ब्राउज़र इंजन के साथ काम करती है. हालांकि, इस बात पर ध्यान देना ज़रूरी है कि फ़िलहाल कोई भी ब्राउज़र, <hr> को सुलभता ट्री के संपर्क में नहीं दिखाता है.

HTMLSelectElement.showPicker

साथ ही, Firefox में <select> एलिमेंट के लिए, HTMLSelectElement का showPicker() तरीका इस्तेमाल किया जाता है. यह वही पिकर है जो आम तौर पर एलिमेंट चुने जाने पर दिखाया जाता है, लेकिन यह बटन दबाने या दूसरे उपयोगकर्ता इंटरैक्शन से ट्रिगर हो सकता है.

सबसे बड़े एलिमेंट को रेंडर करने में लगने वाला समय (एलसीपी) एपीआई

Firefox 122, LCP API के साथ भी काम करता है. यह परफ़ॉर्मेंस एपीआई, उपयोगकर्ताओं के किसी वेब पेज से इंटरैक्ट करने से पहले, सबसे बड़ी इमेज या टेक्स्ट पेंट करने के समय की जानकारी देता है. एलसीपी के दस्तावेज़ में, एलसीपी के बारे में ज़्यादा जानें.

सीएसएस स्क्रोलबार प्रॉपर्टी

Chrome 121 में, स्क्रोलबार प्रॉपर्टी scrollbar-color और scrollbar-width का इस्तेमाल किया जा सकता है. इस बारे में ज़्यादा जानने के लिए, लेख स्क्रोलबार की स्टाइलिंग देखें.

सीएसएस font-palette ऐनिमेशन

font-palette प्रॉपर्टी की मदद से, कलर फ़ॉन्ट को रेंडर करने के लिए, कोई पैलेट चुना जा सकता है. इस प्रॉपर्टी में अब ऐनिमेशन काम करता है, इसलिए पैलेट के बीच स्विच करना, चुने गए दो पैलेट के बीच आसान ट्रांज़िशन बन जाता है.

ArrayBuffer के transfer() और transferToFixedLength() तरीके

Firefox में ArrayBuffer की JavaScript transfer() और transferToFixedLength() तरीके शामिल होते हैं. transfer() वाला तरीका, मौजूदा ArrayBuffer की तरह ही बाइट कॉन्टेंट वाला नया ArrayBuffer बनाता है. इसके बाद, यह मूल ArrayBuffer को अलग कर देता है. transferToFixedLength() वाला तरीका ऐसे ही काम करता है, लेकिन यह एक तय साइज़ ArrayBuffer बनाता है.

अनुमान के नियम वाले एपीआई से जुड़े अपडेट

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

Chrome 121 में दस्तावेज़ के नियमों के साथ काम करता है: वे अनुमान लगाने के नियमों के सिंटैक्स का एक्सटेंशन हैं. इसकी मदद से, ब्राउज़र किसी पेज के एलिमेंट से, अनुमान पर आधारित यूआरएल लोड होने के लिए, यूआरएल की सूची हासिल कर सकता है. दस्तावेज़ के नियमों में ये शर्तें शामिल हो सकती हैं कि इनमें से कौनसे लिंक इस्तेमाल किए जा सकते हैं. इसके साथ, नए "eagerness" फ़ील्ड की मदद से आप पेजों पर अपने-आप प्रीफ़ेच या प्रीरेंडरिंग कर सकते हैं, कर्सर घुमाने पर या माउस को नीचे ले जाने पर.

बीटा ब्राउज़र की रिलीज़

ब्राउज़र के बीटा वर्शन में आपको उन चीज़ों की झलक मिलती है जो ब्राउज़र के अगले स्टेबल वर्शन में होंगी. यह नई सुविधाओं या हटाए गए कॉन्टेंट को टेस्ट करने का अच्छा समय है. इससे दुनिया में आपकी साइट के रिलीज़ होने से पहले ही आपकी साइट पर इसका असर पड़ सकता है. इसके नए बीटा वर्शन हैं:Firefox 123, Chrome 122, और Safari 17.4. इन रिलीज़ के साथ-साथ, प्लैटफ़ॉर्म को कई बेहतरीन सुविधाएं भी मिलती हैं. पूरी जानकारी के लिए प्रॉडक्ट की जानकारी देखें. यहां कुछ हाइलाइट दिए गए हैं.

Firefox 123 के बीटा वर्शन में घोषणात्मक शैडो DOM शामिल है.

साथ ही, Firefox 123 में पहले से लोड होने वाले रिसॉर्स के लिए 103 Early Hints एचटीटीपी जानकारी का रिस्पॉन्स स्टेटस कोड काम करता है. सर्वर पूरा रिस्पॉन्स तैयार करने के दौरान, इन संसाधनों की ज़रूरत पेज को हो सकता है.

Safari 17.4 बीटा में बहुत कुछ है. सीएसएस के लिए, ब्लॉक कंटेनर और टेबल सेल पर @scope, align-content, ::grammar-error और ::spelling-error स्यूडो एलिमेंट के साथ-साथ अन्य चीज़ों के लिए सहायता उपलब्ध है.

फ़ॉर्म में, फ़ॉर्म कंट्रोल में वर्टिकल राइटिंग मोड की सुविधा, <input type="date"> के लिए showPicker() तरीके, और iOS पर <select> में <hr> के लिए सहायता.

JavaScript को कुछ नई सुविधाएं भी मिलती हैं, जो ArrayBuffer के detached(), transfer(), और transferToFixedLength() तरीकों के साथ काम करती हैं. साथ ही, इसमें दूसरी सुविधाएं भी शामिल हैं.

Chrome 122 के बीटा वर्शन में, Async Clipboard API के read() तरीके में, unsanitized का विकल्प शामिल है. इससे, बिना सैनिटाइज़ किए हुए एचटीएमएल फ़ॉर्मैट को वापस पाया जा सकता है. JavaScript के लिए, इटरेटर हेल्पर और पहले से मौजूद Set क्लास के लिए नए तरीके उपलब्ध हैं.

साथ ही, Chrome 122 में स्टोरेज बकेट एपीआई है. इसका मकसद, ज़्यादा मेमोरी के दबाव में लगातार स्टोरेज को हटाते समय, ज़्यादा सटीक तरीके से काम करना है.