ट्रिगनोमेट्रिक फ़ंक्शन

Chrome 111 ने sin(), cos(), tan(), asin(), acos(), atan(), और atan2() त्रिकोणमितीय फ़ंक्शन के साथ काम करने की सुविधा जोड़ी. इस वजह से, ये सभी मुख्य इंजन पर उपलब्ध हो गए. ये फ़ंक्शन, ऐनिमेशन और लेआउट के लिए बहुत काम के होते हैं. उदाहरण के लिए, अब किसी चुने गए केंद्र के चारों ओर वृत्त पर तत्व डालना ज़्यादा आसान हो गया है.

सीएसएस में त्रिकोणमितीय फ़ंक्शन के बारे में ज़्यादा जानें.

मुश्किल nवां-* चुनने की सुविधा

:nth-child() स्यूडो-क्लास सिलेक्टर की मदद से, डीओएम में एलिमेंट को उनके इंडेक्स के हिसाब से चुना जा सकता है. An+B माइक्रोसिंटैक्स का इस्तेमाल करके, यह बेहतर तरीके से कंट्रोल किया जा सकता है कि आपको कौनसे एलिमेंट चुनने हैं.

डिफ़ॉल्ट रूप से, :nth-*() के छद्म सभी चाइल्ड एलिमेंट को खाते में ले जाते हैं. Chrome 111 से, आपके पास :nth-child() और :nth-last-child() में सिलेक्टर की सूची पास करने का विकल्प है. इस तरह, An+B के काम करने से पहले, बच्चों की सूची को पहले से फ़िल्टर किया जा सकता है.

नीचे दिए गए डेमो में, 3n+1 लॉजिक को सिर्फ़ छोटी डॉल पर लागू किया गया है. इसके लिए, उन्हें of .small का इस्तेमाल करके पहले से फ़िल्टर करना होगा. इस्तेमाल किए गए सिलेक्टर को डाइनैमिक तौर पर बदलने के लिए, ड्रॉपडाउन का इस्तेमाल करें.

मुश्किल nवें-* चयनों के बारे में ज़्यादा जानें.

स्कोप

Chrome 118 ने @scope के लिए सहायता जोड़ी है. यह एक नियम है जो आपको दस्तावेज़ के किसी खास सबट्री से मिलान करने वाले सिलेक्टर को स्कोप की सुविधा देता है. स्कोप वाली स्टाइलिंग की मदद से, चुने गए एलिमेंट के बारे में सटीक जानकारी दी जा सकती है. इसके लिए, आपको खास तौर पर चुने जाने वाले सिलेक्टर लिखने या उन्हें डीओएम स्ट्रक्चर में बेहतर तरीके से जोड़ने की ज़रूरत नहीं है.

स्कोप वाली सबट्री को स्कोपिंग रूट (ऊपरी सीमा) और वैकल्पिक स्कोपिंग सीमा (निचली सीमा) से तय किया जाता है.

@scope (.card) { … } /* scoping root */
@scope (.card) to (.card__content) { … } /* scoping root + scoping limit*/

स्कोप ब्लॉक में रखे गए स्टाइल के नियम, नक्काशी करके बनाए गए सबट्री के एलिमेंट को ही टारगेट करेंगे. उदाहरण के लिए, नीचे दिया गया स्कोप वाला स्टाइल नियम सिर्फ़ ऐसे <img> एलिमेंट को टारगेट करता है जो .card एलिमेंट और [data-component] सिलेक्टर से मेल खाने वाले किसी भी नेस्ट किए गए कॉम्पोनेंट के बीच होते हैं.

@scope (.card) to ([data-component]) {
  img { … }
}

नीचे दिए गए डेमो में, कैरसेल कॉम्पोनेंट में मौजूद <img> एलिमेंट, लागू की गई सीमा की वजह से मैच नहीं हुए हैं.

स्कोप डेमो का स्क्रीनशॉट

