Chrome 118 में नया

Adriana Jara

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

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

सीएसएस का @scope नियम.

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

@scope की मदद से, नज़दीकी के आधार पर स्टाइल को बदला जा सकता है. ये स्टाइल, उन सामान्य सीएसएस स्टाइल से अलग होती हैं जिन्हें सिर्फ़ सोर्स के ऑर्डर और खासियत के आधार पर लागू किया जाता है. इस उदाहरण में, दो थीम हैं.

<div class="lightpink-theme">
  <a href="#">I'm lightpink!</a>
  <div class="pink-theme">
    <a href="#">Different pink!</a>
  </div>
</div>

बिना दायरे के, लागू की गई स्टाइल सबसे आखिर में तय की गई स्टाइल होती है.

@scope के बिना
.pink-theme a { color: hotpink; }
.lightpink-theme a { color: lightpink; }

दो लिंक, पहले लिंक में लिखा है &#39;मैं लाइटपिंक हूं!&#39; दूसरे में लिखा है &#39;अलग-अलग गुलाबी&#39;. दोनों लिंक असल में हल्के गुलाबी रंग के हैं, जबकि लिंक के टेक्स्ट के नीचे सोर्स के क्रम की जानकारी देने वाली स्टाइल है.

स्कोप के साथ आपके पास नेस्ट किए गए एलिमेंट हो सकते हैं और लागू होने वाली स्टाइल, सबसे नज़दीकी पूर्वज की शैली है.

@scope की मदद से
@scope (.pink-theme) {
    a {
        color: hotpink;
    }
}

@scope (.lightpink-theme){
    a {
        color: lightpink;
    }
}

दो लिंक, जिनमें से पहले लिंक में लिखा है &#39;&#39;आई&#39;एम लाइटपिंक!&#39; दूसरे में लिखा है &#39;अलग-अलग गुलाबी&#39;. वहीं, दूसरे लिंक में गहरा गुलाबी है. यह एंसेस्टर स्टाइल वाले लिंक के नीचे है और इसके बगल में हरे रंग का सही का निशान लगा है.

स्कोप की मदद से, क्लास के बड़े और जटिल नाम लिखने से बचा जा सकता है. साथ ही, बड़े प्रोजेक्ट को मैनेज करना आसान हो जाता है. साथ ही, एक से ज़्यादा नाम रखने के लिए एक ही नाम रखा जाना भी आसान हो जाता है.

@scope के बिना
<div class="first-container">
  <h1 class="first-container__main-title"> I'm the main title</h1>
</div>

<div class="second-container">
  <h1 class="second-container__main-title"> I'm the main title, but somewhere else</h1>
</div>

.first-container__main-title {
  color: grey;
}

.second-container__main-title {
  color: mediumturquoise;
}
@scope की मदद से
<div class="first-container">
  <h1 class="main-title"> I'm the main title</h1>
</div>

<div class="second-container">
  <h1 class="main-title"> I'm the main title, but somewhere else</h1>
</div>

@scope(.first-container){
  .main-title {
   color: grey;
  }
}
@scope(.second-container){
  .main-title {
   color: mediumturquoise;
  }
}

स्कोप के ज़रिए, नेस्ट की गई कुछ चीज़ों को स्टाइल किए बिना भी किसी कॉम्पोनेंट को स्टाइल किया जा सकता है. इस तरह से आपके पास ऐसे “छेद” विकल्प हो सकते हैं जहां स्कोप वाली स्टाइल इस्तेमाल नहीं की जा सकती.

नीचे दिए गए उदाहरण की तरह, हम टेक्स्ट पर स्टाइल लागू कर सकते हैं और कंट्रोल को बाहर रख सकते हैं या टेक्स्ट के लिए स्टाइल लागू कर सकते हैं.

ऊपर दिए गए html को दिखाना, जिसमें शब्द पहले और तीसरे डिव के बगल में हैं और शब्द दूसरे और चौथे डिव के बगल में है.

