अक्टूबर में वेब प्लैटफ़ॉर्म पर नई सुविधाएं

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

स्थायी ब्राउज़र रिलीज़

अक्टूबर में, Firefox 106, Chrome 107, और Safari 16.1 स्टेबल हो गए. आइए, देखते हैं कि वेब प्लैटफ़ॉर्म के लिए इसका क्या मतलब है.

ग्रिड ट्रैक का ऐनिमेशन

Microsoft में हमारे योगदान देने वालों के काम की वजह से, Chrome अब grid-template-columns और grid-template-rows वैल्यू का अनुमान लगा सकता है. इसका मतलब है कि ग्रिड लेआउट, ऐनिमेशन या ट्रांज़िशन के आधे हिस्से में स्नैप करने के बजाय, एक स्क्रीन से दूसरे पर आसानी से जा सकते हैं.

ऐनिमेशन देखने के लिए अवतार पर कर्सर घुमाएं. यह उदाहरण, सीएसएस के ऐनिमेटेड ग्रिड लेआउट से लिया गया है. इस लेख में, आपको ज़्यादा जानकारी मिल सकती है.

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

  • 107
  • 107
  • 66
  • 16

getDisplayMedia() में अनुवृद्धियां

साथ ही, Chrome में, getDisplayMedia() की कुछ नई सुविधाएं जोड़ी गई हैं. इनका मकसद, स्क्रीन शेयर करते समय गलती से ज़्यादा डेटा शेयर होने से रोकना है.

  • displaySurface विकल्प से यह पता चलता है कि वेब ऐप्लिकेशन को किसी खास तरह का डिसप्ले प्लैटफ़ॉर्म (टैब, विंडो या स्क्रीन) देना पसंद है.
  • surfaceSwitching विकल्प से यह पता चलता है कि Chrome को उपयोगकर्ता को, शेयर किए गए टैब के बीच डाइनैमिक तरीके से स्विच करने की अनुमति देनी चाहिए या नहीं.
  • selfBrowserSurface विकल्प का इस्तेमाल, उपयोगकर्ता को मौजूदा टैब शेयर करने से रोकने के लिए किया जा सकता है. यह "शीशों का हॉल" इफ़ेक्ट से बचाता है.
  • systemAudio विकल्प से यह पक्का होता है कि Chrome सिर्फ़ उपयोगकर्ता को सही ऑडियो-कैप्चर करने की सुविधा दे.

Safari 16.1 में getDisplayMedia काम भी करता है. इसमें किसी खास Safari विंडो को कैप्चर करने की सुविधा भी शामिल है.

सीएसएस की फ़ॉन्ट टेक्नोलॉजी और सुविधाओं में काम करने के लिए जांच की जा रही है

Firefox ने @supports की सुविधा क्वेरी के लिए font-tech() और font-format() फ़ंक्शन जोड़े हैं. COLRv1 फ़ॉन्ट के काम करने के लिए, नीचे दिए गए उदाहरण.

@supports font-tech(color-COLRv1) {

}

आपको एमडीएन पर ज़्यादा उदाहरण मिल सकते हैं.

टेक्स्ट फ़्रैगमेंट तक स्क्रोल करें

Safari 16.1 में टेक्स्ट फ़्रैगमेंट तक स्क्रोल करें की सुविधा भी होती है. इससे, बताए गए खास टेक्स्ट फ़्रैगमेंट वाले यूआरएल पर नेविगेट करने की सुविधा मिलती है.

AVIF सहायता

Safari 16 में स्टिल AVIF इमेज और Safari 16.1 में, macOS Ventura, iOS 16, और iPadOS 16 पर, ऐनिमेशन वाली AVIF इमेज की सुविधा मिलती है.

Safari के लिए वेब पुश

Safari 16.1, macOS Ventura पर Safari के लिए Web Push की सुविधा देता है. इसमें Push API और Notifications API का इस्तेमाल होता है. इसके बारे में ज़्यादा जानने के लिए, Meet वेब पुश लेख में जाएं. Safari में वेब पुश लैंडिंग का मतलब है कि अब यह सभी तीन प्रमुख इंजन के लिए उपलब्ध है.

बीटा ब्राउज़र की रिलीज़

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

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

figure {
    break-inside: avoid;
}

Chrome 108 ने बदले गए एलिमेंट पर ओवरफ़्लो के तरीके में बदलाव करना शुरू कर दिया है. इसकी वजह से, कुछ मामलों में विज़ुअल बदलाव हो सकते हैं. ज़्यादा जानकारी के लिए और दिखने वाली किसी भी समस्या को ठीक करने का तरीका जानने के लिए, सीएसएस में बदले गए एलिमेंट पर ओवरफ़्लो में बदलाव लेख पढ़ें.

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

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

Firefox 107, इस फ़ॉन्ट टेक्नोलॉजी के साथ काम करने वाले Chrome में शामिल होने पर, COLRv1 फ़ॉन्ट सपोर्ट को चालू करता है. Chrome 108, फ़ॉन्ट में भी @supports के साथ क्वेरी को दिखाने के लिए font-tech() और font-format() फ़ंक्शन के साथ काम करता है.

Firefox इस सुविधा के समर्थन के साथ दो ब्राउज़र बनाने के लिए Chrome में शामिल होकर contain-intrinsic-size समर्थन भी जोड़ता है.

Safari 16.2 बीटा वर्शन में सीएसएस से जुड़ी कई गड़बड़ियां ठीक की गई हैं. इनमें साइज़ और स्क्रोल स्नैप शामिल हैं.

यह वेब सीरीज़ में नई सुविधा का हिस्सा है