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

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 में उपलब्ध है. व्यू ट्रांज़िशन के बारे में ज़्यादा जानें.

linear-easing फ़ंक्शन

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

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

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

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

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

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

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

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

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

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

ViewTimeline की मदद से, किसी एलिमेंट को तब ट्रैक किया जा सकता है, जब वह स्क्रोलपोर्ट को पार करता है. यह 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% पॉइंट पर भी ट्रांज़िशन किया जा सकता है. इसे allow-discrete कीवर्ड का इस्तेमाल करके, transition-behavior प्रॉपर्टी के साथ हासिल किया जाता है. इसके अलावा, इसे 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 एट्रिब्यूट इस्तेमाल करने की सुविधा जोड़ी गई है. इस एट्रिब्यूट का इस्तेमाल करने पर, <details> के कई ऐसे एलिमेंट मिलकर एक सिमैंटिक ग्रुप बनाते हैं जिनकी name वैल्यू एक जैसी होती है. ग्रुप में मौजूद ज़्यादा से ज़्यादा एक एलिमेंट को एक बार में खोला जा सकता है: ग्रुप में मौजूद <details> एलिमेंट में से किसी एक को खोलने पर, पहले से खुला हुआ एलिमेंट अपने-आप बंद हो जाएगा. इस तरह के अकॉर्डियन को एक्सक्लूसिव अकॉर्डियन कहा जाता है.

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