Chrome 90 में नया

Pete LePage

यहां कुछ ज़रूरी जानकारी दी गई है:

  • सीएसएस overflow प्रॉपर्टी के लिए नई वैल्यू दी गई है.
  • सुविधा की नीति वाले एपीआई का नाम बदलकर अनुमतियों की नीति कर दिया गया है.
  • साथ ही, एचटीएमएल में सीधे शैडो DOM को लागू करने और इस्तेमाल करने का एक नया तरीका है.
  • मेरे पास 1990 के दशक में, इस तरह की कई जैकेट थीं.
  • इसके अलावा, और भी बहुत कुछ है.

मेरा नाम पीट लेपेज है. मेरे पास Chrome 90 में डेवलपर के लिए ज़रूरी जानकारी है. इसे 1990 के स्टाइल में पेश किया जा रहा है!

overflow: clip की मदद से, ओवरफ़्लो को रोकना

CSS IS AWESOME

सीएसएस बहुत ही शानदार है! हालांकि, मुझे लगता है कि हर वेब डेवलपर ने कभी न कभी, ऐसा कुछ देखा और अनुभव किया है जो किसी समय अजीब तरीके से ओवरफ़्लो हो गया. CSS Tricks पर, ओवरफ़्लो को मैनेज करने के अलग-अलग तरीकों के बारे में एक बेहतरीन पोस्ट है. उदाहरण के लिए, overflow: hidden या auto का इस्तेमाल करना.

सीएसएस ओवरफ़्लो स्पेसिफ़िकेशन में, एक नई clip प्रॉपर्टी है, जो hidden की तरह ही काम करती है.

.overflow-clip {
  overflow: clip;
}
टेक्स्ट सीएसएस वाला स्क्वेयर बॉक्स बहुत अच्छा है, जहां आउट ऑफ़ बॉक्स में बहुत अच्छा ओवरफ़्लो होता है

overflow: clip का इस्तेमाल करके, बॉक्स के लिए किसी भी तरह के स्क्रोलिंग को रोका जा सकता है. इसमें प्रोग्राम के हिसाब से स्क्रोलिंग भी शामिल है. इसका मतलब है कि बॉक्स को स्क्रोल कंटेनर नहीं माना जाता है. यह फ़ॉर्मैटिंग का नया कॉन्टेक्स्ट शुरू नहीं करता. अगर ज़रूरत हो, तो overflow-x और overflow-y का इस्तेमाल करके, किसी एक ऐक्सिस पर क्लिपिंग लागू की जा सकती है.

हां, और आपके लिए जानकारी - overflow-clip-margin भी है, जिसकी मदद से क्लिप के बॉर्डर को बड़ा किया जा सकता है. यह उन मामलों में काम आता है जहां स्याही का ओवरफ़्लो होता है और उसे दिखना चाहिए.

.overflow-clip {
  overflow: clip;
  overflow-clip-margin: 25px;
}
टेक्स्ट सीएसएस वाला स्क्वेयर बॉक्स बहुत अच्छा है, जहां आउट ऑफ़ बॉक्स में बहुत अच्छा ओवरफ़्लो होता है

overflow: clip को इस्तेमाल करने का तरीका जानने के लिए, https://petele-css-is-awesome.glitch.me/ पर जाएं

सुविधा से जुड़ी नीति को अब अनुमतियों की नीति कहा जाता है

हमने Chrome के 74 वर्शन में, सुविधा से जुड़ी नीति का एपीआई पेश किया था. इसकी मदद से, ब्राउज़र में कुछ एपीआई और वेब सुविधाओं को चुनिंदा तौर पर चालू, बंद, और उनके काम करने के तरीके में बदलाव किया जा सकता है. ये नीतियां, आपके और ब्राउज़र के बीच एक समझौता हैं. ये ब्राउज़र को यह बताते हैं कि आपका इंटेंट क्या है.

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

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

Chrome 90 और उसके बाद के वर्शन

Permissions-Policy: geolocation=()

Chrome 89 और उससे पहले के वर्शन

Feature-Policy: geolocation 'none'

अगर आपको अपनी साइट पर इस सुविधा का इस्तेमाल करने का तरीका जानना है, तो सुविधा से जुड़ी नीति के बारे में जानकारी देखें.

