सीएसएस रैप किया गया: 2023!

CSS Wrapped: 2023!

सीधे कॉन्टेंट पर जाएं:

• स्ट्रक्चर से जुड़ी नींव
• ट्रिगनोमेट्रिक फ़ंक्शन
• कॉम्प्लेक्स nth-* सिलेक्शन
• स्कोप
• नेस्टिंग

• टाइपोग्राफ़ी
• नाम के पहले अक्षर
• टेक्स्ट-रैप बैलेंस/प्रीटी

• रंग
• कलर लेवल 4
• कलर-मिक्स फ़ंक्शन
• रिलेटिव कलर सिंटैक्स

• रिस्पॉन्सिव डिज़ाइन
• कंटेनर क्वेरी
• स्टाइल क्वेरी
• :has selector
• मीडिया क्वेरी अपडेट करें
• मीडिया क्वेरी को स्क्रिप्ट करना
• पारदर्शिता से जुड़ी मीडिया क्वेरी

• इंटरैक्शन
• ट्रांज़िशन देखना
• लीनियर-ईज़िंग फ़ंक्शन
• Scrollend
• स्क्रोल करने पर चलने वाले ऐनिमेशन
• बाद में अटैच करने के लिए टाइमलाइन
• अलग-अलग प्रॉपर्टी के ट्रांज़िशन
• शुरुआती स्टाइल का नियम
• ओवरले ऐनिमेशन

• कॉम्पोनेंट
• पॉपओवर
• चुने गए में घंटे
• उपयोगकर्ता के लिए मान्य/अमान्य स्यूडो क्लास
• खास अकॉर्डियन

वाह! साल 2023, CSS के लिए बहुत अहम रहा!

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

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

सुविधाओं के हेडर के बगल में, नए बेसलाइन बैज देखें! यहां ज़्यादा जानें.

• = यह सुविधा, मुख्य ब्राउज़र के सभी स्टेबल वर्शन में हाल ही में उपलब्ध हुई है.

• = मुख्य ब्राउज़र में कुछ ही सुविधाओं की उपलब्धता.

आर्किटेक्चर के बुनियादी सिद्धांत

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

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

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

• 111
• 111
• 108
• 15.4

सोर्स

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

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

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

कॉम्प्लेक्स nth-* सिलेक्शन

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

• 111
• 111
• 113
• 9

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

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

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

n-* चुनने के लिए जटिल डेमो

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

स्कोप

ब्राउज़र सहायता

• 118
• 118
• 
• 17.4

सोर्स

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 सिलेक्टर के बारे में जानकारी मिलेगी. साथ ही, यह भी बताया जाएगा कि खास जानकारी को कैसे मैनेज किया जाता है, प्रीलूड-लेस स्कोप क्या होते हैं, और @scope से कैस्केड पर क्या असर पड़ता है.

नेस्टिंग

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

• 120
• 120
• 117
• 17.2

सोर्स

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

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 */
}

Nesting स्क्रीनकास्ट

नेस्टिंग का लाइव डेमो

चुनाव का विजेता तय करने के लिए, आरामदेह नेस्टिंग सिलेक्टर को बदलें

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

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

सबग्रिड

ब्राउज़र सहायता

• 117
• 117
• 71
• 16

सोर्स

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

सबग्रिड स्क्रीनकास्ट

सबग्रिड लाइव डेमो

हेडर, बॉडी, और फ़ुटर, अपने सिबलिंग के डाइनैमिक साइज़ के हिसाब से अलाइन होते हैं.

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

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

मुद्रण कला

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

Initial-letter

ब्राउज़र सहायता

• 110
• 110
• x
• 9

सोर्स

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

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

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

::first-letter स्यूडो एलिमेंट को शिफ़्ट करने के लिए, उसकी initial-letter वैल्यू बदलें.

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

text-wrap: balance and pretty

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

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

टेक्स्ट-रैप स्क्रीनकास्ट

टेक्स्ट रैप करके लाइव स्ट्रीम का डेमो

नीचे दिए गए डेमो में, स्लाइडर को खींचकर, हेडिंग और पैराग्राफ़ पर balance और pretty के असर की तुलना की जा सकती है. डेमो को किसी दूसरी भाषा में अनुवाद करने की कोशिश करें!

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

रंग

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

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

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

• 111
• 111
• 113
• 15

सोर्स

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

• 111
• 111
• 113
• 15

सोर्स

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

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

Color 4 का स्क्रीनकास्ट

Color 4 का डेमो

इस डेमो में, स्लाइडर को खींचकर, हेडिंग और पैराग्राफ़ पर `बैलेंस` और `सुंदर` इफ़ेक्ट की तुलना की जा सकती है. डेमो को किसी दूसरी भाषा में अनुवाद करने की कोशिश करें!

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

color-mix फ़ंक्शन

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

• 111
• 111
• 113
• 16.2

सोर्स

