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

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

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

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

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

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

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

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

स्कोप

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

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

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

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

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

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

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

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

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

नेस्ट करना

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

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

  dd {
    /* dl dd styles */
  }
}

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

dl dt {
  /* dl dt styles */
}

dl dd {
  /* dl dd styles */
}

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

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

सबग्रिड

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

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

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

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

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

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

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

नाम के पहले अक्षर के बारे में ज़्यादा जानें.

टेक्स्ट रैप: संतुलन और सुंदरता

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

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

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

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

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

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

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

रंग-मिक्स फ़ंक्शन

रंगों को मिक्स करना एक क्लासिक टास्क है और 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) के बारे में ज़्यादा जानें.

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

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

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

Chrome 111 में शिप किए गए एक पेज वाले ऐप्लिकेशन के लिए View Transits API. ट्रांज़िशन देखें के बारे में ज़्यादा जानें.

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

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

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

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

स्क्रोल खत्म करना

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

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

स्क्रोलएंड के बारे में ज़्यादा जानें.

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

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

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

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

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

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

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

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

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

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

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

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

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

@starting-style

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

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

ओवरले

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

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

पॉपओवर

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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