Chrome 90 में नया

Pete LePage

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

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

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

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

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

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

.overflow-clip {
  overflow: clip;
}

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

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

.overflow-clip {
  overflow: clip;
  overflow-clip-margin: 25px;
}

https://petele-css-is-awesome.glitch.me/ पर जाकर overflow: clip को इस्तेमाल करते देखें

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

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

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

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

Permissions-Policy: geolocation=()

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 के साथ, अब आपको कोई समस्या नहीं होगी. सिर्फ़ एचटीएमएल का इस्तेमाल करके शैडो रूट बनाए जा सकते हैं.

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

<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 DevTools (90) में नया क्या है
• Chrome 90 में बंद की गई सुविधाएं और हटाई गई सुविधाएं
• Chrome 90 के लिए ChromeStatus.com से जुड़े अपडेट
• Chrome 90 में JavaScript में नया क्या है
• Chromium सोर्स की रिपॉज़िटरी में बदलाव की सूची

सदस्यता लें

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

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

खास जानकारी

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

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