वेब यूज़र इंटरफ़ेस (यूआई) में नया क्या है

Bramus
Una Kravets

पब्लिश होने की तारीख: 1 जुलाई, 2026

Google I/O 2026 में, हमने Web UI प्लैटफ़ॉर्म में होने वाले कई अपडेट के बारे में बताया. उपयोगकर्ता की प्राथमिकताओं का ध्यान रखने से लेकर नैचुरल इंटरैक्शन लागू करने, नेविगेशन में मदद करने, कॉन्टेंट को व्यवस्थित करने, और अलग-अलग फ़ॉर्म फ़ैक्टर के हिसाब से अडजस्ट करने तक, मॉडर्न वेब, डेवलपर को अच्छी क्वालिटी वाले, टैक्टाइल उपयोगकर्ता अनुभव बनाने के लिए बेहद शक्तिशाली टूल उपलब्ध कराता है.

"वेब यूज़र इंटरफ़ेस (यूआई) में नया क्या है" सेशन में बताई गई सभी सुविधाओं के बारे में यहां पूरी जानकारी दी गई है. इसे यूज़र एक्सपीरियंस (यूएक्स) के हमारे मुख्य सिद्धांतों के हिसाब से व्यवस्थित किया गया है.

पहला हिस्सा: उपयोगकर्ता की प्राथमिकताओं का सम्मान करना

वेब को इस्तेमाल करने के लिए, मनमुताबिक बनाने की सुविधा बहुत ज़रूरी है. मॉडर्न वेब एपीआई की मदद से, उपयोगकर्ता के सिस्टम-लेवल के विकल्पों के हिसाब से अपने-आप बदलाव करना आसान हो जाता है. भले ही, ये कॉन्सेप्ट बुनियादी लगें और हम इनके बारे में सालों से बात कर रहे हों, लेकिन असल में कुछ नए एपीआई और पैटर्न हैं. इनकी मदद से, डाइनैमिक तरीके से मनमुताबिक बनाने की सुविधा को आसानी से बनाया जा सकता है.

1. contrast-color()

contrast-color() सीएसएस फ़ंक्शन, इनपुट कलर लेता है और WCAG AA के कम से कम कंट्रास्ट वाले एल्गोरिदम के आधार पर, इनपुट कलर के साथ ज़्यादा कंट्रास्ट वाले black या white को अपने-आप दिखाता है. इससे, टेक्स्ट और बैकग्राउंड के रंग के कॉम्बिनेशन को मैन्युअल तरीके से बनाए रखने के बिना ही, टेक्स्ट को आसानी से पढ़ा जा सकता है.

Browser Support

  • Chrome: 147.
  • Edge: 147.
  • Firefox: 146.
  • Safari: 26.

Source

contrast-color() के बारे में ज़्यादा जानें

2. light-dark()

light-dark() सीएसएस फ़ंक्शन की मदद से, किसी प्रॉपर्टी के लिए दो अलग-अलग वैल्यू (रंग या इमेज) तय की जा सकती हैं. इनमें से एक वैल्यू लाइट मोड के लिए और दूसरी वैल्यू डार्क मोड के लिए होती है. ये दोनों वैल्यू, एक ही एलान में तय की जाती हैं. ब्राउज़र, चालू color-scheme के आधार पर सही कंट्रास्ट कलर को अपने-आप चुन लेता है. color-scheme को :root या किसी पैरंट पर light, dark या light dark पर सेट किया जाना चाहिए.

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 120.
  • Safari: 17.5.

Source

light-dark() में नया बदलाव यह है कि अब यह सिर्फ़ रंग की वैल्यू तक सीमित नहीं है. Chrome 150 और इसके बाद के वर्शन में, अब यह दो इमेज वैल्यू भी स्वीकार करता है.

Browser Support

  • Chrome: behind a flag.
  • Edge: behind a flag.
  • Firefox: 150.
  • Safari: not supported.

3. सीएसएस कस्टम फ़ंक्शन (@function)

@function at-rule की मदद से, कस्टम और बार-बार इस्तेमाल किए जा सकने वाले फ़ंक्शन को सीधे नेटिव सीएसएस में तय किया जा सकता है. यह फ़ंक्शन, स्थानीय स्कोप वाली कस्टम प्रॉपर्टी को आर्ग्युमेंट के तौर पर स्वीकार कर सकता है. साथ ही, result डिस्क्रिप्टर का इस्तेमाल करके, वैल्यू की गणना कर सकता है और वैल्यू दिखा सकता है. इससे प्रीप्रोसेसर की ज़रूरत कम हो जाती है.

Browser Support

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

Source

