त्रिकोणमितीय फ़ंक्शन

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

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

nth-* सिलेक्टर का इस्तेमाल करके जटिल तरीके से एलिमेंट चुनना

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

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

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

nth-* के ज़्यादा जटिल सिलेक्टर के बारे में ज़्यादा जानें.

स्कोप

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 Live Demo

"चयनकर्ताओं की पहुंच को सीमित करने के लिए, @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 की मदद से, ज़्यादा जटिल ग्रिड बनाए जा सकते हैं. साथ ही, चाइल्ड लेआउट के बीच बेहतर अलाइनमेंट किया जा सकता है. इसकी मदद से, किसी ग्रिड के अंदर मौजूद ग्रिड, बाहरी ग्रिड की पंक्तियों और कॉलम को अपना सकता है. इसके लिए, ग्रिड की पंक्तियों या कॉलम के लिए subgrid का इस्तेमाल किया जाता है.

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

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

Initial-letter

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

पहले अक्षर वाला स्क्रीनशॉट

Initial-letter डेमो

initial-letter के बारे में ज़्यादा जानें.

text-wrap: balance and pretty

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

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

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

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

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

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

Color 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(), रिलेटिव सिलेक्टर लिस्ट को अपने तर्क के तौर पर स्वीकार करता है. इसलिए, पैरंट एलिमेंट के अलावा और भी कई एलिमेंट चुने जा सकते हैं. अलग-अलग सीएसएस कॉम्बिनेटर का इस्तेमाल करके, न सिर्फ़ DOM ट्री में ऊपर की ओर जाया जा सकता है, बल्कि साइडवे सिलेक्शन भी किए जा सकते हैं. उदाहरण के लिए, li:has(+ li:hover), <li> एलिमेंट को चुनेगा, जो फ़िलहाल कर्सर वाले <li> एलिमेंट से पहले आता है.

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

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

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

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

@media (update) के बारे में ज़्यादा जानें.

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

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

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

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

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

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

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

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

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

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

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

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

सिंगल पेज ऐप्लिकेशन के लिए View Transitions API, Chrome 111 में उपलब्ध है. View Transitions के बारे में ज़्यादा जानें.

linear-easing फ़ंक्शन

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

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

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

स्क्रोल करने की प्रोसेस खत्म करें

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

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

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

स्क्रोल करने पर दिखने वाले ऐनिमेशन

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

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

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

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

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

टाइमलाइन में बाद में अटैचमेंट जोड़ने की सुविधा

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

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

timeline-scope के बारे में ज़्यादा जानें.

डिस्क्रीट प्रॉपर्टी ऐनिमेशन

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

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

@starting-style

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

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

ओवरले

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

ओवरले और अन्य एक्ज़िट ऐनिमेशन के बारे में ज़्यादा जानें.

Popover

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

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

चुने गए टेक्स्ट में हॉरिज़ॉन्टल लाइनें

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

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

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

select में hr का इस्तेमाल करने के बारे में ज़्यादा जानें

:user-valid और :user-invalid सूडो क्लास

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

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

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

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

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

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

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