कुछ ऐसी दिलचस्प सुविधाओं के बारे में जानें जो मई 2024 में, स्टेबल और बीटा वर्शन वाले वेब ब्राउज़र में मिली हैं.
स्थायी ब्राउज़र रिलीज़
मई 2024 में, Firefox 126, Safari 17.5, और Chrome 125 स्टेबल हो गए. इस पोस्ट में, वेब प्लैटफ़ॉर्म में जोड़ी गई नई सुविधाओं के बारे में बताया गया है.
सीएसएस ऐंकर पोज़िशनिंग
Chrome 125 में सीएसएस ऐंकर पोज़िशनिंग शामिल है. इसकी मदद से, पेज पर मौजूद एक या उससे ज़्यादा एलिमेंट (ऐंकर) को, JavaScript के इस्तेमाल के बिना जानकारी वाले तरीके से टेदर किया जा सकता है. जब ऐंकर को स्क्रोल किया जा सकता है, तब ऐंकर पोज़िशनिंग बेहतर तरीके से काम करती है. इसका एक सामान्य उदाहरण है पॉपओवर की जगह तय करना. जैसे, उसे शुरू करने वाले एलिमेंट के बगल में टूलटिप या एक 'चुनें' मेन्यू और उसके विकल्पों की सूची.
ज़्यादा जानकारी के लिए, पेश है सीएसएस ऐंकर पोज़िशनिंग एपीआई पढ़ें.
सीएसएस के स्टेप्ड वैल्यू फ़ंक्शन—round(), mod(), और rem()
Chrome 125 में स्टेप्ड वैल्यू फ़ंक्शन भी शामिल हैं. इसका मतलब है कि अब ये फ़ंक्शन बेसलाइन के नए उपलब्ध हैं. स्टेप्ड वैल्यू फ़ंक्शन, round(), mod(), और rem(), दी गई वैल्यू को किसी अन्य "चरण वैल्यू" के मुताबिक बदलते हैं.
ज़्यादा जानकारी के लिए, सीएसएस के स्टेप्ड वैल्यू के मैथ फ़ंक्शन को अब बेसलाइन 2024 में शामिल किया गया है.
light-dark() फ़ंक्शन
साथ ही, 'बेसलाइन न्यूली उपलब्ध' में शामिल होने के लिए सीएसएस कलर फ़ंक्शन light-dark() है, जो Safari 17.5 में है.
light-dark() एक ऐसा फ़ंक्शन है जो दो आर्ग्युमेंट स्वीकार करता है. दोनों आर्ग्युमेंट <color> होने चाहिए. दोनों में से किसी एक को, इस्तेमाल की गई कलर स्कीम के हिसाब से चुना जाता है.
- अगर इस्तेमाल की गई कलर स्कीम
lightया अज्ञात है, तो पहली वैल्यू की कैलकुलेट की गई वैल्यू दिखाई जाती है. - अगर इस्तेमाल की गई कलर स्कीम
darkहै, तो दूसरे कलर की कैलकुलेट की गई वैल्यू दिखाई जाती है.
लाइट-डार्क() के साथ सीएसएस कलर-स्कीम-डिपेंडेंट कलर में ज़्यादा पढ़ें.
स्क्रीन वेक लॉक एपीआई
Firefox 126 में लैंडिंग, Screen वेक लॉक एपीआई का इस्तेमाल किया जाता है. यह एक अन्य सुविधा है, जो अब बेसलाइन न्यूली उपलब्ध का हिस्सा है. यह एपीआई, डिवाइस को स्क्रीन की रोशनी कम होने और स्क्रीन लॉक होने से रोकने का तरीका है.
स्क्रीन वेक लॉक एपीआई की मदद से जगाएं में, इस सुविधा को इस्तेमाल करने का तरीका जानें.
Compute Pressure API
Compute Pressure API, हाई-लेवल स्थितियां देता है. ये स्थितियां, सिस्टम पर मौजूद सीपीयू के लोड को दिखाती हैं. इसकी मदद से, लागू करने के लिए मौजूद हार्डवेयर मेट्रिक का सही इस्तेमाल किया जा सकता है. इससे यह पक्का किया जाता है कि जब तक सिस्टम पर किसी तरह का दबाव न हो, तब तक उपयोगकर्ता उसे प्रोसेस करने की सभी सुविधाओं का फ़ायदा ले सकें.
यह सुविधा Chrome 125 में उपलब्ध है. इस एपीआई के डिज़ाइन और इसे लागू करने का काम Intel ने किया है. इससे वीडियो कॉन्फ़्रेंसिंग ऐप्लिकेशन, सुविधाओं और परफ़ॉर्मेंस के बीच डाइनैमिक तौर पर संतुलन बना पाएंगे.
The Compute Pressure API के दस्तावेज़ पढ़ें.
@starting-style नियम
Safari 17.5 में @starting-style नियम शामिल है. सीएसएस के इस नियम की मदद से, आप ऐसी स्टाइल लागू कर सकते हैं जिसे पेज पर एलिमेंट के खुलने से पहले ब्राउज़र देख सकता है. ऐसा एंट्री ऐनिमेशन के लिए, ज़रूरत पड़ने पर किया जा सकता है.
@starting-style नियम, आसानी से एंट्री और एग्ज़िट ऐनिमेशन के लिए चार नई सीएसएस सुविधाओं में शामिल है.
बीटा ब्राउज़र की रिलीज़
ब्राउज़र के बीटा वर्शन में आपको उन चीज़ों की झलक मिलती है जो ब्राउज़र के अगले स्टेबल वर्शन में होंगी. यह नई सुविधाओं या हटाए गए कॉन्टेंट को टेस्ट करने का अच्छा समय है. इससे दुनिया में आपकी साइट के रिलीज़ होने से पहले ही आपकी साइट पर इसका असर पड़ सकता है. नए बीटा वर्शन Firefox 127 और Chrome 126 हैं. इन रिलीज़ के साथ-साथ, प्लैटफ़ॉर्म को कई बेहतरीन सुविधाएं भी मिलती हैं. पूरी जानकारी के लिए प्रॉडक्ट की जानकारी देखें. यहां कुछ हाइलाइट दिए गए हैं.
Chrome 126 में, एक जैसे ऑरिजिन नेविगेशन के लिए, क्रॉस-दस्तावेज़ व्यू ट्रांज़िशन शामिल हैं. पहले आपको व्यू ट्रांज़िशन एपीआई का इस्तेमाल करने के लिए, अपनी वेबसाइट को एसपीए में फिर से जोड़ना पड़ता था. अब ऐसा नहीं होता है. एक ही ऑरिजिन वाले नेविगेशन के लिए, व्यू ट्रांज़िशन की सुविधा अब डिफ़ॉल्ट रूप से चालू है. एक ही ऑरिजिन वाले दो अलग-अलग दस्तावेज़ों के बीच व्यू ट्रांज़िशन बनाया जा सकता है.
Firefox 127 में JavaScript सेट के अन्य तरीके—intersection(), union(), difference(),
symmetricDifference(),isSubsetOf(), isSupersetOf(), और isDisjointFrom() शामिल हैं.