Chrome 142 में नया क्या है

Rachel Andrew

पब्लिश होने की तारीख: 28 अक्टूबर, 2025

Chrome 142 को अब रोल आउट किया जा रहा है. इस पोस्ट में, रिलीज़ की कुछ मुख्य सुविधाओं के बारे में बताया गया है. Chrome 142 के रिलीज़ नोट पढ़ें.

इस रिलीज़ की मुख्य बातें:

:target-before और :target-after सूडो-क्लास

ये स्यूडो-क्लास, स्क्रोल मार्कर से मेल खाती हैं. ये स्क्रोल मार्कर, एक ही स्क्रोल मार्कर ग्रुप में मौजूद ऐक्टिव मार्कर (:target-current से मेल खाने वाला) से पहले या बाद में होते हैं. इनका क्रम, फ़्लैट ट्री के क्रम के हिसाब से तय होता है:

  • :target-before: यह ग्रुप में फ़्लैट ट्री के क्रम में, चालू मार्कर से पहले आने वाले सभी स्क्रोल मार्कर से मेल खाता है.
  • :target-after: यह ग्रुप में फ़्लैट ट्री के क्रम में, चालू मार्कर के बाद आने वाले सभी स्क्रोल मार्कर से मेल खाता है.

स्टाइल कंटेनर क्वेरी और if() के लिए रेंज सिंटैक्स

Chrome, if() फ़ंक्शन और सीएसएस स्टाइल क्वेरी को बेहतर बनाता है. इसके लिए, वह रेंज सिंटैक्स के लिए सहायता जोड़ता है.

यह स्टाइल क्वेरी को, वैल्यू के सटीक मिलान से आगे बढ़ाता है. उदाहरण के लिए, style(--theme: dark). डेवलपर, तुलना ऑपरेटर (जैसे कि > और <) का इस्तेमाल करके, कस्टम प्रॉपर्टी, लिटरल वैल्यू (उदाहरण के लिए, 10 पिक्सल या 25%) की तुलना कर सकते हैं. साथ ही, attr() और env() जैसे सब्स्टिट्यूशन फ़ंक्शन से मिली वैल्यू की तुलना कर सकते हैं. तुलना सही तरीके से करने के लिए, दोनों तरफ़ के डेटा का टाइप एक जैसा होना चाहिए. यह सिर्फ़ इन संख्यात्मक टाइप के लिए उपलब्ध है: <length>, <number>, <percentage>, <angle>, <time>, <frequency>, और <resolution>.

उदाहरण:

किसी कस्टम प्रॉपर्टी की तुलना लिटरल लेंथ से करना:

@container style(--inner-padding > 1em) {
  .card {
    border: 2px solid;
  }
}

दो लिटरल वैल्यू की तुलना करना

@container style(1em < 20px) {
  /* ... */
}

if() में स्टाइल रेंज का इस्तेमाल करना:

.item-grid {
  background-color: if(style(attr(data-columns, type<number>) > 2): lightblue; else: white);
}

दिलचस्पी बढ़ाने वाले (interestfor एट्रिब्यूट)

Chrome, <button> और <a> एलिमेंट में interestfor एट्रिब्यूट जोड़ता है. इस एट्रिब्यूट से, एलिमेंट में "दिलचस्पी" से जुड़ी गतिविधियां जोड़ी जाती हैं. जब कोई उपयोगकर्ता एलिमेंट में दिलचस्पी दिखाता है, तो टारगेट एलिमेंट पर कार्रवाइयां ट्रिगर होती हैं. उदाहरण के लिए, पॉपओवर दिखाना.

उपयोगकर्ता एजेंट यह पता लगाता है कि उपयोगकर्ता ने एलिमेंट में दिलचस्पी दिखाई है या नहीं. इसके लिए, वह इन तरीकों का इस्तेमाल करता है: एलिमेंट पर पॉइंटर को रोकना, कीबोर्ड पर खास हॉटकी दबाना या टचस्क्रीन पर एलिमेंट को दबाकर रखना. जब दिलचस्पी दिखाई जाती है या कम हो जाती है, तो टारगेट पर InterestEvent फ़ायर होता है. इसमें पॉपओवर के लिए डिफ़ॉल्ट कार्रवाइयां होती हैं. जैसे, पॉपओवर दिखाना और छिपाना.

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

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

सदस्यता लें

अप-टू-डेट रहने के लिए, Chrome Developers YouTube चैनल को सब्सक्राइब करें. इससे आपको नया वीडियो लॉन्च होने पर ईमेल से सूचना मिलेगी. इसके अलावा, नए लेख और ब्लॉग पोस्ट पाने के लिए, हमें X या LinkedIn पर फ़ॉलो करें.

Chrome 143 के रिलीज़ होते ही, हम आपको Chrome में उपलब्ध नई सुविधाओं के बारे में बताएंगे!