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

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

अगस्त में, Firefox 104, Chrome 104, और Chrome 105 के स्टेबल वर्शन रिलीज़ किए गए.

Chrome 104 में सीएसएस ट्रांसफ़ॉर्म के लिए अलग-अलग प्रॉपर्टी शामिल हैं. ये प्रॉपर्टी scale, rotate, और translate हैं. इनका इस्तेमाल, ट्रांसफ़ॉर्मेशन के उन हिस्सों को अलग-अलग तय करने के लिए किया जा सकता है.

ऐसा करने पर, Chrome उन ब्राउज़र की सूची में शामिल हो जाता है जो पहले से ही इन प्रॉपर्टी के साथ काम करते हैं. जैसे, Firefox और Safari.

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 104.
  • Edge: 104.
  • Firefox: 72.
  • Safari: 14.1.

सोर्स

न्यू मीडिया क्वेरी का सिंटैक्स

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: 104.
  • Edge: 104.
  • Firefox: 102.
  • Safari: 16.4.

सोर्स

कंटेनर से जुड़ी क्वेरी

Chrome 105 एक शानदार रिलीज़ है. इसमें वेब प्लैटफ़ॉर्म पर, कंटेनर क्वेरी की सुविधा जोड़ी गई है. इस सुविधा का इंतज़ार लंबे समय से किया जा रहा था. मीडिया क्वेरी की मदद से, व्यूपोर्ट के साइज़ के बारे में क्वेरी की जा सकती है. वहीं, कंटेनर क्वेरी की मदद से, कंटेनर के साइज़ के बारे में क्वेरी की जा सकती है.

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 110.
  • Safari: 16.

सोर्स

कंटेनर क्वेरी का इस्तेमाल करने के लिए, 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() पैरंट स्यूडो-क्लास

ऊपर बताई गई पोस्ट में :has() के बारे में भी बताया गया है. सीएसएस :has() सूडो-क्लास की मदद से, शर्तों के आधार पर पैरंट एलिमेंट और सिबलिंग को टारगेट किया जा सकता है. ज़्यादा जानने के लिए, :has() फ़ैमिली सिलेक्टर लेख पढ़ें.

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 121.
  • Safari: 15.4.

सोर्स

Sanitizer API

Chrome 105 में Sanitizer API भी मौजूद है. यह एपीआई, प्लैटफ़ॉर्म में डेटा को सुरक्षित बनाने की सुविधा जोड़ता है. इससे, क्रॉस-साइट स्क्रिप्टिंग से जुड़ी जोखिम की आशंका को कम करने में मदद मिलती है.

Chrome 105 में, :modal सीएसएस सूडो-क्लास भी है. यह ऐसे एलिमेंट से मैच करता है जो किसी ऐसी स्थिति में होता है जिसमें वह अपने बाहर के एलिमेंट के साथ किसी भी तरह का इंटरैक्शन नहीं करता. उदाहरण के लिए, showModal() एपीआई से खोला गया <dialog>.

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 103.
  • Safari: 15.6.

सोर्स

findLast() और findLastIndex() तरीके

Firefox 104 में, Array.prototype.findLast(), Array.prototype.findLastIndex(), TypedArray.prototype.findLast(), और TypedArray.prototype.findLastIndex() तरीकों के लिए, फ़्लैग के साथ सहायता जोड़ी गई है. इनका इस्तेमाल, दिए गए टेस्ट फ़ंक्शन से मैच करने वाले ऐरे या TypedArray में मौजूद आखिरी एलिमेंट की वैल्यू और इंडेक्स (क्रमशः) ढूंढने के लिए किया जाता है.

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

  • Chrome: 97.
  • Edge: 97.
  • Firefox: 104.
  • Safari: 15.4.

सोर्स

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

ब्राउज़र के बीटा वर्शन से, आपको उन चीज़ों की झलक मिलती है जो ब्राउज़र के अगले स्टेबल वर्शन में उपलब्ध होंगी. यह नई सुविधाओं या हटाए गए ऐसे कॉन्टेंट को टेस्ट करने का बेहतरीन समय है जो दुनिया के लिए रिलीज़ होने से पहले आपकी साइट पर असर डाल सकता है.

रिलीज़ की तारीखें अगले महीने की होने की वजह से, अगस्त में सिर्फ़ Firefox 105 का नया बीटा वर्शन रिलीज़ किया गया था. फ़िलहाल, इस बारे में ज़्यादा जानकारी नहीं है.

जून में बताया गया Safari 16 का बीटा वर्शन भी अब भी उपलब्ध है.

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