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

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

नवंबर में, Firefox 107 और Chrome 108 के स्टेबल वर्शन रिलीज़ किए गए. आइए, देखें कि वेब प्लैटफ़ॉर्म के लिए इसका क्या मतलब है.

Android पर Chrome 108 में, ऑन-स्क्रीन कीबोर्ड दिखने पर लेआउट व्यूपोर्ट के काम करने के तरीके में बदलाव किया गया है. ज़्यादा जानने के लिए, Android पर Chrome में व्यूपोर्ट के साइज़ में होने वाले बदलावों के लिए तैयारी करें लेख पढ़ें.

नई व्यूपोर्ट यूनिट

Chrome 108 में, सीएसएस व्यूपोर्ट यूनिट भी नई हैं. इनमें छोटी (svw, svh, svi, svb, svmin, svmax), बड़ी (lvw, lvh, lvi, lvb, lvmin, lvmax), डाइनैमिक (dvw, dvh, dvi, dvb, dvmin, dvmax), और लॉजिकल (vi, vb) यूनिट शामिल हैं. ये यूनिट, Firefox और Safari में पहले से लागू हैं. इसका मतलब है कि अब इन यूनिट के लिए, तीनों मुख्य ब्राउज़र इंजन के साथ इंटरऑपरेबलिटी की सुविधा उपलब्ध है.

बड़ी, छोटी, और डाइनैमिक व्यूपोर्ट यूनिट पढ़ें.

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

  • Chrome: 108.
  • Edge: 108.
  • Firefox: 101.
  • Safari: 15.4.

Firefox 107 में, contain-intrinsic-size शॉर्टहैंड सीएसएस प्रॉपर्टी के साथ-साथ, contain-intrinsic-width, contain-intrinsic-height, और लॉजिकल प्रॉपर्टी contain-intrinsic-block-size और contain-intrinsic-inline-size का इस्तेमाल किया जा सकता है.

इनका इस्तेमाल, ऐसे यूज़र इंटरफ़ेस (यूआई) एलिमेंट के साइज़ की जानकारी देने के लिए किया जाता है जिसे साइज़ में कंट्रोल किया जा सकता है. इससे उपयोगकर्ता एजेंट, किसी एलिमेंट के चाइल्ड एलिमेंट को रेंडर किए बिना ही उसका साइज़ तय कर सकता है. ये तब काम के होते हैं, जब किसी एलिमेंट को साइज़ में कंट्रोल किया जाता है.

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

  • Chrome: 83.
  • Edge: 83.
  • Firefox: 107.
  • Safari: 17.

सोर्स

सीएसएस फ़्रैगमेंटेशन avoid कीवर्ड के लिए सहायता

Chrome 108 में, प्रिंट करते समय सीएसएस फ़्रैगमेंटेशन प्रॉपर्टी break-before, break-after, और break-inside की avoid वैल्यू के लिए सहायता शामिल है. यह वैल्यू ब्राउज़र को बताती है कि जिस एलिमेंट पर इसे लागू किया गया है उसके पहले, बाद या अंदर ब्रेक न लगाएं. उदाहरण के लिए, यहां दी गई सीएसएस, पेज ब्रेक के दौरान किसी आंकड़े के अलग-अलग पेजों पर दिखने से रोकती है.

figure {
    break-inside: avoid;
}

यह सुविधा, LayoutNG का इस्तेमाल करके प्रिंट की सुविधा को शामिल करने की वजह से जोड़ी गई है. इससे आपको आधुनिक और कम गड़बड़ियों वाला अनुभव मिलता है. LayoutNG के बारे में ज़्यादा जानें.

Federated Credential Management API

Federated Credential Management API (FedCM), वेब पर फ़ेडरेटेड आइडेंटिटी फ़्लो के लिए एक एब्स्ट्रैक्शन उपलब्ध कराता है. यह ब्राउज़र से जुड़ा डायलॉग दिखाता है. इसकी मदद से, उपयोगकर्ता वेबसाइटों पर लॉगिन करने के लिए, पहचान की पुष्टि करने वाली सेवा देने वाली कंपनियों से खाते चुन सकते हैं. FedCM, Chrome 108 में उपलब्ध है. इस बारे में ज़्यादा जानने के लिए, FedCM के बारे में सूचना देने वाली ब्लॉग पोस्ट पढ़ें.

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

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

Firefox 108 में, <source> एलिमेंट के लिए height और width एट्रिब्यूट का इस्तेमाल किया जा सकता है. हालांकि, ऐसा तब ही किया जा सकता है, जब यह <picture> एलिमेंट का चाइल्ड एलिमेंट हो. इन एट्रिब्यूट में, इमेज की ऊंचाई या चौड़ाई को पिक्सल में, बिना किसी यूनिट के पूर्णांक के तौर पर स्वीकार किया जाता है.

फ़ायरफ़ॉक्स में कंटेनर क्वेरी लागू की जा रही हैं. Firefox 108 बीटा में layout.css.container-queries.enabled फ़्लैग के पीछे, आपको कंटेनर क्वेरी की लंबाई की इकाइयां दिखेंगी—cqw, cqh, cqi, cqb, cqmin, cqmax. ये क्वेरी कंटेनर के साइज़ के हिसाब से लंबाई की इकाइयां हैं.

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