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

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

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

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

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

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

स्क्रोल करके दिए जाने वाले ऐनिमेशन के बारे में ज़्यादा जानने के लिए, पूरी जानकारी के साथ यह लेख देखें या Scroll- drive-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 एट्रिब्यूट और 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 से मैच नहीं करेगा.

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

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

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

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

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

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