कंटेनर स्टाइल क्वेरी और सीएसएस if() फ़ंक्शन के साथ मिलकर, पसंद के मुताबिक --light-dark() फ़ंक्शन बनाया जा सकता है. यह फ़ंक्शन, किसी भी तरह की वैल्यू के साथ काम करता है. इस डेमो में दिखाया गया है:

4. कंटेनर स्टाइल क्वेरी

सीएसएस कंटेनर क्वेरी का हिस्सा, स्टाइल क्वेरी की मदद से डेवलपर, डिसेंडेंट एलिमेंट पर स्टाइल लागू कर सकते हैं. ये स्टाइल, पैरंट कंटेनर की कंप्यूट की गई कस्टम प्रॉपर्टी वैल्यू पर आधारित होती हैं. इससे, साइज़ कंटेनमेंट की ज़रूरत के बिना डाइनैमिक कॉम्पोनेंट चालू किए जा सकते हैं.

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 151.
  • Safari: 18.

इस डेमो में, स्टाइल क्वेरी का इस्तेमाल करके --theme कस्टम प्रॉपर्टी के आधार पर रंग सेट किए गए हैं.

@container style(--theme: primary) {
  .app-card {
    --bg-light: #fdf2f8; 
    --bg-dark: #ff91d3;  
    --neon-glow: #f472b6;
    --btn-light: #be185d; 
    --btn-dark: #fbcfe8;  
    
    --text-on-light: #500732;
    --text-on-dark: #fff1f2;  
  }
}

@container style(--theme: accent) {
  .app-card {
    --bg-light: #f3e8ff;
    --bg-dark: #4c1d95;  
    --neon-glow: #d8b4fe;
    --btn-light: #7e22ce; 
    --btn-dark: #c084fc;  
    
    --text-on-light: #2e1065; 
    --text-on-dark: #faf5ff;  
  }
}

@container style(--theme: success) {
  /* … */
}

स्टाइल क्वेरी के बारे में ज़्यादा जानें

5. सीएसएस if() फ़ंक्शन

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

Browser Support

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

Source

पिछले डेमो में, if() फ़ंक्शन का इस्तेमाल किया गया है. इससे contrast-color() फ़ंक्शन के आउटपुट के आधार पर, थीम के हिसाब से कंट्रास्ट वाला रंग बनाया जाता है.

--contrast-color: contrast-color(var(--card-bg));
color: if(
    style(--contrast-color: white): var(--text-on-dark);
    else: var(--text-on-light)
);

6. @supports at-rule()

सीएसएस at-rule() फ़ंक्शन का इस्तेमाल @supports के साथ किया जाता है. इससे डेवलपर यह पता लगा सकते हैं कि कोई ब्राउज़र किसी खास ऐट-रूल को पहचानता है या नहीं. जैसे, @starting-style या @view-transition.

उदाहरण के लिए, @function के साथ काम करने वाले फ़ंक्शन की जांच करने के लिए, इसका इस्तेमाल इस तरह करें:

@supports at-rule(@function) {
  /* Code for browsers that support @function goes here */
}

at-rule() का इस्तेमाल करके, सिर्फ़ ऐट-रूल के बुनियादी सपोर्ट की जांच की जा सकती है. इसका इस्तेमाल, खास डिस्क्रिप्टर, प्रील्यूड या पूरे ऐट-रूल ब्लॉक की जांच करने के लिए नहीं किया जा सकता. ऐंकर की गई क्वेरी या स्टाइल क्वेरी जैसी चीज़ों का पता लगाने के लिए, कुछ तरीके उपलब्ध हैं.

@supports at-rule के बारे में ज़्यादा जानें

7. <meta name="text-scale">

text-scale एचटीएमएल मेटा टैग, पेज को इस तरह से ऑप्ट-इन करता है कि <html> रूट एलिमेंट का शुरुआती फ़ॉन्ट साइज़, ओएस और ब्राउज़र लेवल के टेक्स्ट साइज़ की सेटिंग के हिसाब से तय हो. यह खास तौर पर मोबाइल प्लैटफ़ॉर्म के लिए ज़रूरी है.

Browser Support

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

Source

लागू होने के बाद, html एलिमेंट पर फ़ॉन्ट का साइज़ अब ऑपरेटिंग सिस्टम तय करता है. इसलिए, आपको बेस font-size सेट करने की ज़रूरत नहीं है. इसके बाद, अगर आपने em और rem जैसी रिलेटिव यूनिट के साथ लंबाई का इस्तेमाल किया है, तो पिक्सल की कैलकुलेट की गई वैल्यू, फ़ॉन्ट के उस साइज़ पर आधारित होती हैं.