स्कोप का लाइव डेमो

"अपने सिलेक्टर की पहुंच को सीमित करने के लिए @scope का इस्तेमाल करने का तरीका" लेख में @scope के बारे में ज़्यादा जानें. इस लेख में, :scope सिलेक्टर के बारे में बताया गया है. साथ ही, यह भी बताया गया है कि खास तौर पर तय की गई वैल्यू को कैसे हैंडल किया जाता है, प्रीलूड-लेस स्कोप, और कैस्केड पर इसका क्या असर पड़ता है@scope.

नेस्ट करना

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

dl {
  /* dt styles */
  
  dt {
    /* dl dt styles */
  }

  dd {
    /* dl dd styles */
  }
}

/* same as */
dt {
  /* dt styles */
}

dl dt {
  /* dl dt styles */
}

dl dd {
  /* dl dd styles */
}

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

नेस्ट करने के बारे में ज़्यादा जानें.

सबग्रिड

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

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

सबग्रिड के बारे में ज़्यादा जानें.

शुरुआती अक्षर

Chrome 110 में साल की शुरुआत में initial-letter प्रॉपर्टी, सीएसएस की एक छोटी लेकिन दमदार सुविधा है. यह शुरुआती अक्षरों की प्लेसमेंट के लिए स्टाइल सेट करती है. अक्षरों को ड्रॉप या उभरी हुई स्थिति में रखा जा सकता है. प्रॉपर्टी में दो आर्ग्युमेंट स्वीकार किए जाते हैं: पहला, लेटर को उससे जुड़े पैराग्राफ़ में कितनी गहराई से डालना है और दूसरा, लेटर को उसके ऊपर के लेटर को कितना बढ़ाना है, इसके लिए. आपके पास इन दोनों को एक साथ इस्तेमाल करने का विकल्प भी है, जैसा कि नीचे दिए गए डेमो में किया गया है.

शुरुआती अक्षर का स्क्रीनशॉट

शुरुआती अक्षर का डेमो

शुरुआती अक्षर के बारे में ज़्यादा जानें.

text-wrap: बैलेंस और प्रिटी

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

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

text-wrap: Balance के बारे में ज़्यादा जानें.

एचडी कलर स्पेस (कलर लेवल 4)

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

सीएसएस और कलर अब: - देख सकते हैं कि उपयोगकर्ता का स्क्रीन हार्डवेयर, अलग-अलग तरह के एचडीआर कलर में काम कर सकता है या नहीं. - जांचें कि उपयोगकर्ता का ब्राउज़र, Oklch या Display P3 जैसे कलर सिंटैक्स को समझता है या नहीं. - Oklab, Oklch, HWB, Display P3, Rec.2020, XYZ वगैरह में एचडीआर के रंग तय करें. - एचडीआर के रंगों के साथ ग्रेडिएंट बनाएं. - अलग-अलग रंगों वाले स्पेस में ग्रेडिएंट इंटरपोलेट करें. - color-mix() के साथ रंगों को मिलाएं. - मिलते-जुलते कलर सिंटैक्स का इस्तेमाल करके अलग-अलग रंगों के वैरिएंट बनाएं.

कलर 4 और कलर स्पेस के बारे में ज़्यादा जानें.

color-mix फ़ंक्शन

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

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

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

मिलता-जुलता कलर सिंटैक्स

कलर वैरिएंट बनाने के लिए, रिलेटिव कलर सिंटैक्स (आरसीएस), color-mix() का इस्तेमाल करने का एक बेहतर तरीका है. यह color-mix() से थोड़ा ज़्यादा असरदार है. हालांकि, यह रंग के साथ काम करने के लिए एक अलग रणनीति है. रंग हल्का करने के लिए, color-mix() सफ़ेद रंग को मिक्स कर सकता है. इसमें आरसीएस, हल्के रंग वाले चैनल का सटीक ऐक्सेस देता है. साथ ही, प्रोग्राम के हिसाब से, हल्के रंग को कम या ज़्यादा करने के लिए, चैनल पर calc() का इस्तेमाल करता है.

