इस पेज का अनुवाद Cloud Translation API से किया गया है.

Chrome 115 में नया

Adriana Jara

यहां आपके जानने योग्य तथ्य दिए गए हैं:

ScrollTimeline और ViewTimeline का इस्तेमाल करके, स्क्रोल से चलने वाले ऐनिमेशन बनाएं. इससे उपयोगकर्ता अनुभव बेहतर होता है.
फ़ेंस किए गए फ़्रेम, Privacy Sandbox के अन्य एपीआई के साथ काम करते हैं. इनकी मदद से, काम का कॉन्टेंट एम्बेड किया जा सकता है. साथ ही, बिना ज़रूरत के कॉन्टेक्स्ट शेयर होने से रोका जा सकता है.
Topics API की मदद से, ब्राउज़र उपयोगकर्ता की निजता बनाए रखते हुए, तीसरे पक्षों के साथ उसकी दिलचस्पी से जुड़ी जानकारी शेयर कर सकता है.
इसके अलावा, यहां और भी बहुत कुछ है.

मेरा नाम एड्रियाना जारा है. आइए, जानें कि Chrome 115 में डेवलपर के लिए क्या नया है.

स्क्रोल करने पर दिखने वाले ऐनिमेशन

स्क्रोल की मदद से चलने वाले ऐनिमेशन, वेब पर आम तौर पर इस्तेमाल किए जाने वाले UX पैटर्न होते हैं. स्क्रोल-ड्रिवन ऐनिमेशन, स्क्रोल कंटेनर की स्क्रोल पोज़िशन से जुड़ा होता है. इसका मतलब है कि ऊपर या नीचे स्क्रोल करने पर, लिंक किया गया ऐनिमेशन सीधे तौर पर आगे या पीछे चलता है.

नीचे दिए गए उदाहरणों में, इस्तेमाल के कुछ उदाहरण दिए गए हैं. उदाहरण के लिए, स्क्रोल करने पर चलने वाले रीडिंग इंडिकेटर बनाए जा सकते हैं:

दस्तावेज़ के ऊपर मौजूद, स्क्रोल से चलने वाला रीडिंग इंडिकेटर.

स्क्रोल किए जाने वाले ऐनिमेशन ऐसे एलिमेंट भी बना सकते हैं जो स्क्रीन पर आते ही फ़ेड-इन हो जाते हैं:

इस पेज पर मौजूद इमेज, दिखने के साथ-साथ धीरे-धीरे साफ़ होती हैं.

डिफ़ॉल्ट रूप से, किसी एलिमेंट से जुड़ा ऐनिमेशन दस्तावेज़ की टाइमलाइन पर चलता है. पेज लोड होने पर, इसकी शुरुआत 0 से होती है और घड़ी के समय के साथ आगे बढ़ने लगती है. यह ऐनिमेशन की डिफ़ॉल्ट टाइमलाइन है. अब तक, आपके पास सिर्फ़ इस ऐनिमेशन टाइमलाइन का ऐक्सेस था.

स्क्रोल-ड्रिवन ऐनिमेशन स्पेसिफ़िकेशन में, दो तरह की नई टाइमलाइन के बारे में बताया गया है जिनका इस्तेमाल किया जा सकता है:

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

यहां एक कोड सैंपल दिया गया है. इसमें, पढ़ने की प्रोग्रेस दिखाने वाले इंडिकेटर को बनाने के लिए, पहचान छिपाकर स्क्रोल करने की प्रोग्रेस की टाइमलाइन का इस्तेमाल किया गया है. यह इंडिकेटर, व्यूपोर्ट में सबसे ऊपर मौजूद होता है.

<body>
  <div id="progress"></div>
  …
</body>

@keyframes grow-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

#progress {
  position: fixed;
  left: 0; top: 0;
  width: 100%; height: 1em;
  background: red;

  transform-origin: 0 50%;
  animation: grow-progress auto linear;
  animation-timeline: scroll();
}

ज़्यादा जानकारी और उदाहरणों के लिए, स्क्रोल-ड्राइव ऐनिमेशन लेख पढ़ें.

फ़ेंस किए गए फ़्रेम

Privacy Sandbox एक ऐसा इनिशिएटिव है जिसका मकसद ऐसी टेक्नोलॉजी बनाना है जो इंटरनेट पर, लोगों की निजता को सुरक्षित रखे. साथ ही, डेवलपर को डिजिटल कारोबार को आगे बढ़ाने के लिए टूल उपलब्ध कराए.

इसके कई प्रस्तावों का लक्ष्य तीसरे पक्ष की कुकी या अन्य ट्रैकिंग तरीकों के बिना, अलग-अलग साइटों पर इस्तेमाल के उदाहरणों को पूरा करना है. उदाहरण के लिए:

Protected Audience API: इसकी मदद से, निजता बनाए रखते हुए दिलचस्पी के हिसाब से विज्ञापन दिखाए जा सकते हैं.
शेयर किया गया स्टोरेज: यह सुरक्षित तरीके से अलग-अलग साइट पर मौजूद डेटा को ऐक्सेस करने की सुविधा देता है.

निजता को बनाए रखने के लिए, इनमें से कुछ एपीआई को कॉन्टेंट को एम्बेड करने के लिए नए तरीके की ज़रूरत होती है. इस समस्या को हल करने के लिए, फ़ेंस्ड फ़्रेम का इस्तेमाल किया जाता है.

