Chrome 112 में नया

Adriana Jara

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

मेरा नाम एड्रियाना जारा है. आइए, देखते हैं कि Chrome 112 में डेवलपर के लिए नया क्या है.

नेस्ट करने के लिए सीएसएस (सीएसएस) की सुविधा.

सीएसएस प्रीप्रोसेसर की हमारी पसंदीदा सुविधाओं में से एक, अब इस भाषा में पहले से मौजूद है: नेस्ट करने के स्टाइल के नियम.

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

पहले
.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

.nesting > .is > .awesome {
  color: deeppink;
}

नेस्ट करने के बाद, सिलेक्टर ये हो सकते हैं: जारी रखा जा सकता है और मिलते-जुलते स्टाइल के नियमों को ग्रुप में रखा जा सकता है.

बाद में
.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

Nesting की मदद से डेवलपर, सिलेक्टर को बार-बार चुनने की ज़रूरत को कम कर पाते हैं. साथ ही, मिलते-जुलते एलिमेंट के लिए स्टाइल के नियमों का एक साथ पता भी लगा पाते हैं. इसकी मदद से स्टाइल, टारगेट किए गए एचटीएमएल से मैच हो सकती हैं.

अगर इस उदाहरण में मौजूद .nesting कॉम्पोनेंट को प्रोजेक्ट से हटा दिया गया था, तो फ़ाइल से जुड़े सिलेक्टर के इंस्टेंस खोजने के बजाय, पूरे ग्रुप को मिटाया जा सकता है.

Nest से इन मामलों में मदद मिल सकती है:

  • चैनल मैनेज करना.
  • फ़ाइल का साइज़ कम किया जा रहा है.
  • रीफ़ैक्टरिंग.

सीएसएस नेस्टिंग का ज़्यादा से ज़्यादा फ़ायदा लेने के लिए, यह लेख पढ़ें. इसमें आपको Devtools में नेस्ट करने से जुड़ी सहायता यहां मिल सकती है.

<dialog> शुरुआती फ़ोकस के लिए एल्गोरिदम अपडेट.

एचटीएमएल <dialog> एलिमेंट, डायलॉग बॉक्स या दूसरे इंटरैक्टिव कॉम्पोनेंट को दिखाने का स्टैंडर्ड तरीका है. जैसे, खारिज की जा सकने वाली सूचना या सबविंडो. इसे वेब पेज में मौजूद अन्य सभी कॉन्टेंट के ऊपर दिखाना ज़रूरी होता है.

इस तरह का कॉन्टेंट बनाने के लिए, इस एचटीएमएल एलिमेंट का सुझाव दिया जाता है. ऐसा इसलिए, क्योंकि इसकी सुविधाओं को इस तरह डिज़ाइन किया गया था कि ये सभी को बेहतर और एक ही जगह पर आसानी से इस्तेमाल करने में मदद मिलती हों.

इनमें से एक सुविधा यह मैनेज कर रही है कि डायलॉग खोले जाने पर किस एलिमेंट पर फ़ोकस किया जाता है. इस वर्शन में, उस एलिमेंट को चुनने वाले एल्गोरिदम को अपडेट किया गया था.

अब से:

फ़ोकस करने वाले चरणों पर फ़ोकस करने वाले डायलॉग बॉक्स में, फ़ोकस करने लायक एलिमेंट के बजाय, कीबोर्ड के फ़ोकस किए जा सकने वाले एलिमेंट देखे जाते हैं अगर <dialog> एलिमेंट में ऑटोफ़ोकस एट्रिब्यूट सेट किया गया है, तो यह अपने-आप फ़ोकस हो जाता है

<dialog> एलिमेंट, "रीसेट" पर फ़ोकस करने के बजाय फ़ॉलबैक के तौर पर खुद फ़ोकस हो जाता है <body> एलिमेंट में जोड़ा जा सकता है.

<dialog> एलिमेंट के बारे में ज़्यादा जानकारी के लिए, दस्तावेज़ पढ़ें.

सर्विस वर्कर नो-ऑप फ़ेच हैंडलर को छोड़ा जा रहा है.

अगर उपयोगकर्ता एजेंट को यह पता चलता है कि सर्विस वर्कर के फ़ेच लिसनर, सभी कार्रवाइयां नहीं कर रहे हैं, तो Chrome 112 से सर्विस वर्कर चालू हो जाएगा और नेविगेशन के क्रिटिकल पाथ से लिसनर डिस्पैच को हटा दिया जाएगा.

इस सुविधा की मदद से उन पेजों पर ज़्यादा तेज़ी से नेविगेट किया जा सकता है.

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

इस बदलाव के तौर पर, अगर सभी सर्विस वर्कर के फ़ेच लिसनर के काम नहीं करने पर Chrome, कंसोल से जुड़ी चेतावनियां दिखाएगा. साथ ही, Chrome डेवलपर को उन फ़ेच लिसनर को हटाने के लिए प्रोत्साहित करेगा.

खाली सर्विस वर्कर फ़ेच हैंडलर के लिए DevTools में चेतावनियां.

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

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

  • document.domain के लिए सेटर अब काम नहीं करता.
  • वेबव्यू में X-Requested-With header को हटाने का ऑरिजिन ट्रायल मौजूद है
  • DevTools में रिकॉर्डर, अब पियर्स सिलेक्टर की मदद से रिकॉर्ड कर सकता है.

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

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

सदस्यता लें

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

मेरा नाम एड्रियाना जारा है. Chrome 113 के लॉन्च होते ही, मुझे Chrome में नया क्या है!