आरसीएस की मदद से, किसी रंग में रिलेटिव और पूरी तरह से बदलाव किए जा सकते हैं. रिलेटिव बदलाव वह है जिसमें सैचुरेशन या लाइटनेस की मौजूदा वैल्यू ली जाती है और उसमें calc() की मदद से बदलाव किया जाता है. ऐब्सलूट बदलाव वह होता है जिसमें किसी चैनल की वैल्यू को बिलकुल नए वैल्यू से बदला जाता है. जैसे, ओपैसिटी को 50% पर सेट करना. इस सिंटैक्स से आपको थीमिंग, सिर्फ़ समय के वैरिएंट वगैरह के हिसाब से काम के टूल मिलते हैं.

रिलेटिव कलर सिंटैक्स के बारे में ज़्यादा जानें.

कंटेनर की क्वेरी को साइज़ देना

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

इस सुविधा का इस्तेमाल करने के लिए, पहले उस एलिमेंट पर कंटेनमेंट सेट अप करें जिसके लिए आपको क्वेरी करनी है. इसके बाद, मीडिया क्वेरी की तरह ही स्टाइल लागू करने के लिए, साइज़ पैरामीटर के साथ @container का इस्तेमाल करें. कंटेनर क्वेरी के साथ ही आपको कंटेनर क्वेरी साइज़ भी मिलते हैं. नीचे दिए गए डेमो में, कंटेनर क्वेरी साइज़ cqi (इनलाइन कंटेनर का साइज़ को दिखाता है) का इस्तेमाल, कार्ड के हेडर को साइज़ करने के लिए किया गया है.

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

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

Chrome 111 में, स्टाइल से जुड़ी क्वेरी के कुछ हिस्से लागू किए गए हैं. फ़िलहाल, स्टाइल क्वेरी की मदद से, @container style() का इस्तेमाल करते समय पैरंट एलिमेंट पर कस्टम प्रॉपर्टी की वैल्यू के लिए क्वेरी की जा सकती है. उदाहरण के लिए, क्वेरी तब करें, जब कोई कस्टम प्रॉपर्टी वैल्यू मौजूद हो या उसे किसी खास वैल्यू पर सेट किया गया हो, जैसे कि @container style(--rain: true).

स्टाइल क्वेरी का स्क्रीनशॉट

शैली क्वेरी डेमो

यह सीएसएस में क्लास के नाम इस्तेमाल करने जैसा ही लगता है, लेकिन स्टाइल क्वेरी के कुछ फ़ायदे हैं. पहली वजह यह है कि स्टाइल क्वेरी की मदद से, बदली हुई स्थितियों के लिए सीएसएस में वैल्यू को ज़रूरत के मुताबिक अपडेट किया जा सकता है. साथ ही, लागू करने के आने वाले वर्शन में, आप लागू की गई स्टाइल, जैसे कि style(60 <= --weather <= 70) और style(font-style: italic) जैसे प्रॉपर्टी-वैल्यू पेयर के आधार पर स्टाइल तय करने के लिए, वैल्यू की रेंज पर क्वेरी कर पाएंगे.

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

:has() सिलेक्टर

करीब 20 सालों से, डेवलपर ने सीएसएस में "माता-पिता के लिए सिलेक्टर" विकल्प मांगा है. Chrome 105 में, :has() सिलेक्टर की मदद से अब यह काम किया जा सकता है. उदाहरण के लिए, .card:has(img.hero) का इस्तेमाल करने पर, वे .card एलिमेंट चुने जाएंगे जिनमें बच्चे के तौर पर हीरो इमेज शामिल है.

:has() डेमो का स्क्रीनशॉट

:has() लाइव डेमो

