Chrome 115 में नया

Adriana Jara

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

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

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

स्क्रोल करके चलने वाले ऐनिमेशन

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

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

दस्तावेज़ के ऊपर, पढ़ने का संकेत देने वाला इंडिकेटर, जो स्क्रोल करने पर दिखता है.

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

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

डिफ़ॉल्ट रूप से, किसी एलिमेंट से जुड़ा ऐनिमेशन, दस्तावेज़ की टाइमलाइन पर चलता है. जब पेज लोड होता है, तो इसका ऑरिजिन समय 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();
}

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

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

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

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

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

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

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

फ़ेंस्ड फ़्रेम, 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, Shared Storage वगैरह के बारे में दस्तावेज़ जानने के लिए, ये लेख पढ़ें

Topics API

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

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

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

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

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

विषयों की अलग-अलग कैटगरी और Topics API का इस्तेमाल करने से जुड़ी पूरी जानकारी के लिए, Privacy Sandbox की खास जानकारी पढ़ें

और ज़्यादा!

निश्चित रूप से बहुत कुछ है.

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

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

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

सदस्यता लें

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

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