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() बदली हुई क्लास

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

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

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

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

ज़्यादा जानकारी और कुछ मज़ेदार डेमो के लिए, Una का लेख @container और :has(): दो असरदार नए रिस्पॉन्सिव एपीआई देखें.

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

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

DomPurify जैसी कई लाइब्रेरी मददगार हैं, लेकिन इनकी मदद से रखरखाव का बोझ भी कम आता है. HTML Sanitizer API, प्लैटफ़ॉर्म में सैनिटाइज़ेशन बनाकर, क्रॉस-साइट स्क्रिप्टिंग के जोखिमों को कम करने में मदद करता है.

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

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

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

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

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

असुरक्षित कॉन्टेक्स्ट के लिए वेब एसक्यूएल का इस्तेमाल बंद करना

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

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

और ज़्यादा!

बेशक, यहां बहुत कुछ है.

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

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

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

सदस्यता लें

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

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