Chrome 121 में नया

Adriana Jara

यहां आवश्यक जानकारी दी गई है:

मैं एड्रियाना जारा हूं. चलिए, देखते हैं कि Chrome 121 में डेवलपर के लिए नया क्या है.

सीएसएस से जुड़े अपडेट.

चलिए, सीएसएस के अपडेट से शुरुआत करते हैं:

scrollbar-color और scrollbar-width प्रॉपर्टी अब उपलब्ध हैं. इनकी मदद से, स्क्रोलबार को पसंद के मुताबिक बनाया जा सकता है और उनके रंग और चौड़ाई के बारे में अनुमान लगाया जा सकता है.

font-palette प्रॉपर्टी की मदद से, रंग के फ़ॉन्ट को रेंडर करने के लिए, कोई पैलेट चुना जा सकता है. यह प्रॉपर्टी अब एनिमेशन का समर्थन करती है, इसलिए पैलेट के बीच स्विच करना दो चुने गए पैलेट के बीच एक सहज संक्रमण बन जाता है.

सूडो एलिमेंट ::spelling-error और ::grammar-error का इस्तेमाल करके, स्पेलिंग और व्याकरण की गड़बड़ियों के लिए रंगों को पसंद के मुताबिक बनाया जा सकता है. साथ ही, गलत स्पेलिंग वाले शब्दों को बैकग्राउंड के रंगों या सजावट के दूसरे तरीकों के साथ हाइलाइट किया जा सकता है. साथ ही, इससे स्पेल चेक की सुविधा को बेहतर तरीके से इंटिग्रेट किया जा सकता है.