डीक्लेरेटिव शैडो डीओएम

शैडो डीओएम, वेब कॉम्पोनेंट स्टैंडर्ड का हिस्सा है. इससे, किसी खास डीओएम सबट्री के लिए सीएसएस स्टाइल को स्कोप करने और उस सबट्री को बाकी दस्तावेज़ से अलग करने का तरीका मिलता है. अब तक, शैडो DOM का इस्तेमाल करने का एक ही तरीका था. इसके लिए, JavaScript का इस्तेमाल करके शैडो रूट बनाना होता था.

const host = document.getElementById('host');
const opts = {mode: 'open'};
const shadowRoot = host.attachShadow(opts);
const html = '<h1>Hello Shadow DOM</h1>';
shadowRoot.innerHTML = html;

यह क्लाइंट-साइड रेंडरिंग के लिए ठीक से काम करता है, लेकिन सर्वर साइड रेंडरिंग के लिए उतना अच्छा नहीं है. इसकी वजह यह है कि सर्वर से जनरेट किए गए एचटीएमएल में, शैडो रूट को दिखाने का कोई तरीका पहले से मौजूद नहीं है. हालांकि, Chrome 90 में, एलान वाले शैडो DOM के साथ, आपके पास शैडो रूट बनाने का विकल्प है. इसके लिए, सिर्फ़ एचटीएमएल का इस्तेमाल किया जा सकता है.

डिक्लेरेटिव शैडो रूट, shadowroot एट्रिब्यूट वाला <template> एलिमेंट होता है. एचटीएमएल पार्सर इसका पता लगाता है और इसे अपने पैरंट एलिमेंट के शैडो रूट के तौर पर तुरंत लागू करता है.

<host-element>
  <template shadowroot="open">
    <slot></slot>
  </template>
  <h2>Light content</h2>
</host-element>

इस डीओएम ट्री में, सिर्फ़ एचटीएमएल मार्कअप के नतीजे लोड किए जा रहे हैं:

<host-element>
  #shadow-root (open)
  <slot>
    ↳
    <h2>Light content</h2>
  </slot>
</host-element>

इससे हमें स्टैटिक एचटीएमएल में, शैडो DOM के कंटेनमेंट और स्लॉट प्रोजेक्शन के फ़ायदे मिलते हैं. पूरे ट्री को जनरेट करने के लिए, किसी JavaScript की ज़रूरत नहीं होती. इसमें शैडो रूट भी शामिल है.

ज़्यादा जानकारी के लिए, web.dev पर एलान वाला शैडो DOM देखें.

अन्य डेटा

इसके अलावा, और भी बहुत कुछ है.

एचटीटीपीएस का इस्तेमाल करने वाली साइटों पर जाने वाले उपयोगकर्ताओं की निजता को बेहतर बनाने और साइटों को तेज़ी से लोड करने के लिए, Chrome का पता बार डिफ़ॉल्ट रूप से https:// का इस्तेमाल करेगा. अगर आपने एचटीटीपी से एचटीटीपीएस पर अपने-आप रीडायरेक्ट होने की सुविधा सेट अप नहीं की है, तो अब इसे सेट अप करने का सबसे सही समय है.

साथ ही, Chrome के डेस्कटॉप वर्शन में AV1 एन्कोडर भी शामिल किया गया है. इसे खास तौर पर, WebRTC इंटिग्रेशन के साथ वीडियो कॉन्फ़्रेंसिंग के लिए ऑप्टिमाइज़ किया गया है.

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

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

सदस्यता लें

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

मेरा नाम पीट लेपेज है. Chrome 91 रिलीज़ होने के बाद, मैं आपको बताऊंगा कि Chrome में नया क्या है!

खास जानकारी

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

GDS Design

  • फ़ोला अकिनोला
  • डेरेक बेस
  • क्रिस्टोफ़र बोडेल
  • निक क्रुसिक
  • क्रिस वॉकर

साउंड डिज़ाइन और अतिरिक्त संगीत

  • ब्रायन गॉर्डन

साथ ही, Loren Borja, Lee Carruthers, और Lukas Holcek को भी धन्यवाद, जो मेरे 'Chrome में नई सुविधाएं' वीडियो पर काम करते हैं और मुझे असल से ज़्यादा बेहतर दिखाते हैं.