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

सीएसएस रैप किया गया हेडर

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

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

वाह! साल 2023, सीएसएस के लिए शानदार रहा है!

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

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

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

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

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

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

  • Chrome: 111. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Edge: 111. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 108. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Safari: 15.4. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

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

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

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

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

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

  • Chrome: 111. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Edge: 111. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 113. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 9. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

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

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

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

nवें-* चुनने के लिए मुश्किल डेमो

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

स्कोप

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

  • Chrome: 118. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 118. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: किसी झंडे के पीछे.
  • सफ़ारी: 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 से कैस्केड पर क्या असर पड़ता है.

नेस्ट करना

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

  • Chrome: 120. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 120. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 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 स्क्रीनकास्ट

Nesting लाइव डेमो

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

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

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

सबग्रिड

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

  • Chrome: 117. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 117. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 71. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 16. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

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

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

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

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

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

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

मुद्रण कला

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

नाम के पहले अक्षर

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

  • Chrome: 110. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 110. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: समर्थित नहीं. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 9. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

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

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

शुरुआती अक्षर के डेमो का स्क्रीनशॉट

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

::first-letter pseudo एलिमेंट को शिफ़्ट होते हुए देखने के लिए, initial-letter की वैल्यू बदलें.

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

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

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

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

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

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

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

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

रंग

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

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

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

  • Chrome: 111. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Edge: 111. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 113. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 15. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

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

  • Chrome: 111. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Edge: 111. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 113. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 15. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

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

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

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

रंग 4 का डेमो

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

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

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

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

  • Chrome: 111. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Edge: 111. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 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() का कॉम्बिनेशन, उन कॉम्पोनेंट के साथ काम करता है जिनकी रिस्पॉन्सिव और लॉजिकल स्टाइलिंग, पैरंट के साइज़ के साथ-साथ, उनके किसी भी चाइल्ड की मौजूदगी या स्थिति के हिसाब से होती है. इसका मतलब है कि आखिर में पेज लेवल के लेआउट को कॉम्पोनेंट-लेवल के लेआउट से अलग किया जा सकता है. साथ ही, हर जगह अपने कॉम्पोनेंट का इस्तेमाल करने के लिए, लॉजिक को एक बार लिखा जा सकता है!

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

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

  • Chrome: 105. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 105. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 110. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 16. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

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

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

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

@container का डेमो

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

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

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

  • Chrome: 111. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Edge: 111. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: समर्थित नहीं. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 18. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

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

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

स्टाइल कंटेनर क्वेरी वाले मौसम की जानकारी वाले कार्ड के लिए डेमो स्क्रीनशॉट

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

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

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

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

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

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

  • Chrome: 105. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 105. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 121. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Safari: 15.4. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

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

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

:has() डेमो के लिए रेफ़रंस स्क्रीनशॉट

:has() लाइव डेमो

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

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

:has() वजह से स्क्रीनकास्ट

:has() डेमो

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

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

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

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

  • Chrome: 113. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Edge: 113. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 102. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 17. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

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

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

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

डेमो अपडेट करें

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

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

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

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

  • Chrome: 120. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 120. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 113. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 17. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

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

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

स्क्रीनकास्ट की स्क्रिप्टिंग

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

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

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

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

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

  • Chrome: 118. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 118. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: किसी झंडे के पीछे.
  • Safari: समर्थित नहीं. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

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

कम पारदर्शिता वाला स्क्रीनकास्ट

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

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

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

इंटरैक्शन

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

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

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

  • Chrome: 111. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Edge: 111. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: समर्थित नहीं. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 18. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

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

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

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

VT डेमो

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

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

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

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

  • Chrome: 113. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Edge: 113. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 112. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 17.2. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

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

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

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

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

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

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

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

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

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

  • Chrome: 114. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Edge: 114. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 109. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Safari: समर्थित नहीं. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

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

स्क्रोल एंड स्क्रीनकास्ट

Scrollend डेमो

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

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

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

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

  • Chrome: 115. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Edge: 115. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: किसी झंडे के पीछे.
  • Safari: समर्थित नहीं. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

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

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

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

एसडीए का डेमो

सीएसएस की, स्क्रोल करके दिखाए जाने वाले ऐनिमेशन का डेमो: स्क्रोल की टाइमलाइन

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

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

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

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

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

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

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

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

  • Chrome: 116. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Edge: 116. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: समर्थित नहीं. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Safari: समर्थित नहीं. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

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

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

शेयर किए गए पैरंट पर इस्तेमाल की गई टाइमलाइन वाले स्कोप वाले डीओएम सबट्री का विज़ुअलाइज़ेशन
शेयर किए गए पैरंट पर timeline-scope का एलान होने पर, स्क्रोलर पर बताया गया scroll-timeline, उस एलिमेंट को मिल सकता है जो इसका इस्तेमाल animation-timeline के तौर पर करता है

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

लाइव डेमो

सीएसएस की, स्क्रोल करके दिखाए जाने वाले ऐनिमेशन का डेमो: डिफ़र्ड टाइमलाइन अटैचमेंट

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

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

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

डिस्क्रीट एनिम. स्क्रीनकास्ट

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

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

@starting-style

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

  • Chrome: 117. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 117. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 129. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 17.5. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

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

@starting-style स्क्रीनकास्ट

@starting-स्टाइल का डेमो

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

ओवरले

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

  • Chrome: 117. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 117. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: समर्थित नहीं. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Safari: समर्थित नहीं. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

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

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

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

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

कॉम्पोनेंट

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

पॉपओवर

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

  • Chrome: 114. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Edge: 114. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 125. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 17. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

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

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

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

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

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

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

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

Chrome में हल्के और गहरे रंग वाली थीम के साथ चुने गए घंटे का स्क्रीनशॉट

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

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

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

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

  • Chrome: 119. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 119. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 88. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Safari: 16.5. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

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

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

:उपयोगकर्ता-* स्क्रीनकास्ट

:उपयोगकर्ता-* लाइव डेमो

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

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

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

  • Chrome: 120. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 120. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 130. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 17.2. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

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

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

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

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

निष्कर्ष

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

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

⇾ Chrome यूज़र इंटरफ़ेस (यूआई) DevRel टीम,

Una Kravets
Bramus
Adam Argyle
Adam Argyle
X GitHub