SVG के लिए सीएसएस मास्किंग में सुधार हुआ है. यह Chrome 120 में, सीएसएस मास्क की बेहतर सुविधा के बारे में फ़ॉलो-अप करने के लिए बनाया गया है. इससे SVG (एक से ज़्यादा मास्क के साथ-साथ, mask-mode, mask-composite, mask-position, और mask-repeat) में भी नए मास्क की सुविधा मिल रही है. इसके अलावा, अब रिमोट SVG मास्क (उदाहरण के लिए, मास्क: url(masks.svg#star)) का इस्तेमाल भी किया जा सकता है.

सुधार: इस लेख के पिछले वर्शन में, @import में supports() शर्तों के लिए सहायता जोड़ने का ज़िक्र किया गया था. हालांकि, पहले ऐसा नहीं किया गया था. यह बदलाव Chrome 122 में शामिल है.

अनुमान लगाने के नियम वाले एपीआई के अपडेट

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

अब एपीआई में दस्तावेज़ के नियमों के लिए सहायता शामिल है: वे अनुमान लगाने के नियमों के सिंटैक्स का एक्सटेंशन हैं. इसकी मदद से, ब्राउज़र किसी पेज के एलिमेंट से, अनुमान के हिसाब से यूआरएल लोड होने के लिए, यूआरएल की सूची हासिल कर सकता है. दस्तावेज़ के नियमों में ये शर्तें शामिल हो सकती हैं कि इनमें से कौनसे लिंक इस्तेमाल किए जा सकते हैं. इसके साथ, नए "eagerness" फ़ील्ड की मदद से आप पेजों पर कर्सर को अपने-आप प्रीफ़ेच या प्रीरेंडर कर सकते हैं, कर्सर घुमाने पर या नीचे की ओर ले जाने पर.

यहां दस्तावेज़ के नियमों का उदाहरण दिया गया है:

{
  "prerender": [
    {"where": {"and": [
       {"href_matches": "/*"},
       {"not": {"href_matches": "/logout"}},
       {"not": {"selector_matches": ".no-prerender"}}
     ]}}
  ]
}

एक अलग बदलाव की मदद से, अनुमान लगाने के नियम वाले नियम तय करने के लिए, अनुमान लगाने के नियम वाले एचटीटीपी रिस्पॉन्स हेडर का इस्तेमाल किया जा सकता है. हेडर, इनलाइन <script> एलिमेंट का इस्तेमाल करने का एक विकल्प है. इस हेडर की वैल्यू एक ऐसा यूआरएल होना चाहिए जो "application/speculationrules+json" MIME टाइप वाले टेक्स्ट रिसॉर्स पर ले जाता हो. संसाधन के नियमों को दस्तावेज़ के नियम सेट में जोड़ा जाएगा.

साथ ही, No-Vary-Search संकेत, अनुमान पर आधारित प्रीफ़ेच की सुविधा को चालू करता है, ताकि यूआरएल क्वेरी पैरामीटर में बदलाव होने पर भी मैच किया जा सके. No-Vary-Search एचटीटीपी रिस्पॉन्स हेडर यह बताता है कि यूआरएल की क्वेरी के कुछ या सभी हिस्सों को मैच करने के लिए अनदेखा किया जा सकता है. इसमें यह एलान किया जा सकता है कि क्वेरी पैरामीटर की कुंजियों के क्रम की वजह से मैच नहीं होने चाहिए, किसी खास क्वेरी पैरामीटर को मैच होने से नहीं रोका जाना चाहिए या सिर्फ़ कुछ खास क्वेरी पैरामीटर के मैच होने की वजह से मैच नहीं होने चाहिए.

इन बदलावों के बारे में ज़्यादा जानकारी के लिए, अनुमान नियमों के एपीआई में सुधार पर जाएं.

एलिमेंट कैप्चर एपीआई का ऑरिजिन ट्रायल

एलिमेंट कैप्चर एपीआई, ऑरिजिन ट्रायल में उपलब्ध है. इस एपीआई की मदद से, किसी खास एचटीएमएल एलिमेंट को कैप्चर और रिकॉर्ड किया जा सकता है. यह पूरे टैब के कैप्चर को एक खास डीओएम सबट्री को कैप्चर कर देता है. साथ ही, टारगेट-एलिमेंट के सिर्फ़ डिसेंडेंट को कैप्चर करता है. दूसरे शब्दों में कहें, तो यह प्रोसेस किए गए और शामिल नहीं किए गए, दोनों तरह के कॉन्टेंट को क्रॉप करता है और हटा देता है.

वीडियो कॉन्फ़्रेंसिंग ऐप्लिकेशन से Element Capture API उपयोगी साबित हो सकता है. यह ऐप्लिकेशन आपको iframe में तीसरे पक्ष के ऐप्लिकेशन एम्बेड करने की सुविधा देता है. ऐसी स्थिति में, हो सकता है कि आप उस iframe को वीडियो के रूप में कैप्चर करना और उसे रिमोट तौर पर हिस्सा लेने वाले लोगों को भेजना चाहें.

Chrome में वीडियो कॉन्फ़्रेंसिंग कॉल का स्क्रीनशॉट.
इलाद, फ़ोंसुआ के साथ वीडियो कॉन्फ़्रेंसिंग कॉल में तीसरे पक्ष के ऐप्लिकेशन का इस्तेमाल करते हैं.

ध्यान दें कि ऐसा करने के लिए, क्षेत्र कैप्चर का इस्तेमाल किया जा सकता है. हालांकि, अगर ड्रॉप-डाउन सूची जैसा कुछ कॉन्टेंट, चुने गए कॉन्टेंट के सबसे ऊपर दिखने लगता है, तो वह ड्रॉप-डाउन रिकॉर्डिंग का हिस्सा बन जाएगा.

ड्रॉप-डाउन सूची का स्क्रीनशॉट कैप्चर किया गया.
एलाद की ड्रॉप-डाउन सूची, फ़्रैंको को मिले कॉन्टेंट के सबसे ऊपर दिखती है.

एलिमेंट कैप्चर एपीआई इस समस्या को हल करने के लिए, आपको उस एलिमेंट को टारगेट करने की अनुमति देता है जिसे शेयर करना है.

टारगेट एलिमेंट का स्क्रीनशॉट, जिसमें कोई ड्रॉपडाउन सूची नहीं है.
फ़्रैंसुआ को Elad की ड्रॉप-डाउन सूची नहीं दिख रही है.

कोड सैंपल के लिए, किसी भी एलिमेंट से वीडियो स्ट्रीम कैप्चर करें और ElementCapture ऑरिजिन ट्रायल के लिए रजिस्टर करें

और ज़्यादा!

बेशक, यहां बहुत कुछ है.

  • अब resizeBy() और resizeTo() तरीके को इस्तेमाल करने के लिए, उपयोगकर्ता के जेस्चर की ज़रूरत होती है, जो Document पिक्चर में पिक्चर एपीआई का हिस्सा है.

  • आपके पास प्रोग्राम बनाकर, showPicker() HTMLSelectElement वाले तरीके से <select> एलिमेंट के विकल्प पिकर को खोलने का विकल्प होता है.

  • scope_extensions, ऑरिजिन ट्रायल में है. यह किसी वेब ऐप्लिकेशन के मुख्य ऑरिजिन और उससे जुड़े ऑरिजिन के बीच कानूनी समझौता होने पर, अन्य ऑरिजिन को शामिल करने के लिए वेब ऐप्लिकेशन के व्यवहार को बढ़ाने की अनुमति देता है.

इसके बारे में और पढ़ें

इसमें सिर्फ़ कुछ खास हाइलाइट शामिल हैं. Chrome 121 में और बदलावों के बारे में जानने के लिए, यहां दिए गए लिंक देखें.

सदस्यता लें

अप-टू-डेट रहने के लिए, Chrome Developers के YouTube चैनल की सदस्यता लें. जब भी हम कोई नया वीडियो लॉन्च करेंगे, तब आपको ईमेल से सूचना मिलेगी.

यो सोय एड्रियाना जारा और Chrome 122 के रिलीज़ होते ही, मैं आपको बताऊंगी कि Chrome की नई सुविधाएं क्या हैं!