कुछ ऐसी दिलचस्प सुविधाओं के बारे में जानें जो नवंबर 2022 में, स्टेबल और बीटा वर्शन वाले वेब ब्राउज़र पर मिली हैं.
स्थायी ब्राउज़र रिलीज़
नवंबर में, Firefox 107 और Chrome 108 स्टेबल हो गए. आइए, देखते हैं कि वेब प्लैटफ़ॉर्म के लिए इसका क्या मतलब है.
Android पर, Chrome में लेआउट व्यूपोर्ट के व्यवहार में बदलाव
ऑन-स्क्रीन कीबोर्ड दिखने पर, 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 में पहले ही लागू कर दी गई हैं, जिसका मतलब है कि अब इन यूनिट के लिए हमारे पास तीन मुख्य ब्राउज़र इंजन के बीच इंटरऑप है.
बड़ी, छोटी, और डाइनैमिक व्यूपोर्ट यूनिट के बारे में पढ़ें.
ब्राउज़र सहायता
- 108
- 108
- 101
- 15.4
contain-intrinsic-size की शॉर्टहैंड सीएसएस प्रॉपर्टी, Firefox 107 में लॉन्गहैंड contain-intrinsic-width, contain-intrinsic-height, और लॉजिकल प्रॉपर्टी contain-intrinsic-block-size और contain-intrinsic-inline-size के साथ काम करती है.
इनका इस्तेमाल यूज़र इंटरफ़ेस (यूआई) एलिमेंट का साइज़ तय करने के लिए किया जाता है. हालांकि, इसके लिए साइज़ को कंट्रोल किया जाता है. इससे उपयोगकर्ता एजेंट, किसी एलिमेंट का साइज़ तय कर सकता है. इसके लिए, चाइल्ड एलिमेंट को रेंडर करने की ज़रूरत नहीं होती. ये तब काम आते हैं, जब कोई एलिमेंट साइज़ कंटेनमेंट में होता है.
सीएसएस फ़्रैगमेंटेशन avoid कीवर्ड के लिए सहायता
Chrome 108 में प्रिंट करते समय, सीएसएस फ़्रैगमेंटेशन प्रॉपर्टी break-before, break-after, और break-inside की avoid वैल्यू काम करती है. यह वैल्यू, ब्राउज़र को उस एलिमेंट के पहले, बाद में या उसके अंदर डेटा को नुकसान से बचाने के लिए कहती है जिस पर इसे लागू किया गया है. उदाहरण के लिए, यह सीएसएस, पेज ब्रेक पर इमेज को तोड़ने से बचाती है.
figure {
break-inside: avoid;
}
LayoutNG का इस्तेमाल करके प्रिंट सपोर्ट शामिल होने की वजह से, यह एक मॉडर्न और कम गड़बड़ी वाला अनुभव है. LayoutNG के बारे में ज़्यादा जानें.
फ़ेडरेटेड क्रेडेंशियल मैनेजमेंट एपीआई
फ़ेडरेटेड क्रेडेंशियल मैनेजमेंट एपीआई (FedCM), वेब पर फ़ेडरेटेड आइडेंटिटी फ़्लो के लिए जानकारी देता है. यह ब्राउज़र में मीडिएशन वाला डायलॉग दिखाता है. इससे उपयोगकर्ता, वेबसाइटों में लॉगिन करने के लिए, पहचान करने वाली कंपनियों में से खाते चुन सकते हैं. FedCM को Chrome 108 में भेजा जा रहा है. इसके बारे में ज़्यादा जानने के लिए, FedCM के एलान वाला ब्लॉग पोस्ट पढ़ें.
बीटा ब्राउज़र की रिलीज़
ब्राउज़र के बीटा वर्शन में आपको उन चीज़ों की झलक मिलती है जो ब्राउज़र के अगले स्टेबल वर्शन में होंगी. इस दौरान नई सुविधाओं या हटाए गए कॉन्टेंट को आज़माया जा सकता है. इससे दुनिया भर में आपकी साइट के इस्तेमाल पर असर पड़ सकता है. जहां रिलीज़ की तारीख आती हैं, तब तक इस महीने सिर्फ़ नया बीटा वर्शन Firefox 108 है, जिसमें Safari 16.2 बीटा अब भी जारी है.
Firefox 108, <source> एलिमेंट के लिए height और width एट्रिब्यूट के साथ काम करता है. ऐसा तब होता है, जब यह <picture> एलिमेंट का चाइल्ड हो. इन एट्रिब्यूट की मदद से, इमेज की ऊंचाई या चौड़ाई को पिक्सल के तौर पर स्वीकार किया जाता है. इसे बिना यूनिट वाले पूर्णांक के तौर पर स्वीकार किया जाता है.
Firefox में कंटेनर क्वेरी को लागू किया जा रहा है. Firefox 108 के बीटा वर्शन में layout.css.container-queries.enabled फ़्लैग के पीछे, आपको कंटेनर क्वेरी की लंबाई की इकाइयां दिखेंगी—cqw, cqh, cqi, cqb, cqmin, cqmax. लंबाई की ये इकाइयां, क्वेरी कंटेनर के साइज़ के हिसाब से होती हैं.
यह वेब सीरीज़ में नई सुविधा का हिस्सा है