Chrome 118 में नया

Adriana Jara

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

• @scope सीएसएस नियम की मदद से, किसी कॉम्पोनेंट में खास स्टाइल तय करें.
• मीडिया से जुड़ी एक नई सुविधा जोड़ी गई है: prefers-reduced-transparency.

• DevTools में सोर्स पैनल को बेहतर बनाया गया है.

• इसके अलावा, और भी बहुत कुछ है.

मेरी पहचान एड्रियाना जारा है. आइए, जानें कि Chrome 118 में डेवलपर के लिए क्या नया है.

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

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

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

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

without scope, लागू की गई स्टाइल वह होती है जिसे आखिरी बार एलान किया गया था.

@scope के बिना

.pink-theme a { color: hotpink; }
.lightpink-theme a { color: lightpink; }

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

@scope का इस्तेमाल करके

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

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

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

@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;
  }
}

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

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

<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 at-rule की मदद से, अपने सिलेक्टर की पहुंच को सीमित करना लेख पढ़ें.

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 की मदद से यह देखा जा सकता है कि यह कैसा दिखता है:

ज़्यादा जानकारी के लिए, prefers-reduced-transparency दस्तावेज़ देखें.

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

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

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

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

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

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

इसके अलावा, और भी बहुत कुछ है.

• WebUSB API अब ब्राउज़र एक्सटेंशन से रजिस्टर किए गए सेवा वर्कर के लिए उपलब्ध है. इससे डेवलपर, एक्सटेंशन इवेंट का जवाब देते समय एपीआई का इस्तेमाल कर सकते हैं.

• डेवलपर को पेमेंट अनुरोध के फ़्लो में आने वाली समस्याओं को कम करने में मदद करने के लिए, हम Payment Request और Secure Payment Confirmation में उपयोगकर्ता को चालू करने की ज़रूरी शर्त को हटा रहे हैं.

• Chrome का रिलीज़ साइकल कम हो रहा है. अब हर तीन हफ़्ते में, Chrome के स्टेबल वर्शन रिलीज़ किए जाएंगे. यह रिलीज़, Chrome 119 से शुरू होगी, जो तीन हफ़्ते में रिलीज़ हो जाएगी.

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

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

• Chrome DevTools (118) में नया क्या है
• Chrome 118 में, काम न करने वाले और हटाए गए फ़ंक्शन
• Chrome 118 के लिए ChromeStatus.com के अपडेट
• Chromium सोर्स रिपॉज़िटरी में हुए बदलावों की सूची
• Chrome के रिलीज़ कैलेंडर की जानकारी

सदस्यता लें

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

नमस्ते, मैं अड्रिआना जारा हूं. Chrome 119 के रिलीज़ होने के बाद, मैं आपको बताऊंगी कि Chrome में नया क्या है!