दिसंबर में वेब प्लैटफ़ॉर्म पर नया

दिसंबर 2025 में, स्टेबल और बीटा वर्शन वाले वेब ब्राउज़र में उपलब्ध कराई गई कुछ दिलचस्प सुविधाओं के बारे में जानें.

Rachel Andrew

पब्लिश होने की तारीख: 16 दिसंबर, 2025

ब्राउज़र के स्टेबल वर्शन की रिलीज़

Chrome 143, Firefox 146, और Safari 26.2 को दिसंबर के दौरान स्टेबल वर्शन के तौर पर रिलीज़ किया गया था. इस पोस्ट में, इस महीने की कई नई सुविधाओं के बारे में बताया गया है. साथ ही, कई चीज़ें अब नए वर्शन में उपलब्ध हैं.

@scope सीएसएस ऐट-रूल अब बेसलाइन है

Firefox 146 में @scope सीएसएस ऐट-रूल शामिल है. इसकी मदद से, खास डीओएम सबट्री में एलिमेंट चुने जा सकते हैं. एक ऐसा स्कोप तय करें जिसमें सिलेक्टर, एलिमेंट को टारगेट कर सकें. साथ ही, बहुत ज़्यादा खास और लंबे सिलेक्टर इस्तेमाल करने से बचें. उदाहरण के लिए, यहां दी गई सीएसएस सिर्फ़ <img> एलिमेंट को टारगेट करती है. हालांकि, ऐसा तब होता है, जब वे .card क्लास वाले एलिमेंट के अंदर हों.

@scope (.card) {
    img {
        border-color: green;
    }
}

Firefox 146 में, यह काम का ऐट-रूल अब नई सुविधाओं के साथ उपलब्ध है. इसके बारे में ज़्यादा जानने के लिए, सीएसएस @scope at-rule की मदद से, अपने सिलेक्टर की पहुंच सीमित करें लेख पढ़ें.

contrast-color() सीएसएस फ़ंक्शन

Firefox 146 में contrast-color() फ़ंक्शन भी उपलब्ध है. यह फ़ंक्शन, रंग की वैल्यू लेता है और कंट्रास्ट वाला रंग दिखाता है. इसका मकसद, WCAG AA के कम से कम कंट्रास्ट को पक्का करना है.

ज़्यादा उदाहरणों के लिए, WebKit ब्लॉग पर How to have the browser pick a contrasting color in CSS लेख पढ़ें.

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: not supported.
  • Safari: 26.

Source

Firefox, text-decoration-inset प्रॉपर्टी को शिप करने वाला पहला ब्राउज़र है. इस प्रॉपर्टी की मदद से, किसी एलिमेंट के टेक्स्ट डेकोरेशन के शुरू और खत्म होने के पॉइंट को अडजस्ट किया जा सकता है. इससे टेक्स्ट डेकोरेशन को छोटा या बड़ा किया जा सकता है. साथ ही, रेंडर किए गए टेक्स्ट के हिसाब से उसकी पोज़िशन बदली जा सकती है.

font-language-override सीएसएस प्रॉपर्टी

Chrome 143 में font-language-override प्रॉपर्टी शामिल है. इसकी मदद से, किसी भाषा के लिए टाइपफ़ेस के व्यवहार को बदला जा सकता है. अगर किसी भाषा के लिए इस्तेमाल किए जा रहे टाइपफ़ेस में सही सपोर्ट नहीं है, तो यह सुविधा आपके काम आ सकती है. इसके लिए, बेहतर सपोर्ट वाली किसी मिलती-जुलती भाषा के ग्लिफ़ इस्तेमाल किए जा सकते हैं.

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 34.
  • Safari: not supported.

Source

सीएसएस में ऐंकर की गई फ़ॉलबैक कंटेनर क्वेरी

Chrome 143 में @container anchored(fallback) को शामिल किया गया है. इसकी मदद से, ऐंकर किए गए एलिमेंट के डिसेंडेंट को स्टाइल किया जा सकता है. यह इस बात पर निर्भर करता है कि position-try-fallbacks में से कौनसी प्रॉपर्टी लागू की गई है.

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

background-position-x/y के लॉन्गहैंड के लिए साइड-रिलेटिव सिंटैक्स

Chrome में, background-position के लिए लॉन्गहैंड प्रॉपर्टी में, बैकग्राउंड इमेज की पोज़िशन को उसके किसी एक किनारे के हिसाब से तय करने की सुविधा भी उपलब्ध है. अब यह सुविधा सभी ब्राउज़र पर उपलब्ध है. उदाहरण के लिए:

.element {
  background-image: url(flower.gif);
  background-repeat: no-repeat;
  background-position-x: left 30px;
  background-position-y: bottom 20px;
}

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 49.
  • Safari: 15.4.

ऐनिमेशन overallProgress प्रॉपर्टी

Safari 26.2 में ये सुविधाएं शामिल हैं: overallProgress. Animation इंटरफ़ेस की यह सिर्फ़ पढ़ने के लिए उपलब्ध प्रॉपर्टी है. यह 0 और 1 के बीच की कोई संख्या दिखाती है. इससे पता चलता है कि एनिमेशन, अपनी आखिरी स्थिति की ओर कितना आगे बढ़ा है.