:has() मिलते-जुलते सिलेक्टर सूची को इसके तर्क के तौर पर स्वीकार करता है. इसलिए, आप पैरंट एलिमेंट के मुकाबले कहीं ज़्यादा विकल्प चुन सकते हैं. अलग-अलग सीएसएस कॉमबिनेटर का इस्तेमाल करके, न सिर्फ़ डीओएम ट्री को बढ़ाया जा सकता है, बल्कि अलग-अलग साइडवे भी चुने जा सकते हैं. उदाहरण के लिए, li:has(+ li:hover) उस <li> एलिमेंट को चुनेगा जो हाल ही में कर्सर घुमाने पर दिखने वाले <li> एलिमेंट से पहले है.

सीएसएस :has() सिलेक्टर के बारे में ज़्यादा जानें.

मीडिया क्वेरी अपडेट करें

update मीडिया क्वेरी की मदद से, यूज़र इंटरफ़ेस (यूआई) को डिवाइस की रीफ़्रेश दर के हिसाब से बदला जा सकता है. यह सुविधा, fast, slow या none की वैल्यू के बारे में रिपोर्ट कर सकती है. यह वैल्यू अलग-अलग डिवाइसों की सुविधाओं से जुड़ी होती है.

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

@media (अपडेट) के बारे में ज़्यादा जानें.

मीडिया क्वेरी को स्क्रिप्ट करना

स्क्रिप्टिंग मीडिया क्वेरी का इस्तेमाल यह देखने के लिए किया जा सकता है कि JavaScript उपलब्ध है या नहीं. प्रोग्रेसिव एन्हैंसमेंट के लिए यह बहुत अच्छा है. इस मीडिया क्वेरी से पहले, JavaScript की सुविधा उपलब्ध थी या नहीं, यह पता लगाने की एक रणनीति, एचटीएमएल में nojs क्लास को रखना और उसे JavaScript की मदद से हटाना था. इन स्क्रिप्ट को हटाया जा सकता है, क्योंकि सीएसएस के पास अब JavaScript का पता लगाने और उसके हिसाब से बदलाव करने का एक तरीका है.

Chrome DevTools की मदद से किसी पेज पर JavaScript को चालू और बंद करने का तरीका जानें.

किसी वेबसाइट पर थीम स्विच करने के बारे में सोचें. स्क्रिप्टिंग मीडिया क्वेरी, सिस्टम की प्राथमिकता के हिसाब से स्विच करने में मदद कर सकती है, क्योंकि JavaScript उपलब्ध नहीं है. अगर JavaScript उपलब्ध है, तो स्विच को चालू या बंद करने के बजाय हाथ के जेस्चर से स्वाइप किया जा सकता है. अगर स्क्रिप्टिंग उपलब्ध है, तो UX को अपग्रेड करने के कई बेहतरीन अवसर हैं. साथ ही, अगर स्क्रिप्टिंग बंद है, तो बेहतर बुनियाद अनुभव मिलता है.

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

कम पारदर्शिता वाली मीडिया क्वेरी

नॉन-ओपेक इंटरफ़ेस की वजह से सिर दर्द हो सकता है या देखने से जुड़ी कई तरह की समस्याएं होने पर देखने में परेशानी हो सकती है. यही वजह है कि Windows, macOS, और iOS में सिस्टम की ऐसी प्राथमिकताएं होती हैं जो यूज़र इंटरफ़ेस (यूआई) की पारदर्शिता को कम कर सकती हैं या उसे हटा सकती हैं. prefers-reduced-transparency के लिए यह मीडिया क्वेरी, दूसरी मीडिया क्वेरी के साथ फ़िट बैठती है. इससे, आपको उपयोगकर्ताओं के हिसाब से बदलाव करने के साथ-साथ क्रिएटिव बनने का मौका भी मिलता है.

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

@media (prefers-reduced-transparency) के बारे में ज़्यादा जानें.

