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)) का इस्तेमाल भी किया जा सकता है.

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

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

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

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

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

{
  "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, ऑरिजिन ट्रायल में उपलब्ध है. इस एपीआई की मदद से, किसी खास एचटीएमएल एलिमेंट को कैप्चर और रिकॉर्ड किया जा सकता है. यह पूरे टैब के कैप्चर को एक खास डीओएम सबट्री में बदल देता है और टारगेट-एलिमेंट के सिर्फ़ डायरेक्ट डिसेंडेंट को कैप्चर करता है. दूसरे शब्दों में कहें, तो यह रोक लगाने वाले और रोके गए कॉन्टेंट, दोनों को काट देता है और हटा देता है.

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

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

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

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

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

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

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

और भी कई सुविधाएं!

बेशक वहां और भी बहुत कुछ है.

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

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

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

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

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

सदस्यता लें

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

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