यहां आवश्यक जानकारी दी गई है:
- सीएसएस अब नेस्ट करने के नियमों के साथ काम करती है.
<dialog>एलिमेंट पर शुरुआती फ़ोकस सेट करने वाला एल्गोरिदम अपडेट किया गया.- नेविगेशन को ज़्यादा तेज़ बनाने के लिए, अब से सर्विस वर्कर पर नो-ऑप
fetch()हैंडलर छोड़ दिए गए हैं. - और भी बहुत कुछ.
मैं हूं एड्रियाना जारा. चलिए, जानते हैं कि Chrome 112 में डेवलपर के लिए नया क्या है.
नेस्टिंग के लिए सीएसएस सहायता.
हमारी पसंदीदा सीएसएस प्रीप्रोसेसर सुविधाओं में से एक अब भाषा में बिल्ट-इन है: नेस्टिंग स्टाइल रूल.
नेस्ट करने से पहले, हर सिलेक्टर के बारे में साफ़ तौर पर बताना ज़रूरी होता है, जो कि एक-दूसरे से अलग होता है. इससे दोहराव, स्टाइलशीट का बल्क और कुछ बिखरी हुई ऑथराइज़ेशन का अनुभव हो जाता है.
.nesting {
color: hotpink;
}
.nesting > .is {
color: rebeccapurple;
}
.nesting > .is > .awesome {
color: deeppink;
}
नेस्ट करने के बाद, सिलेक्टर का इस्तेमाल जारी रखा जा सकता है और उनसे जुड़े स्टाइल के नियमों को ग्रुप में रखा जा सकता है.
.nesting {
color: hotpink;
> .is {
color: rebeccapurple;
> .awesome {
color: deeppink;
}
}
}
नेस्ट करने की सुविधा से, डेवलपर को मिलते-जुलते एलिमेंट के लिए स्टाइल के नियमों की एक साथ जगह तय करने के दौरान, सिलेक्टर को बार-बार इस्तेमाल करने की ज़रूरत नहीं पड़ती. इसकी मदद से, स्टाइल को उनके टारगेट किए गए एचटीएमएल से मैच करने में भी मदद मिल सकती है.
अगर उदाहरण में दिया गया .nesting कॉम्पोनेंट, प्रोजेक्ट से हटा दिया गया था, तो मिलते-जुलते सिलेक्टर इंस्टेंस की फ़ाइलें खोजने के बजाय, पूरे ग्रुप को मिटाया जा सकता है.
नेस्ट करने से इन कामों में मदद मिल सकती है:
- चैनल मैनेज करना.
- फ़ाइल का साइज़ कम किया जा रहा है.
- रीफ़ैक्टरिंग.
सीएसएस नेस्टिंग का ज़्यादा से ज़्यादा फ़ायदा पाने के बारे में सलाह पाने के लिए, यह लेख देखें. इसके अलावा, डेवलपर टूल में नेस्ट करने से जुड़ी सहायता पाने के लिए, यहां जाएं.
<dialog> के शुरुआती फ़ोकस के लिए, एल्गोरिदम अपडेट किया गया है.
एचटीएमएल <dialog> एलिमेंट, डायलॉग बॉक्स या खारिज किए जा सकने वाले अलर्ट या सबविंडो जैसे अन्य इंटरैक्टिव कॉम्पोनेंट को दिखाने का स्टैंडर्ड तरीका है. इसे वेब पेज पर अन्य सभी कॉन्टेंट के ऊपर दिखाना ज़रूरी है.
इस तरह के कॉन्टेंट को बनाने के लिए, इस एचटीएमएल एलिमेंट का सुझाव दिया जाता है. इसकी वजह यह है कि इसकी सुविधाओं को इस तरह से बनाया गया था कि लोगों को बेहतर तरीके से और लगातार इस्तेमाल करने में आसानी हो.
इनमें से एक सुविधा यह है कि डायलॉग खोलने पर कौनसा एलिमेंट फ़ोकस किया जाए, यह भी इनमें से एक सुविधा है. इस वर्शन में, उस एलिमेंट को चुनने वाला एल्गोरिदम अपडेट किया गया था.
अब से:
डायलॉग फ़ोकस करने वाले चरण, फ़ोकस करने लायक किसी भी एलिमेंट के बजाय कीबोर्ड फ़ोकस करने लायक एलिमेंट को देखते हैं
अगर <dialog> एलिमेंट में ऑटोफ़ोकस एट्रिब्यूट सेट किया गया हो, तो वह अपने-आप फ़ोकस करता है
<dialog> एलिमेंट पर फ़ोकस, <body> एलिमेंट पर "रीसेट" करने के बजाय, फ़ॉलबैक के तौर पर होता है.
<dialog> एलिमेंट के बारे में ज़्यादा जानकारी पाने के लिए, दस्तावेज़ पढ़ें.
सर्विस वर्कर नो-ऑप फ़ेच हैंडलर को छोड़ा जा रहा है.
अगर किसी उपयोगकर्ता एजेंट को यह पता चलता है कि सर्विस वर्कर के फ़ेच लिसनर कोई नहीं हैं, तो Chrome 112 से सर्विस वर्कर शुरू होता है और नेविगेशन क्रिटिकल पाथ से लिसनर डिस्पैच हट जाता है.
इस सुविधा से, उन पेजों पर तेज़ी से नेविगेट किया जा सकता है.
फ़ेच हैंडलर का इस्तेमाल करना, किसी वेब ऐप्लिकेशन को इंस्टॉल करने के लिए PWA की ज़रूरी शर्तों में से एक था. हमें लगता है कि इस वजह से, कुछ साइटों के लिए फ़ेच हैंडलर मौजूद नहीं है, जो खाली है. हालांकि, किसी सर्विस वर्कर को शुरू करने और नो-ऑप लिसनर को एक्ज़ीक्यूट करने से, ओवरहेड मिलता है. इसमें सही सर्विस वर्कर को मिलने वाले कोई भी फ़ायदे नहीं होते. जैसे, कैश मेमोरी में या ऑफ़लाइन फ़ंक्शन का इस्तेमाल करना. इसलिए, नेविगेशन को बेहतर बनाने के लिए Chrome अब इन्हें स्किप कर देता है.
इस बदलाव के तहत, अगर सर्विस वर्कर के फ़ेच लिसनर के सभी विकल्प काम नहीं करते, तो Chrome, कंसोल से जुड़ी चेतावनियां दिखाएगा. साथ ही, डेवलपर को बढ़ावा देगा कि वे फ़ेच लिसनर को हटा दें.
और ज़्यादा!
निश्चित रूप से बहुत कुछ है.
document.domainके लिए सेटर अब काम नहीं करता.- वेबव्यू में
X-Requested-With headerको रोकने के लिए, ऑरिजिन ट्रायल उपलब्ध है - DevTools में रिकॉर्डर, अब पियर सिलेक्टर की मदद से रिकॉर्ड कर सकता है.
इसके बारे में और पढ़ें
इसमें सिर्फ़ कुछ खास हाइलाइट शामिल हैं. Chrome 112 में और बदलावों के बारे में जानने के लिए, नीचे दिए गए लिंक देखें.
- Chrome DevTools में नया क्या है (112)
- Chrome 112 के इस्तेमाल पर रोक लगाना और हटाना
- Chrome 112 के लिए ChromeStatus.com से जुड़े अपडेट
- Chromium सोर्स का डेटा स्टोर करने की जगह में बदलाव की सूची
- Chrome रिलीज़ कैलेंडर
सदस्यता लें
अप-टू-डेट रहने के लिए, Chrome Developers के YouTube चैनल की सदस्यता लें. जब भी हम कोई नया वीडियो लॉन्च करेंगे, तब आपको ईमेल से सूचना मिलेगी.
मैं हूँ एड्रियाना जारा और Chrome 113 के रिलीज़ होते ही, मैं आपको बताऊँगी कि Chrome की नई सुविधा क्या है!