ट्रांज़िशन देखना

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

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

Chrome 111 में शिप किए गए एक पेज के ऐप्लिकेशन के लिए, व्यू ट्रांज़िशन एपीआई. व्यू के ट्रांज़िशन के बारे में ज़्यादा जानें.

लीनियर-ईज़िंग फ़ंक्शन

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

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

linear() के बारे में और जानें. linear() कर्व बनाने के लिए, लीनियर ईज़िंग जनरेटर का इस्तेमाल करें.

स्क्रोल खत्म करें

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

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

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

स्क्रोल करके चलने वाले ऐनिमेशन

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

ScrollTimeline की मदद से, स्क्रोलर की प्रोग्रेस को ट्रैक किया जा सकता है, जैसा कि नीचे दिए गए डेमो में दिखाया गया है. जैसे-जैसे पेज के आखिर तक स्क्रोल किया जाता है, वैसे-वैसे टेक्स्ट, अपने-आप हर एक वर्ण के बारे में बताता है.

ViewTimeline की मदद से, स्क्रोलपोर्ट को पार करने वाले एलिमेंट को ट्रैक किया जा सकता है. यह ठीक उसी तरह काम करता है जिस तरह Intersection निगरानी किसी एलिमेंट को ट्रैक करती है. नीचे दिए गए डेमो में, स्क्रोलपोर्ट में आने के समय से लेकर उसके बीच में आने तक, हर इमेज अपने-आप सामने आती है.

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

स्क्रोल करके चलने वाले ऐनिमेशन के बारे में ज़्यादा जानने के लिए, पूरी जानकारी वाला यह लेख देखें या Scroll-powered-animations.style पर जाएं जिसमें कई डेमो दिए गए हैं.

स्थगित टाइमलाइन अटैचमेंट

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

ऐनिमेशन वाले एलिमेंट को किसी ऐसे एलिमेंट की स्क्रोल-टाइमलाइन ढूंढने की अनुमति देने के लिए जो पहले शेयर नहीं की गई है. इसके लिए, शेयर किए गए पैरंट पर timeline-scope प्रॉपर्टी का इस्तेमाल करें. ऐसा करने पर, तय किए गए scroll-timeline या view-timeline को इस नाम से अटैच किया जा सकता है. इससे, फ़ाइल का दायरा काफ़ी बड़ा हो जाता है. इसके साथ, उस शेयर किए गए अभिभावक का कोई भी बच्चा उस नाम के साथ टाइमलाइन का इस्तेमाल कर सकता है.

timeline-scope के बारे में और जानें.

प्रॉपर्टी के अलग-अलग ऐनिमेशन

साल 2023 में एक और नई सुविधा, अलग-अलग तरह के ऐनिमेशन को ऐनिमेट करना है. जैसे, display: none के लिए ऐनिमेशन बनाना. Chrome 116 से, मुख्य-फ़्रेम के नियमों में display और content-visibility का इस्तेमाल किया जा सकता है. किसी अलग प्रॉपर्टी का ट्रांज़िशन 0% पॉइंट के बजाय 50% पॉइंट पर भी किया जा सकता है. ऐसा करने के लिए, transition-behavior प्रॉपर्टी की मदद से allow-discrete कीवर्ड का इस्तेमाल किया जा सकता है या transition प्रॉपर्टी में शॉर्टहैंड के तौर पर ऐसा किया जा सकता है.

अलग-अलग ऐनिमेशन बदलने के बारे में ज़्यादा जानें.

@starting-style