<meta name="text=scale" value="scale">
<style>
html {
  /* Don't set a base font-size here! */
}
</style>

DevTools में रेंडरिंग टैब से, अपनी पसंद के फ़ॉन्ट साइज़ को बदला जा सकता है. वैल्यू बदलने के लिए, ड्रॉपडाउन का इस्तेमाल करें.

<meta name=text-scale> के बारे में ज़्यादा जानें

दूसरा भाग: नैचुरल इंटरैक्शन लागू करना

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

8. linear() ईज़िंग फ़ंक्शन

linear() ईज़िंग फ़ंक्शन की मदद से, ट्रांज़िशन के लिए जटिल और कस्टम कर्व बनाए जा सकते हैं. जैसे, बाउंस, स्प्रिंग या इलास्टिक ओवरशूट. इसके लिए, प्रोग्रेस के तय किए गए पॉइंट के बीच लीनियर इंटरपोलेशन किया जाता है.

Browser Support

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 112.
  • Safari: 17.2.

Source

यहां दिए गए डेमो में, linear() का इस्तेमाल किया गया है. इससे डायलॉग को दिखाने या छिपाने के दौरान, नैचुरल इज़ींग मिलती है.

linear() के बारे में ज़्यादा जानें

9. @starting-style

@starting-style सीएसएस ऐट-रूल, किसी एलिमेंट की प्रॉपर्टी के लिए शुरुआती वैल्यू तय करता है. ये वे प्रॉपर्टी होती हैं जिनमें आपको ट्रांज़िशन करना होता है. ऐसा तब किया जाता है, जब एलिमेंट को पहली बार DOM में रेंडर किया जाता है या जब उसकी display प्रॉपर्टी, none से बदलकर दिखने वाली वैल्यू पर सेट होती है. इससे एंट्री ट्रांज़िशन को आसानी से चालू किया जा सकता है.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.5.

Source

पिछले डेमो में इसका इस्तेमाल, <dialog> को ऐनिमेट-इन करने के लिए किया गया है, ताकि वह पहली बार दिखे.

10. transition-behavior: allow-discrete

transition-behavior प्रॉपर्टी (अक्सर transition शॉर्टहैंड में allow-discrete के तौर पर इस्तेमाल की जाती है) की मदद से, display या overlay जैसी अलग-अलग प्रॉपर्टी को ट्रांज़िशन किया जा सकता है. इससे यह पक्का होता है कि एलिमेंट, छिपने से पहले एग्ज़िट ऐनिमेशन के दौरान दिखते रहें.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.4.

Source

11. sibling-index() और sibling-count()

sibling-index() और sibling-count() सीएसएस फ़ंक्शन, पूर्णांक दिखाते हैं. ये पूर्णांक, किसी एलिमेंट की उसके सिबलिंग के बीच की 1-आधारित पोज़िशन और सिबलिंग की कुल संख्या को दिखाते हैं. ये सीएसएस में, JavaScript के बिना डगमगाते हुए ऐनिमेशन में होने वाली देरी को डाइनैमिक तरीके से कैलकुलेट करने के लिए सबसे सही हैं.

Browser Support

  • Chrome: 138.
  • Edge: 138.
  • Firefox: not supported.
  • Safari: 26.2.

Source

Browser Support

  • Chrome: 138.
  • Edge: 138.
  • Firefox: not supported.
  • Safari: 26.2.

Source

इस डेमो में, डायलॉग के कॉन्टेंट को animation-delay में sibling-index() का इस्तेमाल करके क्रम से दिखाया गया है

dialog[open] > * {
  animation:
    content-entry 0.6s var(--spring) forwards;
  
  /* 0.2s delay for the first item, then staggering by 0.05s via sibling-index()
  */
  animation-delay:
    calc(sibling-index() * 0.05s + 0.2s);
}

12. डायलॉग लाइट डिसमिस (closedby एट्रिब्यूट)

<dialog> एलिमेंट पर मौजूद closedby एट्रिब्यूट (वैल्यू any के साथ) की मदद से, "लाइट डिसमिस" व्यवहार का इस्तेमाल किया जा सकता है. इससे, मोडल डायलॉग पर बाहर क्लिक करने या ESC दबाने पर, वे अपने-आप बंद हो जाते हैं. इसके लिए, कस्टम JavaScript की ज़रूरत नहीं होती.

Browser Support

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

Source

इसे पिछले डेमो में आज़माया जा सकता है.

13. corner-shape

