Chrome 90 में नया

Pete LePage

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

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

मेरा नाम पीट लीपेज है और मुझे Chrome 90 में डेवलपर के लिए, 411 गेम मिले हैं, जो 1990 के अंदाज़ में कर रहे हैं!

overflow: clip के साथ ओवरफ़्लो रोकें

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

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

.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 में, हमने Feature Policy API को लॉन्च किया था. इससे आपको ब्राउज़र में चुनिंदा एपीआई और वेब सुविधाओं को चालू करने, बंद करने, और उनमें बदलाव करने की सुविधा मिलती है. ये नीतियां आपके और ब्राउज़र के बीच एक अनुबंध हैं. इनसे ब्राउज़र को पता चलता है कि आपका मकसद क्या है.

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

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

Permissions-Policy: geolocation=()

Feature-Policy: geolocation 'none'

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

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

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

डिक्लेरेटिव शैडो रूट, 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:// का इस्तेमाल करेगा. अगर आपने एचटीटीपी से एचटीटीपीएस पर अपने-आप रीडायरेक्ट होने की सुविधा सेट अप नहीं की है, तो अब ऐसा करना सही रहेगा.

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

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

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

• Chrome DevTools में नया क्या है (90)
• Chrome 90 के इस्तेमाल पर रोक लगाना और हटाना
• Chrome 90 के लिए ChromeStatus.com से जुड़े अपडेट
• Chrome 90 में JavaScript में नया क्या है
• Chromium सोर्स का डेटा स्टोर करने की जगह में बदलाव की सूची

सदस्यता लें

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

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

एक खास बात

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

लोरेन बोर्जा, ली कारुथर्स, और लुकस होलसेक, 'Chrome में नए' वीडियो पर काम करते हैं और मुझे उससे बेहतर दिखते हैं. धन्यवाद!