रंगों को मिलाना एक क्लासिक टास्क है और साल 2023 में सीएसएस भी ऐसा कर सकती है. सफ़ेद या काले रंग के साथ-साथ पारदर्शिता भी बढ़ाई जा सकती है. अपनी पसंद के किसी भी कलर स्पेस में ये काम किए जा सकते हैं. यह एक बुनियादी और बेहतर रंग सुविधा है.

color-mix() फ़ंक्शन का स्क्रीनकास्ट

color-mix() डेमो

डेमो की मदद से, कलर पिकर और कलर स्पेस की मदद से दो रंग चुने जा सकते हैं. साथ ही, यह भी तय किया जा सकता है कि मिक्स में हर रंग का कितना हिस्सा होना चाहिए.

color-mix() को ग्रेडिएंट के किसी खास पॉइंट के तौर पर देखा जा सकता है. ग्रेडिएंट, नीले से सफ़ेद होने के सभी चरणों को दिखाता है, जबकि color-mix() सिर्फ़ एक चरण दिखाता है. जैसे ही आप कलर स्पेस पर ध्यान देना शुरू करते हैं, तो चीज़ें बेहतर हो जाती हैं और पता चलता है कि मिलाया गया कलर स्पेस, नतीजों में कितना अलग हो सकता है.

color-mix() के बारे में ज़्यादा जानें.

रिलेटिव कलर सिंटैक्स

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

आरसीएस स्क्रीनकास्ट

आरसीएस का लाइव डेमो

रंग बदलें, सीन बदलें. हर रंग, बेस कलर से वैरिएंट बनाने के लिए, रिलेटिव कलर सिंटैक्स का इस्तेमाल करता है.

आरसीएस की मदद से, किसी रंग में बदलाव किया जा सकता है. तुलनात्मक बदलाव वह है जिसमें सैचुरेशन या लाइटनेस की मौजूदा वैल्यू ली जाती है और calc() की मदद से उसमें बदलाव किया जाता है. पूरी तरह से बदलाव तब होता है, जब किसी चैनल की वैल्यू को पूरी तरह से नई वैल्यू से बदल दिया जाता है. जैसे, ओपैसिटी को 50% पर सेट करना. इस सिंटैक्स से आपको थीम बनाने के लिए, समय के हिसाब से वैरिएंट वगैरह के लिए सही टूल मिलते हैं.

रंग के रिलेटिव सिंटैक्स के बारे में ज़्यादा जानें.

रिस्पॉन्सिव डिज़ाइन

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

कंटेनर के साइज़ से जुड़ी क्वेरी

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

• 105
• 105
• 110
• 16

सोर्स

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

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

@container स्क्रीनकास्ट

@container का डेमो

कंटेनर क्वेरी इस्तेमाल करने के बारे में ज़्यादा जानें.

स्टाइल कंटेनर क्वेरी

ब्राउज़र सहायता

• 111
• 111
• x
• 18

सोर्स

स्टाइल क्वेरी, Chrome 111 में कुछ हद तक लागू की गई हैं. फ़िलहाल, स्टाइल क्वेरी की मदद से, @container style() का इस्तेमाल करते समय पैरंट एलिमेंट पर कस्टम प्रॉपर्टी की वैल्यू की क्वेरी की जा सकती है. उदाहरण के लिए, क्वेरी करें कि कोई कस्टम प्रॉपर्टी वैल्यू मौजूद है या नहीं या वह @container style(--rain: true) जैसी किसी वैल्यू पर सेट है.

स्टाइल क्वेरी का स्क्रीनशॉट

शैली क्वेरी डेमो

रंग बदलें, सीन बदलें. हर वैरिएंट, बेस कलर से वैरिएंट बनाने के लिए रिलेटिव कलर सिंटैक्स का इस्तेमाल करता है.

यह सीएसएस में क्लास के नाम इस्तेमाल करने जैसा ही लगता है. हालांकि, स्टाइल क्वेरी के कुछ फ़ायदे हैं. पहला फ़ायदा यह है कि स्टाइल क्वेरी की मदद से, सीएसएस में वैल्यू को ज़रूरत के हिसाब से अपडेट किया जा सकता है. साथ ही, लागू करने के आने वाले वर्शन में, लागू स्टाइल तय करने के लिए वैल्यू की रेंज से जुड़ी क्वेरी की जा सकेगी. जैसे, style(60 <= --weather <= 70). साथ ही, प्रॉपर्टी-वैल्यू पेयर पर आधारित स्टाइल, जैसे कि style(font-style: italic).

स्टाइल क्वेरी इस्तेमाल करने के बारे में ज़्यादा जानें.

:has() सिलेक्टर

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

• 105
• 105
• 121
• 15.4

सोर्स

करीब 20 साल से डेवलपर, सीएसएस में "पैरंट सिलेक्टर" के लिए कह रहे थे. अब Chrome 105 में शिप किए गए :has() सिलेक्टर की मदद से ऐसा किया जा सकता है. उदाहरण के लिए, .card:has(img.hero) का इस्तेमाल करने पर, ऐसे .card एलिमेंट चुन लिए जाएंगे जिनमें हीरो इमेज, चाइल्ड एलिमेंट के तौर पर मौजूद है.