एक्सपेरिमेंट के तौर पर उपलब्ध corner-shape शॉर्टहैंड प्रॉपर्टी की मदद से डेवलपर, गोल कोनों (border-radius) में बदलाव कर सकते हैं. इससे वे bevel, scoop, notch या squircle (superellipse() के ज़रिए) जैसे कस्टम विज़ुअल शेप बना सकते हैं. बॉर्डर, शैडो, और फ़ोकस आउटलाइन, शेप के हिसाब से अपने-आप सेट हो जाती हैं.

Browser Support

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

Source

तीसरा हिस्सा: निर्देशों के साथ नेविगेशन की सुविधा उपलब्ध कराना

उपयोगकर्ता को सही तरीके से जानकारी देने से, कॉन्टेक्स्ट को बनाए रखने और ऐप्लिकेशन के फ़्लो को समझने में मदद मिलती है. इससे, पेज को बार-बार रीलोड करने की ज़रूरत नहीं पड़ती. ऐसा कई तरीकों से किया जा सकता है. इनमें व्यू ट्रांज़िशन भी शामिल हैं, जिन्हें हाल ही में अपडेट किया गया है.

14. एक ही दस्तावेज़ में व्यू ट्रांज़िशन

View Transition API का हिस्सा, एक ही दस्तावेज़ में होने वाले ट्रांज़िशन, सिंगल-पेज ऐप्लिकेशन (एसपीए) में DOM की स्थितियों के बीच ऐनिमेशन बनाने का तरीका उपलब्ध कराते हैं. इसके लिए, ये स्नैपशॉट कैप्चर करते हैं और सीएसएस का इस्तेमाल करके उन्हें ट्रांज़िशन करते हैं.

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 144.
  • Safari: 18.

Source

एक ही दस्तावेज़ में व्यू ट्रांज़िशन के बारे में ज़्यादा जानें

15. एक दस्तावेज़ से दूसरे दस्तावेज़ पर व्यू ट्रांज़िशन

यह View Transition API को मल्टी-पेज ऐप्लिकेशन (एमपीए) के लिए उपलब्ध कराता है. इससे अलग-अलग पेजों पर मौजूद एक जैसे view-transition-name को मैच करके, अलग-अलग दस्तावेज़ों के बीच नेविगेट करते समय, ऐनिमेशन वाले ट्रांज़िशन बनाए जा सकते हैं.

Browser Support

  • Chrome: 126.
  • Edge: 126.
  • Firefox: not supported.
  • Safari: 18.2.

Source

क्रॉस-डॉक्यूमेंट व्यू ट्रांज़िशन के बारे में ज़्यादा जानें

16. व्यू ट्रांज़िशन को एलिमेंट के स्कोप में रखना

Chrome 147 में, element-scoped view transitions की सुविधा लॉन्च की गई थी. इसकी मदद से, किसी खास DOM सबट्री (element.startViewTransition() का इस्तेमाल करके) पर ही व्यू ट्रांज़िशन चलाया जा सकता है. साथ ही, पेज के बाकी हिस्से को चालू और इंटरैक्टिव रखा जा सकता है.

Browser Support

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

एलिमेंट के स्कोप वाली व्यू ट्रांज़िशन शुरू करते समय, यह अलग से काम करता है: यह सिर्फ़ उस सबट्री में view-transition-name वाले एलिमेंट को स्कैन करता है. साथ ही, ::view-transition सूडो को स्कोप रूट पर ही इंजेक्ट किया जाता है. view-transition-scope: all के अपने-आप लागू होने की वजह से, ऐसा करना मुमकिन हो पाता है.

इससे एक साथ कई व्यू ट्रांज़िशन चलाने के साथ-साथ, व्यू ट्रांज़िशन को नेस्ट भी किया जा सकता है. जैसे, इन सूचियों में मौजूद आइटम को शफ़ल करते समय, सूचियों को भी स्वैप किया जा सकता है.

इसके अलावा, ग्रुप के छद्म नामों को अपने-आप नेस्ट किया जाता है. साथ ही, ज़रूरत पड़ने पर ग्रुप-चिल्ड्रन के छद्म नाम के ओवरफ़्लो को काटा जाता है.

स्कोप की गई व्यू ट्रांज़िशन, माइक्रो-इंटरैक्शन और पेज में मौजूद स्टेटफ़ुल मॉर्फ़िंग के लिए सबसे सही होती हैं. इससे विज़ुअल में बदलाव होने पर, उपयोगकर्ता को ज़्यादा जानकारी मिलती है. यह आपके ऐप्लिकेशन को इस्तेमाल करने में आसान बनाने का एक बेहतरीन तरीका है. साथ ही, इससे ऐप्लिकेशन का लुक और फ़ील भी बेहतर होता है. इन छोटी-छोटी बातों से बहुत फ़र्क़ पड़ता है!

