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

कुछ दिलचस्प सुविधाओं के बारे में जानें, जिन्हें मई 2023 में, स्टेबल और बीटा वर्शन वाले वेब ब्राउज़र पर इस्तेमाल किया गया.

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

मई 2023 में, Firefox 113, Chrome 113, Chrome 114, और Safari 16.5 स्टेबल हो गया. आइए, देखते हैं कि वेब प्लैटफ़ॉर्म के लिए इसका क्या मतलब है.

WebGPU

Chrome 113 में WebGPU शामिल है, जो वेब के लिए WebGL और WebGL 2 के ग्राफ़िक एपीआई का उत्तराधिकारी है. इसमें कई मॉडर्न सुविधाएं मिलती हैं, जैसे कि जीपीयू कंप्यूट, जीपीयू हार्डवेयर का कम ऐक्सेस, एक ही ग्राफ़िक डिवाइस से कई कैनवस पर रेंडर करने की सुविधा, और बेहतर और अनुमानित परफ़ॉर्मेंस.

पहले पक्ष के सेट

पहले पक्ष के सेट (एफ़पीएस), प्राइवसी सैंडबॉक्स का हिस्सा है. यह संगठनों के लिए यह बताने का एक तरीका है कि साइटों के बीच एक-दूसरे से संबंध हैं. इससे ब्राउज़र यह तय कर सकते हैं कि किसी सेट में मौजूद साइटों के लिए, तीसरे पक्ष की सीमित कुकी का ऐक्सेस कब दिया जाए. FPS (फ़्रेम प्रति सेकंड) ने Chrome 113 में कुछ लोगों के लिए रिलीज़ करने की सुविधा शुरू की.

सीएसएस मीडिया की सुविधाएं और बहुत कुछ

सीएसएस के लिए, Chrome 113 में overflow-inline और overflow-block मीडिया सुविधाएं शामिल हैं.

साथ ही, update की मीडिया सुविधा.

इसमें linear() ईज़िंग फ़ंक्शन भी शामिल है, जिसके बारे में आपको linear() ईज़िंग फ़ंक्शन की मदद से सीएसएस में जटिल ऐनिमेशन कर्व बनाना लेख में ज़्यादा जानकारी मिल सकती है.

सीएसएस कलर लेवल 4 की सुविधाएं

Firefox 113 में color(), lab(), lch(), oklab(), oklch(), और color-mix() फ़ंक्शन वाले नोटेशन के साथ-साथ, फ़ोर्स-कलर अडजस्ट की गई प्रॉपर्टी भी शामिल है. इसका मतलब है कि अब तीनों मुख्य इंजन के लिए, नए कलर स्पेस और फ़ंक्शन इस्तेमाल किए जा सकते हैं. हाई डेफ़िनिशन सीएसएस कलर गाइड में, आप इन कलर स्पेस और फ़ंक्शन के बारे में ज़्यादा जान सकते हैं.

:nth-child() आइटम के चुने जाने पर ज़्यादा कंट्रोल

Firefox 113 में, :nth-child() और nth-last-child() में भी सिलेक्टर की सूची पास करने की सुविधा दी जाती है. इस बारे में ज़्यादा जानें. साथ ही, S सिंटैक्स के साथ :nth-child() चुनने पर ज़्यादा कंट्रोल वाली पोस्ट में मौजूद उदाहरण देखें.

संपीड़न स्ट्रीम API

अब Firefox 113 में शामिल होने की वजह से सभी तीन मुख्य इंजन के लिए यह सुविधा उपलब्ध है, Compressions Streams API, स्ट्रीम के कंप्रेस और डिकंप्रेस करने में मदद करता है. इसका मतलब है कि JavaScript ऐप्लिकेशन को अब कंप्रेशन लाइब्रेरी को बंडल करने की ज़रूरत नहीं है.

सीएसएस नेस्टिंग

Safari 16.5 में ज़्यादातर समस्याएं हल हो जाती हैं. हालांकि, नए नेस्टिंग सिलेक्टर > की मदद से, सीएसएस नेस्टिंग के लिए सहायता भी जोड़ी गई है, जिसका इस्तेमाल Nest से जुड़े स्टाइल के नियमों को इस तरह से करने के लिए किया जाता है कि प्री-प्रोसेसर का इस्तेमाल करने वाले डेवलपर को यह जानकारी मिल सके:

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

हेडलाइन को text-wrap: balance के साथ बैलेंस करें

Chrome 114 से text-wrap: balance का इस्तेमाल किया जा सकता है. इसकी मदद से, हेडलाइन के बीच संतुलन बनाए रखने के साथ-साथ फ़ाइनल लाइन में एक भी शब्द डालने की समस्या से बचा जा सकता है. इससे आपको बेहतर और पढ़ने में मदद मिलेगी. इस बारे में ज़्यादा जानने के लिए, सीएसएस टेक्स्ट-रैप: बैलेंस पर जाएं.

सीएचआईपीएस: कुकीज़ हैविंग इंडिपेंडेंट पार्टिशन्ड स्टेट

तीसरे पक्ष की कुकी को रोकने के लिए, CHIPS की मदद से तीसरे पक्ष की कुकी को ऑप्ट-इन किया जा सकता है. इन कुकी के लिए, नई कुकी एट्रिब्यूट Partitioned का इस्तेमाल किया जाता है. इस कुकी को टॉप लेवल साइट के हिसाब से बांटा जाता है. CHIPS, Chrome 114 में उपलब्ध है.

पॉपओवर एपीआई

साथ ही, Chrome 114 में पॉपओवर एपीआई है. इसकी मदद से, कुछ समय के लिए दिखने वाले यूज़र इंटरफ़ेस (यूआई) एलिमेंट आसानी से बनाए जा सकते हैं. ये एलिमेंट, अन्य वेब ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) के सबसे ऊपर दिखते हैं.

इनमें यूज़र-इंटरैक्टिव एलिमेंट शामिल हैं. जैसे, ऐक्शन मेन्यू, फ़ॉर्म एलिमेंट के सुझाव, कॉन्टेंट पिकर, और पढ़ाने के लिए यूज़र इंटरफ़ेस (यूआई).

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

ज़्यादा जानकारी के लिए, पेश है पॉपओवर एपीआई लेख पढ़ें.

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

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

Chrome 115 में सीएसएस display प्रॉपर्टी के लिए एक से ज़्यादा वैल्यू शामिल हैं. इसका मतलब है कि display: flex, display: block flex हो जाता है और display: block, display: block flow हो जाता है. सिंगल वैल्यू को लेगसी कीवर्ड के तौर पर बनाए रखा जाता है और Chrome स्टेबल में एक बार ऐसा करने से, सभी इंजन के लिए एक से ज़्यादा वैल्यू उपलब्ध हो जाती हैं.

साथ ही, Chrome 115 में वेब ऐनिमेशन के निर्देशों के लिए ScrollTimeline और ViewTimeline एक्सटेंशन हैं. इनकी मदद से, सीएसएस और JavaScript के ज़रिए स्क्रोल करके चलने वाले ऐनिमेशन चालू किए जा सकते हैं.

Firefox 114 में WebTransport API शामिल है, जो WebSockets का एक मॉडर्न अपडेट है. इससे कई स्ट्रीम, एकतरफ़ा स्ट्रीम, और आउट-ऑफ़-ऑर्डर डिलीवरी की सुविधा मिलती है.

यह वेब सीरीज़ में नई सुविधा का हिस्सा है