इस पेज का अनुवाद Cloud Translation API से किया गया है.

अगस्त में वेब प्लैटफ़ॉर्म पर नया है

अगस्त 2022 में, स्टेबल और बीटा वेब ब्राउज़र में लॉन्च की गई कुछ दिलचस्प सुविधाओं के बारे में जानें.

Rachel Andrew

ब्राउज़र के स्टेबल वर्शन

अगस्त में, 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() फ़ैमिली सिलेक्टर लेख पढ़ें.

ब्राउज़र सहायता

सोर्स

Sanitizer API

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 का बीटा वर्शन भी अब भी उपलब्ध है.

वेब सीरीज़ के लिए नया है का हिस्सा