:has() डेमो स्क्रीनशॉट

:has() फ़ंक्शन का लाइव डेमो

सीएसएस :has() का डेमो: बिना इमेज वाला कार्ड

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

:has() स्क्रीनकास्ट

:has() फ़ंक्शन का डेमो

सीएसएस :has() का डेमो: डॉक

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

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

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

• 113
• 113
• 102
• 17

सोर्स

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

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

स्क्रीनकास्ट अपडेट करना

डेमो अपडेट करना

रेडियो विकल्प चुनकर, अपडेट की स्पीड की वैल्यू को सिम्युलेट करें और देखें कि इसका बत्तख पर क्या असर पड़ता है.

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

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

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

• 120
• 120
• 113
• 17

सोर्स

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

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

स्क्रीनकास्ट की स्क्रिप्ट बनाना

स्क्रिप्टिंग का डेमो

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

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

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

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

• 118
• 118
• 
• x

सोर्स

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

कम ट्रांसपेरंसी वाला स्क्रीनकास्ट

पारदर्शिता को कम करने का डेमो

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

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

इंटरैक्शन

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

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

ब्राउज़र सहायता

• 111
• 111
• x
• 18

सोर्स

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

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

वीटी स्क्रीनकास्ट

VT डेमो

ट्रांज़िशन का डेमो देखें

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

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

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

• 113
• 113
• 112
• 17.2

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

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

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

लीनियर-ईज़िंग स्क्रीनकास्ट

लीनियर-ईज़िंग का डेमो

सीएसएस linear() का डेमो.

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

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

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

• 114
• 114
• 109
• x

सोर्स

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

स्क्रोल किया जा सकने वाला स्क्रीनकास्ट

Scrollend Demo

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

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

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

ब्राउज़र सहायता

• 115
• 115
• 
• x

सोर्स

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

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

एसडीए स्क्रीनकास्ट

एसडीए का डेमो

CSS की मदद से स्क्रोल करने पर चलने वाले ऐनिमेशन का डेमो: स्क्रोल टाइमलाइन

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

एसडीए डेमो स्क्रीनकास्ट

एसडीए का लाइव डेमो

स्क्रॉल करने पर चलने वाले सीएसएस ऐनिमेशन का डेमो: टाइमलाइन देखें

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

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

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

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

• 116
• 116
• x
• x

सोर्स

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

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

शेयर किए गए पैरंट एलिमेंट पर timeline-scope एलिमेंट का एलान करने पर, स्क्रोलर पर एलान किए गए scroll-timeline एलिमेंट को उस एलिमेंट से ढूंढा जा सकता है जो इसका इस्तेमाल अपने animation-timeline एलिमेंट के तौर पर करता है

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

लाइव डेमो

सीएसएस के स्क्रोल-ड्रिवन ऐनिमेशन का डेमो: फ़िलहाल टाइमलाइन में जोड़ने के लिए

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

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

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

डिस्क्रीट ऐनिमेशन. स्क्रीनकास्ट

डिस्क्रीट ऐनिमेशन. डेमो

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

@starting-style

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

• 117
• 117
• 129
• 17.5

सोर्स

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

@starting-style Screencast

@starting-style का डेमो

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

ओवरले

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

• 117
• 117
• x
• x

सोर्स

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

ओवरले स्क्रीनकास्ट

ओवरले का लाइव डेमो

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

कॉम्पोनेंट

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

पॉपओवर

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

• 114
• 114
• 125
• 17

सोर्स

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

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

पॉपओवर स्क्रीनकास्ट

पॉपओवर का लाइव डेमो

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

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

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

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

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

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

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

• 119
• 119
• 88
• 16.5

सोर्स

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

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

:user-* स्क्रीनकास्ट

:user-* लाइव डेमो

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

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

ब्राउज़र सहायता

• 120
• 120
• 130
• 17.2

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

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

ऐकॉर्डियन के खास डेमो की जानकारी

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

निष्कर्ष

पिछले कुछ सालों में, सीएसएस का काफ़ी इस्तेमाल हुआ है. खास तौर पर, 2023 में. अगर आपने सीएसएस का इस्तेमाल पहले कभी नहीं किया है या आपको इसकी बुनियादी बातों की फिर से जानकारी चाहिए, तो web.dev पर दिए गए अन्य मुफ़्त कोर्स के साथ-साथ, सीएसएस सीखें कोर्स भी देखें.

हम आपको छुट्टियों के सीज़न की शुभकामनाएं देते हैं. हम उम्मीद करते हैं कि आपको जल्द ही अपने काम में सीएसएस और यूज़र इंटरफ़ेस (यूआई) की इन शानदार नई सुविधाओं को शामिल करने का मौका मिलेगा!

⇾ Chrome के यूज़र इंटरफ़ेस की डेवलपर रिलेशनशिप टीम,

Una Kravets

Bramus

Adam Argyle