एलिमेंट के स्कोप वाली व्यू ट्रांज़िशन के बारे में ज़्यादा जानें

17. दो फ़ेज़ वाली व्यू ट्रांज़िशन

यह एक एक्सपेरिमेंटल सुविधा है. यह सुविधा, नए DOM के तैयार होने का इंतज़ार किए बिना, दस्तावेज़ों के बीच व्यू ट्रांज़िशन को तुरंत शुरू कर देती है. यह सुविधा, सबसे पहले इंटरमीडियरी स्केलेटन स्क्रीन या लोडिंग यूज़र इंटरफ़ेस (यूआई) में ट्रांज़िशन करती है. इसके बाद, दस्तावेज़ों के बीच व्यू ट्रांज़िशन जारी रखती है.

दो फ़ेज़ वाले व्यू ट्रांज़िशन के बारे में ज़्यादा जानें

18. स्क्रोल-ड्रिवन ऐनिमेशन

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

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: behind a flag.
  • Safari: 26.

Source

19. स्क्रोल करने पर ट्रिगर होने वाले ऐनिमेशन

Chrome में स्क्रोल-ट्रिगर किए गए ऐनिमेशन की नई सुविधा उपलब्ध है. स्क्रोल करने पर ट्रिगर होने वाले ऐनिमेशन, स्क्रोल बाउंड्री पार होने पर, समय के हिसाब से सीएसएस के स्टैंडर्ड ऐनिमेशन को ट्रिगर करते हैं. इसके लिए, timeline-trigger का इस्तेमाल करके ट्रिगर को तय किया जाता है और animation-trigger का इस्तेमाल करके इसे चलाया जाता है. इससे, IntersectionObserver के बजाय एक डिक्लेरेटिव विकल्प मिलता है.

Browser Support

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

स्क्रोल करने पर ट्रिगर होने वाले एनिमेशन के लिए, टाइमलाइन-ट्रिगर का इस्तेमाल किया जाता है. ये ट्रिगर चालू या बंद होते हैं.

.element {
  timeline-trigger:
    --t
    view()
    contain 25% contain 75% / entry 105% exit -5%
  ;
}

क्या हो रहा है, यह देखने के लिए इस डेमो में विज़ुअलाइज़र को चालू करें: पहली रेंज, ऐक्टिवेशन रेंज है. इससे यह तय होता है कि ट्रिगर कब चालू होगा. दूसरी रेंज, चालू रेंज होती है. इससे यह तय होता है कि यह रेंज कब तक चालू रहनी चाहिए.

स्क्रोल करने पर ट्रिगर होने वाले ऐनिमेशन के बारे में ज़्यादा जानें

20. scroll-target-group: auto

अब आपके पास एक नेटिव सीएसएस स्क्रोल-स्पाई बनाने का विकल्प है. यह उपयोगकर्ता की स्क्रोल पोज़िशन के आधार पर, नेविगेशन लिंक को अपने-आप हाइलाइट करता है. नेविगेशन सूची में scroll-target-group: auto सेट करने पर, ब्राउज़र aria-current="true" को अपने-आप सेट कर देता है. साथ ही, चालू लिंक पर :target-current सूडो-क्लास लागू कर देता है. इसके बाद, :target-current का इस्तेमाल करके, चालू लिंक को और भी बेहतर बनाया जा सकता है.

Browser Support

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

Source

Browser Support

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

Source

scroll-target-group की मदद से सीएसएस स्क्रोल-स्पाई के बारे में ज़्यादा जानें

21. scrollIntoView() कंटेनर का विकल्प

scrollIntoView() तरीके में container विकल्प मिलता है. target.scrollIntoView({container: 'nearest'}) को सेट करने पर, स्क्रोलिंग को सबसे नज़दीकी पैरंट स्क्रोलर तक सीमित किया जाता है. इससे स्क्रोलिंग को पूरे पेज पर लागू होने से रोका जा सकता है. इससे पेज-लेवल की स्क्रोलिंग में गड़बड़ी नहीं होती.

Browser Support

  • Chrome: 1.
  • Edge: 79.
  • Firefox: 1.
  • Safari: 3.

Source

इस डेमो में दिए गए चेकबॉक्स का इस्तेमाल करके, विकल्प को बंद और चालू करें:

container: "nearest" के बारे में ज़्यादा जानें

22. प्रोग्राम के हिसाब से, अपने-आप होने वाली स्क्रोलिंग की सुविधा