यह प्रॉपर्टी अब Baseline Newly available है.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: 142.
  • Safari Technology Preview: supported.

Source

एलसीपी और आईएनपी अब नई मेट्रिक के तौर पर उपलब्ध हैं

सबसे बड़े एलिमेंट को रेंडर करने में लगा समय (एलसीपी) और पेज के रिस्पॉन्स में लगा समय (आईएनपी) मेट्रिक, अब नए बेसलाइन के तौर पर उपलब्ध हैं. इन मेट्रिक को मेज़र करने के लिए ज़रूरी Contentful Paint API और Event Timing API के साथ Safari 26.2 काम करता है.

इन सुविधाओं को Interop 2025 में शामिल किया गया था. अब सभी मुख्य ब्राउज़र के नए वर्शन में इन मेट्रिक को मेज़र किया जा सकता है.

Largest Contentful Paint API

Browser Support

  • Chrome: 77.
  • Edge: 79.
  • Firefox: 122.
  • Safari: not supported.

Source

Event Timing API

Browser Support

  • Chrome: 76.
  • Edge: 79.
  • Firefox: 89.
  • Safari: not supported.

Source

CHIPS, Baseline Newly available तक पहुंच गया है

Safari 26.2 में सीएचआईपीएस (कुकीज़ हैविंग इंडिपेंडेंट पार्टिशन्ड स्टेट) भी शामिल है. इसकी मदद से, हर टॉप-लेवल साइट के लिए अलग-अलग कुकी जार के साथ, अलग-अलग स्टोरेज में कुकी चुनने की अनुमति मिलती है.

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 141.
  • Safari: not supported.

Source

hidden="until-found"

Safari 26.2 में hidden="until-found" के लिए सहायता शामिल है. यह अब Baseline Newly available बन गया है.

Browser Support

  • Chrome: 102.
  • Edge: 102.
  • Firefox: 139.
  • Safari Technology Preview: supported.

Source

command और commandfor एट्रिब्यूट

Safari 26.2 में एचटीएमएल के लिए, बटन पर command और commandfor इस्तेमाल करने की सुविधा भी उपलब्ध है. इससे पॉपओवर और डायलॉग को कंट्रोल करने का एक तरीका मिलता है.

Browser Support

  • Chrome: 135.
  • Edge: 135.
  • Firefox: 144.
  • Safari Technology Preview: supported.

Source

ज़्यादा जानकारी के लिए, command और commandfor के बारे में जानकारी लेख पढ़ें.

scrollend इवेंट

Safari 26.2 में, Baseline के साथ उपलब्ध होने वाली एक और सुविधा scrollend इवेंट है. यह इवेंट तब ट्रिगर होता है, जब स्क्रोलिंग पूरी हो जाती है. इसके बारे में ज़्यादा जानने के लिए, Scrollend, a new JavaScript event लेख पढ़ें.

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 109.
  • Safari Technology Preview: supported.

Source

scrollbar-color प्रॉपर्टी

scrollbar-color प्रॉपर्टी की मदद से, स्क्रोलबार के थंब और स्क्रोलबार के ट्रैक का रंग बदला जा सकता है. Safari 26.2 के साथ, यह सुविधा भी नई सुविधाओं के तौर पर उपलब्ध हो जाती है.

Browser Support

  • Chrome: 121.
  • Edge: 121.
  • Firefox: 64.
  • Safari: not supported.

Source

ब्राउज़र के बीटा वर्शन की रिलीज़

ब्राउज़र के बीटा वर्शन में, आपको उन सुविधाओं की झलक मिलती है जो ब्राउज़र के अगले स्टेबल वर्शन में शामिल होंगी. यह नई सुविधाओं को आज़माने या हटाने का सही समय है. इससे, दुनिया भर में रिलीज़ होने से पहले ही आपकी साइट पर असर पड़ सकता है. इस महीने के नए बीटा वर्शन ये हैं: Firefox 147 और Chrome 144.

Chrome 144 में, पेज पर मौजूद कॉन्टेंट को खोजने की सुविधा के लिए ::search-text स्यूडो-एलिमेंट शामिल है. इससे खोज के नतीजों को स्टाइल किया जा सकता है. साथ ही, इसमें scrolled के लिए @scroll-state की सुविधा भी शामिल है. इससे आपको स्क्रोल करने की हाल ही की दिशा के आधार पर, कंटेनर के डिसेंडेंट को स्टाइल करने की सुविधा मिलती है. इसमें Temporal API भी शामिल है. इसमें तारीखों और समय के साथ काम करने के लिए, स्टैंडर्ड ऑब्जेक्ट और फ़ंक्शन होते हैं.

Firefox 147 एक बेहतरीन रिलीज़ है. इसमें सीएसएस ऐंकर पोज़िशनिंग, व्यू ट्रांज़िशन टाइप, और Navigation API शामिल हैं.

इस साल लॉन्च हुई सीएसएस और यूज़र इंटरफ़ेस (यूआई) की शानदार सुविधाओं के बारे में ज़्यादा जानने के लिए, CSS Wrapped 2025 देखें.