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

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 का इस्तेमाल करके उन्हें पहले से फ़िल्टर किया गया है. इस्तेमाल किए गए सिलेक्टर को डाइनैमिक तौर पर बदलने के लिए, ड्रॉपडाउन का इस्तेमाल करें.

complex nth-* selections के बारे में ज़्यादा जानें.

स्कोप

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

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

@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 का इस्तेमाल कैसे करें" लेख पढ़ें. इस लेख में, आपको :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 राइटर, और अनुवादकों को प्रोजेक्ट की ऐसी कॉपी बनाने की ज़रूरत नहीं पड़ती जो लेआउट में "फ़िट" हो. सबग्रिड की मदद से, कॉन्टेंट के हिसाब से लेआउट में बदलाव किया जा सकता है.

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

Initial-letter

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

टाइमलाइन में बाद में अटैचमेंट जोड़ना

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

ऐनिमेशन वाले एलिमेंट को, किसी ऐसे एलिमेंट की स्क्रोल-टाइमलाइन ढूंढने की अनुमति देने के लिए जिसका कोई पैरंट एलिमेंट नहीं है, शेयर किए गए पैरंट एलिमेंट पर 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 पर और उससे ऐनिमेशन करने के लिए, वेब की नई सुविधाओं पर आधारित है. इस नियम की मदद से, किसी एलिमेंट को "खोलने से पहले" वाली स्टाइल दी जा सकती है. इससे ब्राउज़र, पेज पर एलिमेंट खुलने से पहले उसे देख सकता है. यह एलिमेंट, एलिमेंट के दिखने के ऐनिमेशन के लिए बहुत काम का है. साथ ही, पॉपओवर या डायलॉग जैसे एलिमेंट में ऐनिमेशन के लिए भी इसका इस्तेमाल किया जा सकता है. यह तब भी काम का हो सकता है, जब कोई एलिमेंट बनाया जा रहा हो और उसे ऐनिमेशन देने की ज़रूरत हो. यहां दिया गया उदाहरण देखें. इसमें, popover एट्रिब्यूट (अगला सेक्शन देखें) को व्यूपोर्ट के बाहर से, व्यू और सबसे ऊपर की लेयर में आसानी से ऐनिमेट किया गया है.

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

ओवरले

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

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

पॉपओवर

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

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

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

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

स्क्रीनशॉट चुनना

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

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

:user-valid और अमान्य स्यूडो क्लास

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

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

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

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

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

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

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