@starting-style सीएसएस नियम, display: none पर और उससे ऐनिमेट करने के लिए नई वेब क्षमताओं पर बनता है. इस नियम की मदद से, किसी एलिमेंट को "ओपन-ओपन" (खुली होने से पहले) की ऐसी स्टाइल दी जा सकती है जिसे पेज पर एलिमेंट के खुलने से पहले ब्राउज़र देख सकता है. यह एंट्री ऐनिमेशन के लिए और पॉपओवर या डायलॉग जैसे एलिमेंट में ऐनिमेशन बनाने के लिए बहुत काम का है. यह तब भी काम का हो सकता है, जब कोई एलिमेंट बनाया जा रहा हो और आपको उसे ऐनिमेट करना हो. नीचे दिए गए उदाहरण को देखें, जो popover एट्रिब्यूट (अगला सेक्शन देखें) को ऐनिमेट करता है. साथ ही, व्यूपोर्ट के बाहर से आसानी से ऊपरी लेयर में यह उदाहरण दिखाता है.

@starting-style और अन्य एंट्री ऐनिमेशन के बारे में ज़्यादा जानें.

ओवरले

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

ओवरले और बाहर निकलने के दूसरे ऐनिमेशन के बारे में ज़्यादा जानें.

पॉपओवर

पॉपओवर एपीआई की मदद से, पेज के बाकी हिस्से में सबसे ऊपर मौजूद एलिमेंट बनाए जा सकते हैं. इन सुझावों में मेन्यू, चुनने, और टूलटिप शामिल हो सकते हैं. पॉपओवर बनाने के लिए, पॉप-अप होने वाले एलिमेंट में popover एट्रिब्यूट और id जोड़ें. इसके बाद, popovertarget="my-popover" का इस्तेमाल करके, इसके id एट्रिब्यूट को शुरू करने वाले बटन से जोड़ें. पॉपओवर एपीआई में ये सुविधाएं काम करती हैं:

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

'चुनें' में हॉरिज़ॉन्टल नियम

एचटीएमएल में एक और छोटा सा बदलाव इस साल Chrome और Safari में किया गया. इसके तहत, हॉरिज़ॉन्टल रूल एलिमेंट (<hr> टैग) को <select> एलिमेंट में जोड़ा जा सकता है, ताकि कॉन्टेंट को विज़ुअल तौर पर अलग किया जा सके. पहले, <hr> टैग को किसी चुने गए हिस्से में रखने से, सिर्फ़ रेंडर नहीं होता था. हालांकि, इस साल Safari और Chrome, दोनों में यह सुविधा काम करती है. इससे <select> एलिमेंट में कॉन्टेंट को अलग-अलग करने में मदद मिलती है.

स्क्रीनशॉट चुनें

लाइव डेमो चुनें

'चुनें' में घंटे का इस्तेमाल करें सुविधा का इस्तेमाल करने के बारे में ज़्यादा जानें

:उपयोगकर्ता के लिए मान्य और अमान्य सूडो क्लास

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

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

उपयोगकर्ता-* फ़ॉर्म की पुष्टि के लिए गलत एलिमेंट का इस्तेमाल करने के बारे में ज़्यादा जानें.

खास अकॉर्डियन

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

Chrome 120 में नया है, <details> एलिमेंट के लिए name एट्रिब्यूट इस्तेमाल किया जा सकता है. इस एट्रिब्यूट का इस्तेमाल करने पर, एक ही name वैल्यू वाले कई <details> एलिमेंट एक सिमैंटिक ग्रुप बनाते हैं. ग्रुप का ज़्यादा से ज़्यादा एक एलिमेंट एक बार में खोला जा सकता है: जब ग्रुप के किसी <details> एलिमेंट को खोला जाता है, तो पहले खुला हुआ एलिमेंट अपने-आप बंद हो जाएगा. इस तरह के अकॉर्डियन को खास अकॉर्डियन कहा जाता है.

यह ज़रूरी नहीं है कि <details> एलिमेंट जो किसी खास अकॉर्डियन का हिस्सा हों. यह ज़रूरी नहीं है कि ये एलिमेंट मिलते-जुलते हों. इन्हें दस्तावेज़ में कहीं भी दिखाया जा सकता है.