स्क्रोल करने के सभी प्रोग्रामैटिक तरीके (जैसे कि scroll(), scrollTo(), और scrollIntoView()) अब Promise दिखाते हैं. इससे डेवलपर, स्मूद स्क्रोल ऐनिमेशन के पूरा होने का await कर सकते हैं. इसके बाद, वे अन्य लॉजिक (जैसे, हाइलाइट इफ़ेक्ट जोड़ना) को लागू कर सकते हैं.

Browser Support

  • Chrome: 1.
  • Edge: 79.
  • Firefox: 1.
  • Safari: 3.

Source

यहां दिए गए डेमो में, इसे काम करते हुए देखा जा सकता है: एलिमेंट को सबसे पहले स्क्रोल करके व्यू में लाया जाता है. इसके बाद, इसमें हाइलाइट इफ़ेक्ट जोड़ा जाता है.

चौथा हिस्सा: कॉन्टेंट को ज़्यादा से ज़्यादा दिखाएं और शोर कम करें

वेब पर सबसे खराब अनुभवों में से एक यह है कि आपको कॉन्टेंट देखने की उम्मीद हो, लेकिन आपको दखल देने वाले पॉप-अप या बैनर दिखें. विज़ुअल क्लटर और ऐप्लिकेशन बॉर्डर को हटाकर, कॉन्टेंट एरिया को प्राथमिकता दें. साथ ही, लेयर्ड यूज़र इंटरफ़ेस (यूआई) के पीछे दूसरी कार्रवाइयों को ले जाएं.

23. स्क्रोल करने की स्थिति से जुड़ी क्वेरी (scrolled)

सीएसएस कंटेनर क्वेरी का हिस्सा, scroll-state क्वेरी की मदद से, कंटेनर (container-type: scroll-state के साथ) की स्क्रोल स्थिति के आधार पर डिसेंडेंट को स्टाइल किया जा सकता है. scrolled क्वेरी (उदाहरण के लिए, scroll-state(scrolled: bottom)) सबसे हाल के रिलेटिव स्क्रोल की दिशा का पता लगाती है. इससे "हिडी बार" जैसे पैटर्न इस्तेमाल किए जा सकते हैं.

Browser Support

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

"Hidey Bar" पैटर्न के बारे में ज़्यादा जानें

24. ऐंकर किए गए कंटेनर की क्वेरी

सीएसएस ऐंकर पोज़िशनिंग में ऐंकर की गई कंटेनर क्वेरी शामिल होती हैं. इनकी मदद से, यह देखा जा सकता है कि ऐंकर की गई पोज़िशन वाले एलिमेंट पर फ़िलहाल कौनसी फ़ॉलबैक पोज़िशन (उदाहरण के लिए, fallback: bottom या fallback: flip-block) चालू है. इससे, ऐंकर की गई पोज़िशन वाले एलिमेंट (जैसे, टूलटिप ऐरो) की स्टाइलिंग को डाइनैमिक तरीके से अपडेट किया जा सकता है.

Browser Support

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

इस डेमो में, ऐंकर की गई पॉपओवर, ऐंकर की गई कंटेनर क्वेरी का इस्तेमाल करके, व्यूपोर्ट में अपनी फ़ॉलबैक पोज़िशन और पोज़िशन के आधार पर खुद को फिर से पोज़िशन करती है. जब टूलटिप, इनवॉकर के ऊपर खुलती है, तो यह सोर्स से नीचे से ऊपर की ओर ऐनिमेट होती है. जब यह इनवॉकर के नीचे होता है, तो यह ऊपर से नीचे की ओर ऐनिमेट होता है.

25. सीएसएस border-shape

border-shape प्रॉपर्टी की मदद से, नॉन-रेक्टैंगुलर बॉर्डर तय किए जा सकते हैं. इसके लिए, clip-path की तरह ही शेप सिंटैक्स का इस्तेमाल किया जाता है. क्लिपिंग के उलट, border-shape में बॉर्डर, आउटलाइन, और शैडो को कस्टम शेप के साथ विज़ुअल तौर पर अलाइन किया जाता है. यह corner-shape की सुविधाओं से भी आगे है, क्योंकि corner-shape ज़्यादा सुविधाजनक है.border-shape

Browser Support

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

26. सीएसएस shape() फ़ंक्शन

सीएसएस shape() फ़ंक्शन की मदद से, सीएसएस में जटिल ज्यामितीय पाथ को इनलाइन किया जा सकता है. इसका इस्तेमाल clip-path, border-shape या shape-outside जैसी प्रॉपर्टी के साथ किया जा सकता है. इससे ऑर्गैनिक और नॉन-रेक्टैंगुलर शेप बनाए जा सकते हैं, जिनके चारों ओर कॉन्टेंट फ़्लोट कर सकता है.

