कुछ दिलचस्प सुविधाओं के बारे में जानें, जो अगस्त 2022 में, स्टेबल और बीटा वर्शन वाले वेब ब्राउज़र पर मिली हैं.
स्थायी ब्राउज़र रिलीज़
अगस्त में, Firefox 104, Chrome 104, और Chrome 105 स्टेबल हो गए.
अलग-अलग रूप में बदल गया है
Chrome 104 में सीएसएस ट्रांसफ़ॉर्म के लिए अलग-अलग प्रॉपर्टी शामिल हैं. प्रॉपर्टी scale, rotate, और translate हैं. इनका इस्तेमाल करके, ट्रांसफ़ॉर्मेशन के उन हिस्सों को अलग-अलग तय किया जा सकता है.
ऐसा करके Chrome, Firefox और Safari से जुड़ जाता है जो पहले से ही इन प्रॉपर्टी के साथ काम करते हैं.
नया मीडिया क्वेरी सिंटैक्स
Chrome 104 में मीडिया क्वेरी रेंज सिंटैक्स भी शामिल है. यह Firefox से पहले ही भेज दिया गया है और मीडिया क्वेरी को स्ट्रीमलाइन करने में मदद करता है. उदाहरण के लिए, यह मीडिया क्वेरी:
@media (min-width: 400px) {
// Styles for viewports with a width of 400 pixels or greater.
}
तुलना ऑपरेटर का इस्तेमाल करके लिखा जा सकता है:
@media (width >= 400px) {
// Styles for viewports with a width of 400 pixels or greater.
}
कंटेनर से जुड़ी क्वेरी
Chrome 105 एक रोमांचक रिलीज़ है, जिसमें लंबे समय से कंटेनर क्वेरी की सुविधा को वेब प्लैटफ़ॉर्म पर लाया जा रहा है. मीडिया क्वेरी की मदद से, आप व्यूपोर्ट के साइज़ के हिसाब से क्वेरी कर सकते हैं. कंटेनर क्वेरी, कंटेनर के साइज़ के हिसाब से क्वेरी करने का एक तरीका उपलब्ध कराती हैं.
कंटेनर क्वेरी इस्तेमाल करने के लिए, container-type प्रॉपर्टी का इस्तेमाल करके कंटेनमेंट चालू करें.
.card-container {
container-type: inline-size;
}
container-type को inline-size पर सेट करने से, पैरंट के इनलाइन-निर्देश साइज़ के बारे में क्वेरी की जाती है. लैटिन भाषाओं जैसे अंग्रेज़ी में, यह कार्ड की चौड़ाई होगी, क्योंकि टेक्स्ट बाईं से दाईं ओर इनलाइन होता है.
अब हम @container का इस्तेमाल करके, उस कंटेनर का इस्तेमाल करके उसके किसी भी चाइल्ड में स्टाइल लागू कर सकते हैं:
.card {
display: grid;
grid-template-columns: 1fr 1fr;
}
@container (max-width: 400px) {
.card {
grid-template-columns: 1fr;
}
}
कंटेनर क्वेरी के बारे में ज़्यादा जानने के लिए, @container और :has(): Chromium 105 में दो असरदार नए रिस्पॉन्सिव एपीआई लैंडिंग पेज पोस्ट करें.
:has() पैरंट pseudo-class
ऊपर बताई गई पोस्ट में :has() के बारे में भी बताया गया है. यह नई सूडो-क्लास, सीएसएस :has() स्यूडो-क्लास की मदद से, स्थितियों के आधार पर पैरंट एलिमेंट और सिबलिंग को टारगेट किया जा सकता है. :has() फ़ैमिली सिलेक्टर में ज़्यादा जानें.
सैनिटाइज़र एपीआई
Chrome 105 में, Sanitizer API भी है. यह एपीआई, प्लैटफ़ॉर्म में सैनिटाइज़ेशन बनाता है, ताकि क्रॉस-साइट स्क्रिप्टिंग के जोखिम की आशंकाओं को हटाया जा सके.
साथ ही, Chrome 105 में :modal सीएसएस स्यूडो-क्लास है. यह उस एलिमेंट से मैच करता है जो ऐसी स्थिति में है जिसमें उसके बाहर के एलिमेंट के साथ सभी इंटरैक्शन बाहर रखे जाते हैं. उदाहरण के लिए, showModal() एपीआई की मदद से खोला गया <dialog>.
FindLast() और findLastIndex() के तरीके
Firefox 104, Array.prototype.findLast(), Array.prototype.findLastIndex(), TypedArray.prototype.findLast(), और TypedArray.prototype.findLastIndex() के तरीकों के लिए, फ़्लैग के पीछे काम करने का विकल्प देता है. इनका इस्तेमाल, किसी सरणी या टाइप किए गए फ़ंक्शन में दिए गए आखिरी एलिमेंट की वैल्यू और इंडेक्स (क्रमशः) का पता लगाने के लिए किया जाता है.
बीटा ब्राउज़र की रिलीज़
ब्राउज़र के बीटा वर्शन में आपको उन चीज़ों की झलक मिलती है जो ब्राउज़र के अगले स्टेबल वर्शन में होंगी. इस दौरान नई सुविधाओं या हटाए गए कॉन्टेंट को आज़माया जा सकता है. इससे दुनिया भर में आपकी साइट के इस्तेमाल पर असर पड़ सकता है.
रिलीज़ की तारीख महीने के बाहर आने की वजह से, अगस्त में सिर्फ़ नया बीटा वर्शन Firefox 105 था, जो फ़िलहाल विवरण के बारे में हल्का है.
Safari 16 का बीटा वर्शन जिसका नाम जून में बताया गया था, वह अब भी उपलब्ध है.
यह वेब सीरीज़ में नई सुविधा का हिस्सा है