फ़ेंस किए गए फ़्रेम, Privacy Sandbox के अन्य प्रस्तावों के साथ मिलकर काम करते हैं. इससे, एक ही पेज पर अलग-अलग स्टोरेज पार्टिशन के दस्तावेज़ दिखाए जा सकते हैं.

फ़ेंस्ड फ़्रेम, iframe की तरह होता है. इसे एम्बेड किए गए कॉन्टेंट के लिए एचटीएमएल एलिमेंट के तौर पर सुझाया जाता है. iframes के उलट, फ़ेंस वाला फ़्रेम, अपने एम्बेड किए गए कॉन्टेक्स्ट के साथ कम्यूनिकेशन को सीमित करता है. इसकी मदद से, फ़्रेम को क्रॉस-साइट डेटा का ऐक्सेस मिलता है, लेकिन इसे एम्बेड करने के कॉन्टेक्स्ट के साथ शेयर नहीं किया जाता.

इसी तरह, एम्बेड किए गए कॉन्टेक्स्ट में मौजूद पहले पक्ष का कोई भी डेटा, फ़ेंस किए गए फ़्रेम के साथ शेयर नहीं किया जा सकता.

सुविधा	`iframe`	`fencedframe`
कॉन्टेंट एम्बेड करना	हां	हां
एम्बेड किया गया कॉन्टेंट, एम्बेड करने के लिए कॉन्टेक्स्ट के डीएओएम को ऐक्सेस कर सकता है	हां	नहीं
संदर्भ एम्बेड करने से, एम्बेड किए गए कॉन्टेंट का डीओएम ऐक्सेस किया जा सकता है	हां	नहीं
निगरानी किए जा सकने वाले एट्रिब्यूट, जैसे कि `name`	हां	नहीं
यूआरएल (`http://example.com`)	हां	हां (इस्तेमाल के उदाहरण के हिसाब से)
ब्राउज़र से प्रबंधित ओपेक सोर्स (`urn:uuid`)	नहीं	हां
अलग-अलग साइटों के डेटा का ऐक्सेस	नहीं	हां (इस्तेमाल के उदाहरण के हिसाब से)

उदाहरण के लिए, मान लें कि news.example (एम्बेड करने का संदर्भ), shoes.example से एक विज्ञापन को फ़ेंस किए गए फ़्रेम में एम्बेड करता है. news.example, shoes.example विज्ञापन से डेटा बाहर नहीं निकाल सकता और shoes.example news.example से पहले पक्ष (ग्राहक) का डेटा नहीं सीख सकता.

स्टोरेज को अलग-अलग हिस्सों में बांटने से पहले और बाद की स्थिति की तुलना.

फ़ेंस किए गए फ़्रेम, Protected Audience API, शेयर किए गए स्टोरेज वगैरह के दस्तावेज़ देखने के लिए, ये लेख पढ़ें

Topics API

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

Topics API की मदद से, ब्राउज़र उपयोगकर्ता की निजता बनाए रखते हुए, तीसरे पक्षों के साथ उसकी दिलचस्पी से जुड़ी जानकारी शेयर कर सकता है.

Topics API, उपयोगकर्ता की विज़िट की गई साइटों को ट्रैक किए बिना, दिलचस्पी के हिसाब से विज्ञापन (आईबीए) दिखाता है. ब्राउज़र, उपयोगकर्ताओं की ब्राउज़िंग गतिविधि के आधार पर उन विषयों को ट्रैक करता है और उन्हें रिकॉर्ड करता है जिनमें लोगों की दिलचस्पी हो सकती है. यह जानकारी, उपयोगकर्ता के डिवाइस पर रिकॉर्ड की जाती है.

उदाहरण के लिए, हो सकता है कि एपीआई, knitting.example वेबसाइट पर आने वाले उपयोगकर्ता के लिए "Fiber & Textile Arts" विषय का सुझाव दे.

विषय, विज्ञापन टेक्नोलॉजी प्लैटफ़ॉर्म को काम के विज्ञापन चुनने में मदद करने वाला सिग्नल होता है. तीसरे पक्ष की कुकी के उलट, यह जानकारी शेयर करते समय उपयोगकर्ता या उसकी ब्राउज़िंग गतिविधि के बारे में ज़्यादा जानकारी नहीं दी जाती.

Topics टैक्सोनॉमी और Topics API के इस्तेमाल के बारे में पूरी जानकारी पाने के लिए, Privacy Sandbox की खास जानकारी पढ़ें

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

इसके अलावा, और भी कई चीज़ें हैं.

मुख्य थ्रेड पर WebAssembly.Module का ज़्यादा से ज़्यादा साइज़ 8 मेगाबाइट हो गया
सीएसएस display प्रॉपर्टी में, अब वैल्यू के तौर पर एक से ज़्यादा कीवर्ड इस्तेमाल किए जा सकते हैं. इसमें, पहले से बनाए गए लेगसी कीवर्ड भी शामिल हैं.
Compute Pressure API के लिए, ऑरिजिन ट्रायल उपलब्ध है. इससे, डिवाइस के हार्डवेयर की मौजूदा स्थिति के बारे में बेहतर जानकारी मिलती है.

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

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

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

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