Browser Support

  • Chrome: 135.
  • Edge: 135.
  • Firefox: 148.
  • Safari: 18.4.

Source

27. हर ऐक्सिस के लिए स्टिकी पोज़िशनिंग

हाल ही में, ओवरफ़्लो स्पेसिफ़िकेशन में बदलाव किया गया है. इसकी वजह से, कंटेनर को सिर्फ़ एक ऐक्सिस के लिए स्क्रोलर के तौर पर इस्तेमाल किया जा सकता है. इसलिए, अब स्टिक की गई पोज़िशन, दो अलग-अलग स्क्रोल कंटेनर (हर ऐक्सिस के लिए एक) को एक साथ ट्रैक कर सकती है. इससे टेबल में स्टिकी फ़र्स्ट कॉलम और टॉप रो, सिंगल-ऐक्सिस स्क्रोल कंटेनर में भी उम्मीद के मुताबिक काम करती हैं.

Browser Support

  • Chrome: 56.
  • Edge: 16.
  • Firefox: 32.
  • Safari: 13.

यह सुविधा, Chrome 148 में एक्सपेरिमेंटल वेब प्लैटफ़ॉर्म फ़ीचर फ़्लैग चालू करके टेस्ट की जा सकती है.

हर ऐक्सिस के लिए position: sticky के बारे में ज़्यादा जानें

पांचवां भाग: डिवाइस के साइज़, डाइमेंशन या कॉन्फ़िगरेशन के हिसाब से ढालना

वेब की सबसे खास बातों में से एक यह है कि इसे अपनी ज़रूरत के हिसाब से इस्तेमाल किया जा सकता है. उपयोगकर्ता, अलग-अलग डिवाइसों से वेब पर नेविगेट कर सकते हैं. हर डिवाइस के साथ इंटरैक्ट करने का तरीका अलग होता है. लेआउट को डिवाइस और इनपुट के तरीके के हिसाब से अडैप्ट करना चाहिए. भले ही, वर्चुअल कीबोर्ड खुला हो या टच टारगेट चालू हों. वेब के लिए डिज़ाइन करते समय, डिवाइस के साइज़, डाइमेंशन या कॉन्फ़िगरेशन को ध्यान में रखने से, आपकी साइट या वेब ऐप्लिकेशन को बेहतर लुक मिलता है. साथ ही, यह उपयोगकर्ताओं की उम्मीदों के मुताबिक होता है.

28. ओवरस्क्रोल जेस्चर (स्वाइप किए जा सकने वाले क्षेत्र)

फ़ॉर्म फ़ैक्टर के हिसाब से ढलने का एक उदाहरण, मोबाइल वेब पर स्वाइप और जेस्चर के आधार पर इंटरैक्शन करने की सुविधा है. इनमें से कुछ इफ़ेक्ट पाने के लिए, स्क्रोलर का इस्तेमाल किया जा सकता है. हालांकि, यह हमेशा एक सहज तरीका नहीं होता.

Chrome की टीम, OpenUI कम्यूनिटी ग्रुप के साथ मिलकर, एक ऐसे समाधान पर काम कर रही है जिसमें एलान किया जा सकता है. इससे आपको overscrollcontainer और कमांड इनवोकर का इस्तेमाल करके, स्वाइप किए जा सकने वाले नेटिव एरिया बनाने की सुविधा मिलती है. जैसे, स्वाइप की जा सकने वाली Gmail सूचियां या स्वाइप करके बंद किए जा सकने वाले साइड मेन्यू. ये एरिया, टच और स्क्रोल करने पर आसानी से काम करते हैं.

ज़्यादा स्क्रोल करने के जेस्चर के बारे में ज़्यादा जानें

29. HTML-in-Canvas

HTML-in-Canvas API एक बड़ा बदलाव है. इससे डेवलपर, <canvas> के अंदर असली DOM एलिमेंट रख सकते हैं. इसके लिए, layoutsubtree एट्रिब्यूट का इस्तेमाल किया जाता है. इन एलिमेंट को पूरी तरह से खोजा जा सकता है और इन्हें ऐक्सेस किया जा सकता है. साथ ही, ये ब्राउज़र की सुविधाओं के साथ काम करते हैं. जैसे, अपने-आप भरने की सुविधा. साथ ही, WebGL/WebGPU शेडर को इनके साथ नेटिव तौर पर इंटरैक्ट करने की अनुमति देते हैं.

लाइटनिंग राउंड