<div class="component">
  <div class="purple">
    <h1>Drink water</h1>
    <p class="purple">hydration is important</p>
  </div>
  <div class="click-here">
    <p>not in scope</p>
    <button>click here</button>
  </div>

  <div class="purple">
    <h1 class="purple">Exercise</h1>
    <p class="purple">move it move it</p>
  </div>

  <div class="link-here">
    <p>Excluded from scope</p>
    <a href="#"> link here </a>
  </div>
</div>

@scope (.component) to (.click-here, .link-here) {
  div {
    color: purple;
    text-align: center;
    font-family: sans-serif;
  }
}

ज़्यादा जानकारी के लिए, सीएसएस @scope एट-रूल की मदद से अपने सिलेक्टर की पहुंच को सीमित करें लेख पढ़ें.

मीडिया की prefers-reduced-transparency सुविधा

हम मीडिया क्वेरी का इस्तेमाल, उपयोगकर्ताओं को बेहतर अनुभव देने के लिए करते हैं. ये क्वेरी, लोगों की पसंद और डिवाइस के हिसाब से ढल जाती हैं. Chrome के इस वर्शन में एक नई वैल्यू जोड़ी गई है, जिसका इस्तेमाल उपयोगकर्ता अनुभव को बेहतर बनाने के लिए किया जा सकता है: prefers-reduced-transparency.

मीडिया क्वेरी की मदद से, prefers-reduced-transparency की नई वैल्यू को टेस्ट किया जा सकता है. इसकी मदद से डेवलपर, ओएस में कम पारदर्शिता के लिए, वेब कॉन्टेंट को उपयोगकर्ता की चुनी हुई प्राथमिकता के हिसाब से बदल सकते हैं. जैसे, macOS पर पारदर्शिता कम करने की सेटिंग. सही विकल्प reduce या no-preference हैं.

.translucent {
  opacity: 0.4;
}

@media (prefers-reduced-transparency) {
  .translucent {
    opacity: 0.8;
  }
}

साथ ही, आप यह देख सकते हैं कि यह DevTools की मदद से कैसा दिखता है:

ज़्यादा जानकारी के लिए, प्राथमिकता-कम की गई-पारदर्शिता के दस्तावेज़ देखें.

सुधार: इस लेख के पिछले वर्शन में, इस रिलीज़ में मौजूद नई scripting मीडिया सुविधा के बारे में बताया गया था. दरअसल, यह वर्शन 120 में आने वाला है.

DevTools में सोर्स पैनल में किए गए सुधार

DevTools में सोर्स पैनल में ये सुधार किए गए हैं: वर्कस्पेस सुविधा में एक जैसा सुधार किया गया है. खास तौर पर, सोर्स > फ़ाइल सिस्टम पैनल का नाम बदलकर अन्य यूज़र इंटरफ़ेस (यूआई) टेक्स्ट के साथ-साथ फ़ाइल सिस्टम पैनल का नाम बदलकर, सोर्स > फ़ाइल फ़ोल्डर की मदद से, DevTools में किए गए बदलावों को सीधे अपनी सोर्स फ़ाइलों में सिंक किया जा सकता है.

साथ ही, अब सोर्स पैनल के बाईं ओर मौजूद पैनल का क्रम बदलने के लिए, उन्हें खींचें और छोड़ें. साथ ही, सोर्स पैनल, अब इन स्क्रिप्ट टाइप में प्रिटी-प्रिंट इनलाइन JavaScript का इस्तेमाल कर सकता है: module, importmap, speculationrules और importmap और speculationrules स्क्रिप्ट टाइप के सिंटैक्स को हाइलाइट करता है. इन दोनों में JSON फ़ॉर्मैट में होता है.

अनुमान लगाने के नियम वाले स्क्रिप्ट टाइप की प्री-प्रिंटिंग और सिंटैक्स हाइलाइट करने से पहले और बाद में.

Chrome 118 DevTools के अपडेट के बारे में ज़्यादा जानने के लिए, DevTools में नया क्या है पर जाएं.

और ज़्यादा!

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

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

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

सदस्यता लें

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

यो सोय एड्रियाना जारा और Chrome 119 के रिलीज़ होते ही, मैं आपको बताऊंगी कि Chrome की नई सुविधा क्या है!