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