Chrome 105 में नया

Pete LePage

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

मैं पीट लेपेज हूं. चलिए, शुरू करते हैं और देखें कि Chrome 105 में डेवलपर के लिए नया क्या है.

कंटेनर क्वेरी और :has() सीएसएस प्रॉपर्टी

कंटेनर क्वेरी, सबसे ज़्यादा अनुरोध की जाने वाली सुविधाओं में से एक है Chrome 105. इनसे डेवलपर, इसके साइज़ के लिए पैरंट सिलेक्टर से क्वेरी कर सकते हैं और जानकारी को शैली में ढालना, जिससे चाइल्ड एलीमेंट रिस्पॉन्सिव स्टाइलिंग लॉजिक, चाहे वह पेज पर कहीं भी मौजूद हो.

ये @media क्वेरी की तरह होते हैं. हालांकि, इनका आकलन नहीं किया जाता कि के बजाय एक कंटेनर है.

कंटेनर क्वेरी बनाम मीडिया क्वेरी.

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

दो कॉलम वाला एक कार्ड.

कंटेनर क्वेरी बनाने के लिए, कार्ड कंटेनर पर container-type सेट करें. container-type को inline-size पर सेट करने पर, inline-direction से क्वेरी की जाती है पैरंट का साइज़.

.card-container {
  container-type: inline-size;
}

अब हम उस कंटेनर का इस्तेमाल करके उसके किसी भी चाइल्ड पर स्टाइल लागू कर सकते हैं. @container.

.card {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@container (max-width: 400px) {
  .card {
    grid-template-columns: 1fr;
  }
}

इस मामले में, जब कंटेनर का साइज़ 400 पिक्सल से कम होता है, तो यह एक कॉलम वाला लेआउट चुनें.

सीएसएस :has() pseudo-class

सीएसएस :has() pseudo-class का इस्तेमाल करके, हम इसे और बेहतर बना सकते हैं. यह की मदद से यह जांच की जा सकती है कि पैरंट एलिमेंट में खास तरह के चाइल्ड एलिमेंट शामिल हैं पैरामीटर का इस्तेमाल करें.

उदाहरण के लिए, p:has(span), पैराग्राफ़ चुनने के लिए खाली जगह को दिखाता है कर सकते हैं. इसका इस्तेमाल, पैरंट पैराग्राफ़ या किसी भी स्टाइल को स्टाइल करने के लिए किया जा सकता है शामिल करें. इसके अलावा, किसी इमेज एलिमेंट को स्टाइल देने के लिए, figure:has(figcaption) का इस्तेमाल किया जा सकता है जिसमें कैप्शन मौजूद हो.

p:has(span) {
  /* magic styles */
}

figure:has(figcaption) {
  /* this figure has a figcaption */
}

ऊना का लेख देखें @container और :has(): दो बेहतरीन नए रिस्पॉन्सिव एपीआई और मज़ेदार डेमो देखें.

सैनिटाइज़र एपीआई

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

ऐसी लाइब्रेरी मौजूद हैं DomPurify रखरखाव का बोझ ज़्यादा है. HTML सैनिटाइज़र API, कंप्यूटर की सुरक्षा क्रॉस-साइट स्क्रिप्टिंग के जोखिम की आशंकाओं को दूर करता है.

इसका इस्तेमाल करने के लिए, सैनिटाइज़र का नया इंस्टेंस बनाएं. इसके बाद, इस नंबर पर setHTML() को कॉल करें: में सैनिटाइज़ किया गया कॉन्टेंट डालना है.

const mySanitizer = new Sanitizer();
const user_input = `<img src="" onerror=alert(0)>`;
elem.setHTML(user_input, { sanitizer: mySanitizer });

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

const config = {
  allowElements: [],
  blockElements: [],
  dropElements: [],
  allowAttributes: {},
  dropAttributes: {},
  allowCustomElements: true,
  allowComments: true
};
// sanitized result is customized by configuration
const mySanitizer = new Sanitizer(config);

Sanitizer API की मदद से, सुरक्षित डीओएम में बदलाव करने के बारे में जानें देखें.

असुरक्षित कॉन्टेक्स्ट के लिए वेब एसक्यूएल को बंद किया जा रहा है

कुछ समय पहले, हमने Web SQL का इस्तेमाल बंद करने की अपनी योजना का एलान किया था. इतने समय में शुरू होगा Chrome 105 और Web SQL को गैर-सुरक्षित कॉन्टेक्स्ट में बंद कर दिया जाएगा.

अगर असुरक्षित कॉन्टेक्स्ट में वेब एसक्यूएल का इस्तेमाल किया जा रहा है, तो आपको IndexDB पर माइग्रेट करना चाहिए, या किसी अन्य लोकल स्टोरेज कंटेनर का इस्तेमाल करें.

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

बेशक वहां और भी बहुत कुछ है.

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

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

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

सदस्यता लें

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

मेरा नाम पीट लेपेज है और Chrome 106 के रिलीज़ होते ही, हम Chrome में नया क्या है!