वेब को बेहतर बनाने वाली कुछ अन्य सुविधाओं के बारे में खास जानकारी.

30. डीओएम की स्थिति को बनाए रखते हुए मूव करना (moveBefore())

moveBefore() DOM तरीके से, DOM नोड (जैसे, वीडियो, iframe या फ़ोकस किए गए इनपुट) को उनकी स्थिति बदले बिना या रीलोड ट्रिगर किए बिना फिर से पैरंट किया जा सकता है.

इसका मतलब है कि वीडियो चलते रहते हैं, iframe फिर से लोड नहीं होते, सीएसएस ऐनिमेशन फिर से शुरू नहीं होते, और इनपुट फ़ील्ड पर फ़ोकस बना रहता है, क्योंकि उन्हें आपके लेआउट में फिर से पैरंट किया जाता है.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: 144.
  • Safari: not supported.

Source

moveBefore() के बारे में ज़्यादा जानें

31. सीएसएस text-fit

text-fit एक एक्सपेरिमेंटल सीएसएस प्रॉपर्टी है. यह फ़ॉन्ट-साइज़ को डाइनैमिक तरीके से स्केल करती है, ताकि टेक्स्ट की लाइनें अपने कंटेनिंग एलिमेंट (उदाहरण के लिए, text-fit: grow per-line-all) की चौड़ाई के हिसाब से सटीक तरीके से फ़िट हो सकें.

text-fit के बारे में ज़्यादा जानें

32. सीएसएस text-box (text-box-trim और text-box-edge)

text-box प्रॉपर्टी (और इसकी लॉन्गहैंड प्रॉपर्टी text-box-trim और text-box-edge) टेक्स्ट के ऊपर और नीचे मौजूद वर्टिकल स्पेस (लीडिंग) को कम करती है. इससे वर्टिकल अलाइनमेंट और सेंटरिंग सही तरीके से होती है.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: behind a flag.
  • Safari: 18.2.

Source

text-trim के बारे में ज़्यादा जानें

33. सीएसएस गैप डेकोरेशन

सीएसएस गैप डेकोरेशन, ग्रिड और फ़्लेक्सबॉक्स में column-rule जोड़ते हैं. साथ ही, एक नई row-rule प्रॉपर्टी पेश करते हैं. इससे डेवलपर, लाइनों और कॉलम के बीच के गटर को स्टाइल कर सकते हैं. अब आपको लाइनों और कॉलम के बीच के नियमों को स्टाइल करने के लिए, बॉर्डर या सूडो-एलिमेंट का इस्तेमाल करने की ज़रूरत नहीं है.

Browser Support

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

सीएसएस गैप डेकोरेशन के बारे में ज़्यादा जानें

34. स्क्रोलबार के हिसाब से व्यूपोर्ट यूनिट (vw, vh वगैरह)

व्यूपोर्ट यूनिट, जैसे कि vw और vh, स्क्रोलबार के साइज़ को अपने-आप घटा देती हैं. ऐसा तब होता है, जब स्क्रोलबार दिखने की गारंटी होती है. इसके लिए, :root पर overflow-y: scroll या scrollbar-gutter: stable का इस्तेमाल किया जाता है. इससे, एलिमेंट को 100vw पर सेट करते समय, अनजाने में हॉरिज़ॉन्टल ओवरफ़्लो होने से रोका जा सकता है.

Browser Support

  • Chrome: 20.
  • Edge: 12.
  • Firefox: 19.
  • Safari: 6.

स्क्रोलबार के हिसाब से व्यूपोर्ट यूनिट के बारे में ज़्यादा जानें

35. स्यूडो-एलिमेंट के लिए JavaScript का ऐक्सेस

वेब एपीआई अब सीएसएस के सूडो-एलिमेंट (जैसे, ::before या ::after) को JavaScript के लिए उपलब्ध कराते हैं.

Element.pseudo(type) का इस्तेमाल करके, CSSPseudoElement इंस्टेंस को वापस पाया जा सकता है. साथ ही, Event.pseudoTarget का इस्तेमाल करके यह देखा जा सकता है कि किस सूडो-एलिमेंट ने इवेंट को ट्रिगर किया है.

Browser Support

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

CSSPseudoElement के बारे में ज़्यादा जानें

नतीजा

वेब यूज़र इंटरफ़ेस (यूआई) में नया क्या है, इस बारे में हमारी खास जानकारी यहीं खत्म होती है. हमें उम्मीद है कि आपको ये सुविधाएं पसंद आई होंगी और इनकी मदद से, कुछ बेहतरीन इंटरफ़ेस बनाए जा सकेंगे. अगले साल मिलते हैं!