सीएसएस रैप किया गया: 2023!
कॉन्टेंट पर जाएं:
- रिस्पॉन्सिव डिज़ाइन
- कंटेनर क्वेरी
- स्टाइल से जुड़ी क्वेरी
- :इसमें सिलेक्टर है
- मीडिया क्वेरी अपडेट करें
- मीडिया क्वेरी को स्क्रिप्ट करना
- पारदर्शिता से जुड़ी मीडिया क्वेरी
वाह! साल 2023, सीएसएस के लिए शानदार रहा!
#Interop2023 से लेकर, सीएसएस और यूज़र इंटरफ़ेस (यूआई) स्पेस में कई नए लैंडिंग पेज तैयार किए गए हैं. इनसे डेवलपर को ऐसी सुविधाएं मिलती हैं जो कभी वेब प्लैटफ़ॉर्म के लिए नामुमकिन लगने लगी थीं. अब, हर मॉडर्न ब्राउज़र कंटेनर क्वेरी, सबग्रिड, :has()
सिलेक्टर, और बड़ी संख्या में कलर स्पेस और फ़ंक्शन का इस्तेमाल किया जा सकता है. Chrome में, स्क्रोल करके चलने वाले ऐनिमेशन और व्यू ट्रांज़िशन की मदद से, वेब व्यू के बीच आसानी से ऐनिमेशन जनरेट करने की सुविधा उपलब्ध है. यह सुविधा Chrome में काम करती है. इतना ही नहीं, अब कई ऐसे नए प्रिमिटिव मौजूद हैं जो डेवलपर को बेहतर अनुभव देने के लिए काम कर रहे हैं. जैसे, सीएसएस नेस्टिंग और स्कोप स्टाइल.
यह साल कितना रहा! इसलिए, हम इस साल के आखिर में, ब्राउज़र डेवलपर और वेब समुदाय की उन मेहनत का जश्न मनाना और उन्हें स्वीकार करना चाहते हैं जिनकी वजह से यह सब संभव हुआ.
वास्तुकला से जुड़े फ़ाउंडेशन
चलिए, सीएसएस की मुख्य भाषा और सुविधाओं के बारे में अपडेट से शुरुआत करते हैं. ये ऐसी सुविधाएं हैं जो लिखने और स्टाइल को व्यवस्थित करने के आपके तरीके के आधार पर काम करती हैं. साथ ही, इनसे डेवलपर को काफ़ी मदद मिलती है.
ट्रिगनोमेट्रिक फ़ंक्शन
Chrome 111 ने sin()
, cos()
, tan()
, asin()
, acos()
, atan()
, और atan2()
त्रिकोणमितीय फ़ंक्शन के साथ काम करने की सुविधा जोड़ी. इस वजह से, ये सभी मुख्य इंजन पर उपलब्ध हो गए. ये फ़ंक्शन, ऐनिमेशन और लेआउट के लिए बहुत काम के होते हैं. उदाहरण के लिए, अब किसी चुने गए केंद्र के चारों ओर वृत्त पर तत्व डालना ज़्यादा आसान हो गया है.
सीएसएस में त्रिकोणमितीय फ़ंक्शन के बारे में ज़्यादा जानें.
मुश्किल nवां-* चुनने की सुविधा
ब्राउज़र सहायता
- 111
- 111
- 113
- 9
:nth-child()
स्यूडो-क्लास सिलेक्टर की मदद से, डीओएम में एलिमेंट को उनके इंडेक्स के हिसाब से चुना जा सकता है. An+B
माइक्रोसिंटैक्स का इस्तेमाल करके, यह बेहतर तरीके से कंट्रोल किया जा सकता है कि आपको कौनसे एलिमेंट चुनने हैं.
डिफ़ॉल्ट रूप से, :nth-*()
के छद्म सभी चाइल्ड एलिमेंट को खाते में ले जाते हैं. Chrome 111 से, आपके पास :nth-child()
और :nth-last-child()
में सिलेक्टर की सूची पास करने का विकल्प है. इस तरह, An+B
के काम करने से पहले, बच्चों की सूची को पहले से फ़िल्टर किया जा सकता है.
नीचे दिए गए डेमो में, 3n+1
लॉजिक को सिर्फ़ छोटी डॉल पर लागू किया गया है. इसके लिए, उन्हें of .small
का इस्तेमाल करके पहले से फ़िल्टर करना होगा. इस्तेमाल किए गए सिलेक्टर को डाइनैमिक तौर पर बदलने के लिए, ड्रॉपडाउन का इस्तेमाल करें.
मुश्किल nवें-* चयनों के बारे में ज़्यादा जानें.
स्कोप
ब्राउज़र सहायता
- 118
- 118
- x
- 78 जीबी में से
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 */
}
स्क्रीनकास्ट को नेस्ट करना
Nesting का लाइव डेमो
नेस्टिंग से किसी स्टाइलशीट का वज़न कम किया जा सकता है, दोहराए जाने वाले सेलेक्टर के ऊपरी हिस्से को कम किया जा सकता है, और कॉम्पोनेंट की स्टाइल को एक ही जगह पर सेट किया जा सकता है. शुरुआत में, सिंटैक्स को एक सीमा के साथ रिलीज़ किया गया था. इस वजह से, अलग-अलग जगहों पर &
का इस्तेमाल करना ज़रूरी था. हालांकि, अब इसे नेस्ट करने के आसान सिंटैक्स अपडेट से हटा दिया गया है.
नेस्ट करने के बारे में ज़्यादा जानें.
सबग्रिड
सीएसएस subgrid
की मदद से, चाइल्ड लेआउट के बीच बेहतर अलाइनमेंट के साथ ज़्यादा कॉम्प्लेक्स ग्रिड बनाए जा सकते हैं. यह किसी दूसरे ग्रिड के अंदर मौजूद ग्रिड को, ग्रिड की पंक्तियों या कॉलम के लिए वैल्यू के तौर पर subgrid
का इस्तेमाल करके, आउटर ग्रिड की पंक्तियों और कॉलम को अपने-आप अपनाने की अनुमति देता है.
सबग्रिड स्क्रीनकास्ट
सबग्रिड का लाइव डेमो
सबग्रिड खास तौर पर भाई-बहनों को एक-दूसरे की डाइनैमिक कॉन्टेंट के साथ अलाइन करने के लिए काम का होता है. इससे कॉपीराइटर, UX राइटर, और अनुवादकों को ऐसी प्रोजेक्ट कॉपी बनाने से रोका जाता है जो लेआउट में "फ़िट" हो. सबग्रिड की मदद से, लेआउट को कॉन्टेंट के हिसाब से अडजस्ट किया जा सकता है.
सबग्रिड के बारे में ज़्यादा जानें.
टाइपाेग्राफ़ी
साल 2023 में, वेब टाइपोग्राफ़ी में कुछ अहम बदलाव किए गए हैं. text-wrap
प्रॉपर्टी, खास तौर पर बेहतर प्रोसेस है. इस प्रॉपर्टी की मदद से, ब्राउज़र में टाइप किए गए लेआउट में बदलाव किया जा सकता है. इसके लिए, अलग से स्क्रिप्ट लिखने की ज़रूरत नहीं होती. लाइन की अजीब लंबाई को अलविदा कहें और उम्मीद के मुताबिक बनाई गई टाइपोग्राफ़ी को आज़माएं!
शुरुआती अक्षर
Chrome 110 में साल की शुरुआत में initial-letter
प्रॉपर्टी, सीएसएस की एक छोटी लेकिन दमदार सुविधा है. यह शुरुआती अक्षरों की प्लेसमेंट के लिए स्टाइल सेट करती है. अक्षरों को ड्रॉप या उभरी हुई स्थिति में रखा जा सकता है. प्रॉपर्टी में दो आर्ग्युमेंट स्वीकार किए जाते हैं: पहला, लेटर को उससे जुड़े पैराग्राफ़ में कितनी गहराई से डालना है और दूसरा, लेटर को उसके ऊपर के लेटर को कितना बढ़ाना है, इसके लिए. आपके पास इन दोनों को एक साथ इस्तेमाल करने का विकल्प भी है, जैसा कि नीचे दिए गए डेमो में किया गया है.
शुरुआती अक्षर का स्क्रीनशॉट
शुरुआती अक्षर का डेमो
शुरुआती अक्षर के बारे में ज़्यादा जानें.
text-wrap: बैलेंस और प्रिटी
डेवलपर के तौर पर, आपको हेडलाइन या पैराग्राफ़ के आखिरी साइज़, फ़ॉन्ट साइज़ या भाषा के बारे में भी नहीं पता होता. टेक्स्ट रैपिंग के असरदार और आकर्षक ट्रीटमेंट के लिए ज़रूरी सभी वैरिएबल, ब्राउज़र में मौजूद हैं. ब्राउज़र को फ़ॉन्ट साइज़, भाषा, और तय किए गए इलाके जैसी सभी चीज़ों के बारे में पता है. इसलिए, टेक्स्ट लेआउट को बेहतर और अच्छी क्वालिटी में इस्तेमाल करने के लिए, यह सही विकल्प है.
ऐसे में टेक्स्ट रैपिंग की दो नई तकनीकें आती हैं, एक का नाम balance
है और दूसरी pretty
. balance
वैल्यू, टेक्स्ट का एक जैसा दिखने वाला ब्लॉक बनाने की कोशिश करती है. वहीं, pretty
बच्चों को अनचाहे हाइफ़न से बचाने और यह पक्का करने में मदद करती है कि हाइफ़न को अच्छी तरह से इस्तेमाल किया जा सके. ये दोनों काम पारंपरिक रूप से हाथ से किए जाते थे. ब्राउज़र को यह काम दे देना और किसी भी भाषा में अनुवाद किए जाने पर यह शानदार है.
टेक्स्ट-रैप स्क्रीनकास्ट
टेक्स्ट रैप का लाइव डेमो
text-wrap: Balance के बारे में ज़्यादा जानें.
रंग
साल 2023, वेब प्लैटफ़ॉर्म के लिए रंगों का साल रहा. डाइनैमिक कलर थीम वाले नए कलर स्पेस और फ़ंक्शन से, आपको शानदार और हरी-भरी थीम बनाने से नहीं रोका जा सकता. साथ ही, इन्हें पसंद के मुताबिक बनाने के लिए भी बनाया जा सकता है!
एचडी कलर स्पेस (कलर लेवल 4)
हार्डवेयर से लेकर सॉफ़्टवेयर, सीएसएस से लेकर ब्लिंक करने वाली लाइटों तक, हमारे कंप्यूटर को रंगों को दिखाने में बहुत मेहनत करनी पड़ सकती है, जैसा कि हमारी आंखों में दिखता है. साल 2023 में, हमने नए रंग, ज़्यादा रंग, नए कलर स्पेस, कलर फ़ंक्शन, और नई सुविधाएं जोड़ी हैं.
सीएसएस और कलर अब:
- देख सकते हैं कि उपयोगकर्ता का स्क्रीन हार्डवेयर, अलग-अलग तरह के एचडीआर कलर में काम कर सकता है या नहीं.
- जांचें कि उपयोगकर्ता का ब्राउज़र, Oklch या Display P3 जैसे कलर सिंटैक्स को समझता है या नहीं.
- Oklab, Oklch, HWB, Display P3, Rec.2020, XYZ वगैरह में एचडीआर के रंग तय करें.
- एचडीआर के रंगों के साथ ग्रेडिएंट बनाएं.
- अलग-अलग रंगों वाले स्पेस में ग्रेडिएंट इंटरपोलेट करें.
- color-mix()
के साथ रंगों को मिलाएं.
- मिलते-जुलते कलर सिंटैक्स का इस्तेमाल करके अलग-अलग रंगों के वैरिएंट बनाएं.
कलर 4 स्क्रीनकास्ट
कलर 4 डेमो
कलर 4 और कलर स्पेस के बारे में ज़्यादा जानें.
color-mix फ़ंक्शन
कलर मिक्स करना एक क्लासिक टास्क है. इसलिए, 2023 में सीएसएस के पास यह काम भी करने का विकल्प है. आप चाहें तो सिर्फ़ सफ़ेद या काले रंग का ही इस्तेमाल न करें, बल्कि पारदर्शिता के बारे में भी बताएं. यह काम अपने हिसाब से किसी भी कलर स्पेस में किया जा सकता है. इसमें एक साथ बुनियादी रंग और बेहतर रंग की सुविधा भी होती है.
color-mix() स्क्रीनकास्ट
color-mix() डेमो
ग्रेडिएंट से color-mix()
को समय के खास पल के तौर पर देखा जा सकता है. जहां ग्रेडिएंट, नीले से सफ़ेद रंग में जाने के लिए सभी चरण दिखाता है, वहां color-mix()
सिर्फ़ एक कदम दिखाता है. जब आप कलर स्पेस को ध्यान में रखना शुरू करते हैं और यह जानना शुरू करते हैं कि अलग-अलग कलर स्पेस का इस्तेमाल करने पर, नतीजों के हिसाब से कलर स्पेस कितना अलग होगा, तो चीज़ें बेहतर हो जाती हैं.
color-mix() के बारे में ज़्यादा जानें.
मिलता-जुलता कलर सिंटैक्स
कलर वैरिएंट बनाने के लिए, रिलेटिव कलर सिंटैक्स (आरसीएस), color-mix()
का इस्तेमाल करने का एक बेहतर तरीका है. यह color-mix() से थोड़ा ज़्यादा असरदार है. हालांकि, यह रंग के साथ काम करने के लिए एक अलग रणनीति है. रंग हल्का करने के लिए, color-mix()
सफ़ेद रंग को मिक्स कर सकता है. इसमें आरसीएस, हल्के रंग वाले चैनल का सटीक ऐक्सेस देता है. साथ ही, प्रोग्राम के हिसाब से, हल्के रंग को कम या ज़्यादा करने के लिए, चैनल पर calc()
का इस्तेमाल करता है.
आरसीएस स्क्रीनकास्ट
आरसीएस लाइव डेमो
आरसीएस की मदद से, किसी रंग में रिलेटिव और पूरी तरह से बदलाव किए जा सकते हैं. रिलेटिव बदलाव वह है जिसमें सैचुरेशन या लाइटनेस की मौजूदा वैल्यू ली जाती है और उसमें calc()
की मदद से बदलाव किया जाता है. ऐब्सलूट बदलाव वह होता है जिसमें किसी चैनल की वैल्यू को बिलकुल नए वैल्यू से बदला जाता है. जैसे, ओपैसिटी को 50% पर सेट करना. इस सिंटैक्स से आपको थीमिंग, सिर्फ़ समय के वैरिएंट वगैरह के हिसाब से काम के टूल मिलते हैं.
रिलेटिव कलर सिंटैक्स के बारे में ज़्यादा जानें.
रिस्पॉन्सिव डिज़ाइन
रिस्पॉन्सिव डिज़ाइन को 2023 में बेहतर बनाया गया है. इस शानदार साल ने नई सुविधाओं को चालू किया. इन सुविधाओं ने रिस्पॉन्सिव वेब अनुभव बनाने के हमारे तरीके को पूरी तरह से बदल दिया. साथ ही, इनकी वजह से कॉम्पोनेंट पर आधारित रिस्पॉन्सिव डिज़ाइन के नए मॉडल की शुरुआत हुई. कंटेनर क्वेरी और :has()
का कॉम्बिनेशन, उन कॉम्पोनेंट के साथ काम करता है जो अपने पैरंट के साइज़, बच्चे की मौजूदगी या स्थिति के आधार पर अपनी रिस्पॉन्सिव और लॉजिकल स्टाइलिंग का इस्तेमाल करते हैं. इसका मतलब है कि आखिर में, पेज-लेवल के लेआउट को कॉम्पोनेंट-लेवल के लेआउट से अलग किया जा सकता है. साथ ही, अपने कॉम्पोनेंट का हर जगह इस्तेमाल करने के लिए, एक बार लॉजिक को लिखा जा सकता है!
कंटेनर की क्वेरी को साइज़ देना
सीएसएस स्टाइल लागू करने के लिए, व्यूपोर्ट के ग्लोबल साइज़ की जानकारी का इस्तेमाल करने के बजाय कंटेनर क्वेरी, पेज के अंदर पैरंट एलिमेंट की क्वेरी का इस्तेमाल करती हैं. इसका मतलब है कि कॉम्पोनेंट को अलग-अलग लेआउट और एक से ज़्यादा व्यू में, डाइनैमिक तरीके से स्टाइल किया जा सकता है. इस साल (14 फ़रवरी) के वैलेंटाइन डे को, सभी मॉडर्न ब्राउज़र में साइज़ की कंटेनर क्वेरी स्थिर हो गई हैं.
इस सुविधा का इस्तेमाल करने के लिए, पहले उस एलिमेंट पर कंटेनमेंट सेट अप करें जिसके लिए आपको क्वेरी करनी है. इसके बाद, मीडिया क्वेरी की तरह ही स्टाइल लागू करने के लिए, साइज़ पैरामीटर के साथ @container
का इस्तेमाल करें. कंटेनर क्वेरी के साथ ही आपको कंटेनर क्वेरी साइज़ भी मिलते हैं. नीचे दिए गए डेमो में, कंटेनर क्वेरी साइज़ cqi
(इनलाइन कंटेनर का साइज़ को दिखाता है) का इस्तेमाल, कार्ड के हेडर को साइज़ करने के लिए किया गया है.
@container स्क्रीनकास्ट
@container का डेमो
कंटेनर क्वेरी का इस्तेमाल करने के बारे में ज़्यादा जानें.
स्टाइल कंटेनर की क्वेरी
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() स्क्रीनकास्ट
:has() डेमो
सीएसएस :has()
सिलेक्टर के बारे में ज़्यादा जानें.
मीडिया क्वेरी अपडेट करें
update
मीडिया क्वेरी की मदद से, यूज़र इंटरफ़ेस (यूआई) को डिवाइस की रीफ़्रेश दर के हिसाब से बदला जा सकता है. यह सुविधा, fast
, slow
या none
की वैल्यू के बारे में रिपोर्ट कर सकती है. यह वैल्यू अलग-अलग डिवाइसों की सुविधाओं से जुड़ी होती है.
आम तौर पर, आपके डिज़ाइन किए गए ज़्यादातर डिवाइसों की रीफ़्रेश दर तेज़ हो सकती है. इसमें डेस्कटॉप और ज़्यादातर मोबाइल डिवाइस शामिल हैं. ई-रीडर और कम पावर वाले पेमेंट सिस्टम जैसे डिवाइसों की रीफ़्रेश दर धीमी हो सकती है. यह पता होने पर कि डिवाइस, ऐनिमेशन या बार-बार होने वाले अपडेट हैंडल नहीं कर सकता, इसका मतलब है कि आपके पास बैटरी खर्च या व्यू में गड़बड़ी वाले अपडेट सेव करने का विकल्प है.
स्क्रीनकास्ट को अपडेट करें
डेमो अपडेट करें
@media (अपडेट) के बारे में ज़्यादा जानें.
मीडिया क्वेरी को स्क्रिप्ट करना
स्क्रिप्टिंग मीडिया क्वेरी का इस्तेमाल यह देखने के लिए किया जा सकता है कि JavaScript उपलब्ध है या नहीं. प्रोग्रेसिव एन्हैंसमेंट के लिए यह बहुत अच्छा है. इस मीडिया क्वेरी से पहले, JavaScript की सुविधा उपलब्ध थी या नहीं, यह पता लगाने की एक रणनीति, एचटीएमएल में nojs
क्लास को रखना और उसे JavaScript की मदद से हटाना था. इन स्क्रिप्ट को हटाया जा सकता है, क्योंकि सीएसएस के पास अब JavaScript का पता लगाने और उसके हिसाब से बदलाव करने का एक तरीका है.
Chrome DevTools की मदद से किसी पेज पर JavaScript को चालू और बंद करने का तरीका जानें.
स्क्रीनकास्ट की स्क्रिप्टिंग
स्क्रिप्टिंग डेमो
किसी वेबसाइट पर थीम स्विच करने के बारे में सोचें. स्क्रिप्टिंग मीडिया क्वेरी, सिस्टम की प्राथमिकता के हिसाब से स्विच करने में मदद कर सकती है, क्योंकि JavaScript उपलब्ध नहीं है. अगर JavaScript उपलब्ध है, तो स्विच को चालू या बंद करने के बजाय हाथ के जेस्चर से स्वाइप किया जा सकता है. अगर स्क्रिप्टिंग उपलब्ध है, तो UX को अपग्रेड करने के कई बेहतरीन अवसर हैं. साथ ही, अगर स्क्रिप्टिंग बंद है, तो बेहतर बुनियाद अनुभव मिलता है.
script के बारे में ज़्यादा जानें.
कम पारदर्शिता वाली मीडिया क्वेरी
नॉन-ओपेक इंटरफ़ेस की वजह से सिर दर्द हो सकता है या देखने से जुड़ी कई तरह की समस्याएं होने पर देखने में परेशानी हो सकती है. यही वजह है कि Windows, macOS, और iOS में सिस्टम की ऐसी प्राथमिकताएं होती हैं जो यूज़र इंटरफ़ेस (यूआई) की पारदर्शिता को कम कर सकती हैं या उसे हटा सकती हैं. prefers-reduced-transparency
के लिए यह मीडिया क्वेरी, दूसरी मीडिया क्वेरी के साथ फ़िट बैठती है. इससे, आपको उपयोगकर्ताओं के हिसाब से बदलाव करने के साथ-साथ क्रिएटिव बनने का मौका भी मिलता है.
कम पारदर्शिता वाला स्क्रीनकास्ट
कम की गई पारदर्शिता का डेमो
कुछ मामलों में, कोई दूसरा लेआउट उपलब्ध कराया जा सकता है जिसमें किसी अन्य कॉन्टेंट को ओवरले न किया गया हो. अन्य मामलों में, किसी रंग की ओपैसिटी को कम या ज़्यादा पारदर्शी बनाया जा सकता है. नीचे दी गई ब्लॉग पोस्ट में प्रेरणा देने वाले डेमो दिए गए हैं, जो लोगों की पसंद के मुताबिक हैं. अगर आप इस बारे में जानना चाहते हैं कि यह मीडिया क्वेरी कब काम की है, तो इन्हें देखें.
@media (prefers-reduced-transparency) के बारे में ज़्यादा जानें.
इंटरैक्शन
इंटरैक्शन डिजिटल अनुभवों का आधार है. इससे उपयोगकर्ताओं को यह फ़ीडबैक पाने में मदद मिलती है कि उन्होंने किस चीज़ पर क्लिक किया है और वर्चुअल स्पेस में कहां हैं. इस साल, कई बेहतरीन सुविधाएं जोड़ी गई हैं जिनकी वजह से इंटरैक्शन को लिखना और लागू करना आसान हो गया है. इससे, उपयोगकर्ताओं का अनुभव बेहतर और बेहतरीन वेब अनुभव मिलता है.
ट्रांज़िशन देखना
व्यू ट्रांज़िशन का किसी पेज के उपयोगकर्ता अनुभव पर गहरा असर पड़ता है. व्यू ट्रांज़िशन एपीआई की मदद से, अपने एक पेज के ऐप्लिकेशन की दो पेज स्थितियों के बीच विज़ुअल ट्रांज़िशन बनाया जा सकता है. ये ट्रांज़िशन, किसी पेज का पूरा ट्रांज़िशन हो सकते हैं या पेज पर छोटी-छोटी चीज़ें हो सकती हैं. जैसे, सूची में नए आइटम को जोड़ना या हटाना.
View ट्रांज़िशन एपीआई के कोर में document.startViewTranstion
फ़ंक्शन है. ऐसा फ़ंक्शन पास करें जो डीओएम को नई स्थिति में अपडेट करता है. ऐसा करने पर, एपीआई आपके लिए हर चीज़ का ध्यान रखता है. ऐसा करने के लिए यह पहले और बाद का स्नैपशॉट लेकर, फिर दोनों के बीच ट्रांज़िशन करता है. सीएसएस का इस्तेमाल करके यह तय किया जा सकता है कि क्या कैप्चर किया जाए. आपके पास यह तय करने का विकल्प भी होता है कि स्नैपशॉट को कैसे ऐनिमेट किया जाए.
वीटी स्क्रीनकास्ट
वीटी डेमो
Chrome 111 में शिप किए गए एक पेज के ऐप्लिकेशन के लिए, व्यू ट्रांज़िशन एपीआई. व्यू के ट्रांज़िशन के बारे में ज़्यादा जानें.
लीनियर-ईज़िंग फ़ंक्शन
ब्राउज़र सहायता
- 113
- 113
- 112
- 78 जीबी में से
इस फ़ंक्शन के नाम से धोखा न दें. linear()
फ़ंक्शन (यह linear
कीवर्ड से अलग है) की मदद से, आसान तरीके से जटिल ईज़िंग फ़ंक्शन बनाए जा सकते हैं. इससे कुछ सटीक भी नहीं हो सकता.
Chrome 113 में शिप किए जाने वाले linear()
से पहले, सीएसएस में बाउंस या स्प्रिंग इफ़ेक्ट बनाना नामुमकिन था. linear()
की वजह से, इन ईज़िंग को पॉइंट की सीरीज़ में आसान बनाकर और फिर उनके बीच लीनियर इंटरपोलेट करके, उनका अनुमान लगाया जा सकता है.
लीनियर-ईज़िंग स्क्रीनकास्ट
लीनियर-ईज़िंग का डेमो
linear()
के बारे में और जानें. linear()
कर्व बनाने के लिए, लीनियर ईज़िंग जनरेटर का इस्तेमाल करें.
स्क्रोल खत्म करें
कई इंटरफ़ेस में, स्क्रोल इंटरैक्शन शामिल होते हैं. कभी-कभी इंटरफ़ेस को, स्क्रोल करने की मौजूदा स्थिति के हिसाब से जानकारी सिंक करनी होती है या मौजूदा स्थिति के आधार पर डेटा फ़ेच करना होता है. scrollend
इवेंट से पहले, आपको टाइम आउट के गलत तरीके का इस्तेमाल करना पड़ता था. यह तरीका तब चालू होता था, जब उपयोगकर्ता की उंगली स्क्रीन पर ही रहती थी. scrollend
इवेंट में, स्क्रोलएंड का समय तय होता है. इससे यह पता चलता है कि उपयोगकर्ता अब भी हाथ का जेस्चर (हाव-भाव) के बीच में है या नहीं.
स्क्रीनकास्ट स्क्रोल करें
Scrollend डेमो
यह ब्राउज़र के लिए अहम था, क्योंकि स्क्रोल करते समय JavaScript, स्क्रीन पर उंगलियों की मौजूदगी को ट्रैक नहीं कर पाता, बस जानकारी उपलब्ध नहीं होती. स्क्रोल खत्म करने की कोशिश करने वाले गलत कोड के हिस्सों को अब मिटाया जा सकता है. साथ ही, उन्हें ब्राउज़र के ऐसे इवेंट से बदला जा सकता है जिसके पास ज़्यादा सटीक इवेंट है.
scrollend के बारे में ज़्यादा जानें.
स्क्रोल करके चलने वाले ऐनिमेशन
स्क्रोल-ड्रिवन ऐनिमेशन, Chrome 115 में उपलब्ध एक रोमांचक सुविधा है. इनमें किसी मौजूदा सीएसएस ऐनिमेशन या वेब ऐनिमेशन एपीआई की मदद से बनाया गया ऐनिमेशन लिया जा सकता है और उसे स्क्रोलर के स्क्रोल ऑफ़सेट में जोड़ा जा सकता है. हॉरिज़ॉन्टल स्क्रोलर में ऊपर-नीचे या बाएं और दाएं स्क्रोल करने पर, लिंक किया गया ऐनिमेशन सीधे जवाब के तौर पर आगे और पीछे की ओर स्क्रोल करेगा.
ScrollTimeline की मदद से, स्क्रोलर की प्रोग्रेस को ट्रैक किया जा सकता है, जैसा कि नीचे दिए गए डेमो में दिखाया गया है. जैसे-जैसे पेज के आखिर तक स्क्रोल किया जाता है, वैसे-वैसे टेक्स्ट, अपने-आप हर एक वर्ण के बारे में बताता है.
एसडीए स्क्रीनकास्ट
एसडीए का डेमो
ViewTimeline की मदद से, स्क्रोलपोर्ट को पार करने वाले एलिमेंट को ट्रैक किया जा सकता है. यह ठीक उसी तरह काम करता है जिस तरह Intersection निगरानी किसी एलिमेंट को ट्रैक करती है. नीचे दिए गए डेमो में, स्क्रोलपोर्ट में आने के समय से लेकर उसके बीच में आने तक, हर इमेज अपने-आप सामने आती है.
एसडीए का डेमो स्क्रीनकास्ट
एसडीए का लाइव डेमो
स्क्रोल-ड्रिवन ऐनिमेशन, सीएसएस ऐनिमेशन और Web ऐनिमेशन एपीआई के साथ काम करते हैं. इसलिए, इन एपीआई से मिलने वाले सभी फ़ायदों का आपको फ़ायदा मिल सकता है. इसमें मुख्य थ्रेड से इन ऐनिमेशन को चलाने की सुविधा भी शामिल है. अब स्मूद ऐनिमेशन वाले ऐनिमेशन पाएं, जिन्हें स्क्रोल करके चलाया जा सकता है. साथ ही, अतिरिक्त कोड की बस कुछ लाइनों की मदद से, मुख्य थ्रेड को चलाया जा सकता है. आपको क्या पसंद नहीं है?
स्क्रोल करके चलने वाले ऐनिमेशन के बारे में ज़्यादा जानने के लिए, पूरी जानकारी वाला यह लेख देखें या Scroll-powered-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
पर और उससे ऐनिमेट करने के लिए नई वेब क्षमताओं पर बनता है. इस नियम की मदद से, किसी एलिमेंट को "ओपन-ओपन" (खुली होने से पहले) की ऐसी स्टाइल दी जा सकती है जिसे पेज पर एलिमेंट के खुलने से पहले ब्राउज़र देख सकता है. यह एंट्री ऐनिमेशन के लिए और पॉपओवर या डायलॉग जैसे एलिमेंट में ऐनिमेशन बनाने के लिए बहुत काम का है. यह तब भी काम का हो सकता है, जब कोई एलिमेंट बनाया जा रहा हो और आपको उसे ऐनिमेट करना हो. नीचे दिए गए उदाहरण को देखें, जो popover
एट्रिब्यूट (अगला सेक्शन देखें) को ऐनिमेट करता है. साथ ही, व्यूपोर्ट के बाहर से आसानी से ऊपरी लेयर में यह उदाहरण दिखाता है.
@starting-style स्क्रीनकास्ट
@starting-style डेमो
@starting-style और अन्य एंट्री ऐनिमेशन के बारे में ज़्यादा जानें.
ओवरले
टॉप-लेयर स्टाइल, जैसे कि popover
और dialog
—के साथ एलिमेंट को चालू करने के लिए, नई सीएसएस overlay
प्रॉपर्टी को अपने ट्रांज़िशन में जोड़ा जा सकता है. इससे, टॉप-लेयर में आसानी से ऐनिमेट किया जा सकता है. अगर ओवरले को बदला नहीं जाता है, तो आपका एलिमेंट तुरंत क्लिप किया जाने, पूरी तरह से बदलने, और ढका हुआ होना शुरू हो जाएगा. साथ ही, आपको यह बदलाव नहीं दिखेगा. इसी तरह, overlay
को टॉप-लेयर एलिमेंट में जोड़े जाने पर, ::backdrop
को आसानी से ऐनिमेट करने की सुविधा मिलती है.
ओवरले स्क्रीनकास्ट
ओवरले लाइव डेमो
ओवरले और बाहर निकलने के दूसरे ऐनिमेशन के बारे में ज़्यादा जानें.
कॉम्पोनेंट
साल 2023, स्टाइल और एचटीएमएल कॉम्पोनेंट के मिले-जुले रूप के लिहाज़ से बड़ा साल रहा. इसमें popover
लैंडिंग शामिल किया गया. साथ ही, ऐंकर पोज़िशनिंग और स्टाइलिंग ड्रॉपडाउन के आने वाले समय में, बहुत काम किया गया. ये कॉम्पोनेंट, सामान्य यूआई पैटर्न बनाना आसान बनाते हैं. आपको हर बार अतिरिक्त लाइब्रेरी पर निर्भर रहने या अपना स्टेट मैनेजमेंट सिस्टम बनाने की ज़रूरत नहीं पड़ती.
पॉपओवर
पॉपओवर एपीआई की मदद से, पेज के बाकी हिस्से में सबसे ऊपर मौजूद एलिमेंट बनाए जा सकते हैं. इन सुझावों में मेन्यू, चुनने, और टूलटिप शामिल हो सकते हैं. पॉपओवर बनाने के लिए, पॉप-अप होने वाले एलिमेंट में popover
एट्रिब्यूट और id
जोड़ें. इसके बाद, popovertarget="my-popover"
का इस्तेमाल करके, इसके id
एट्रिब्यूट को शुरू करने वाले बटन से जोड़ें. पॉपओवर एपीआई में ये सुविधाएं काम करती हैं:
- सबसे ऊपरी लेयर पर प्रमोशन करें. पॉपओवर, पेज के बाकी हिस्से के ऊपर एक अलग लेयर में दिखेंगे, ताकि आपको z-इंडेक्स का इस्तेमाल न करना पड़े.
- रोशनी को हटाने की सुविधा. पॉपओवर वाली जगह के बाहर क्लिक करने पर, पॉपओवर बंद हो जाएगा और फ़ोकस वापस आ जाएगा.
- डिफ़ॉल्ट फ़ोकस मैनेजमेंट. पॉपओवर खोलने पर अगला टैब पॉपओवर के अंदर रुक जाता है.
- कीबोर्ड की बाइंडिंग ऐक्सेस की जा सकती हैं.
esc
बटन दबाने या डबल टॉगल करने से पॉपओवर बंद हो जाएगा और फ़ोकस वापस आ जाएगा. - कॉम्पोनेंट बाइंडिंग को ऐक्सेस करना. पॉपओवर एलिमेंट को मतलब के हिसाब से पॉपओवर ट्रिगर से जोड़ना.
पॉपओवर स्क्रीनकास्ट
पॉपओवर लाइव डेमो
'चुनें' में हॉरिज़ॉन्टल नियम
एचटीएमएल में एक और छोटा सा बदलाव इस साल Chrome और Safari में किया गया. इसके तहत, हॉरिज़ॉन्टल रूल एलिमेंट (<hr>
टैग) को <select>
एलिमेंट में जोड़ा जा सकता है, ताकि कॉन्टेंट को विज़ुअल तौर पर अलग किया जा सके. पहले, <hr>
टैग को किसी चुने गए हिस्से में रखने से, सिर्फ़ रेंडर नहीं होता था. हालांकि, इस साल Safari और Chrome, दोनों में यह सुविधा काम करती है. इससे <select>
एलिमेंट में कॉन्टेंट को अलग-अलग करने में मदद मिलती है.
स्क्रीनशॉट चुनें
लाइव डेमो चुनें
'चुनें' में घंटे का इस्तेमाल करें सुविधा का इस्तेमाल करने के बारे में ज़्यादा जानें
:उपयोगकर्ता के लिए मान्य और अमान्य सूडो क्लास
इस साल सभी ब्राउज़र में एक ही जगह पर, :user-valid
और :user-invalid
, :valid
और :invalid
बदली हुई क्लास की तरह ही काम करते हैं. हालांकि, ये किसी फ़ॉर्म कंट्रोल से तब ही मैच करते हैं, जब उपयोगकर्ता इनपुट से काफ़ी हद तक इंटरैक्ट करता है. ज़रूरी और खाली फ़ॉर्म कंट्रोल, :invalid
से मैच करेगा. भले ही, उपयोगकर्ता ने पेज के साथ इंटरैक्ट करना शुरू न किया हो. वही कंट्रोल :user-invalid
से तब तक मैच नहीं होगा, जब तक कि उपयोगकर्ता ने इनपुट बदल न दिया हो और उसे अमान्य स्थिति में न छोड़ दिया हो.
इन नए सिलेक्टर की मदद से, उपयोगकर्ता के इनपुट को ट्रैक करने के लिए, स्टेटफ़ुल कोड लिखने की ज़रूरत नहीं है.
:उपयोगकर्ता-* स्क्रीनकास्ट
:उपयोगकर्ता-* लाइव डेमो
उपयोगकर्ता-* फ़ॉर्म की पुष्टि के लिए गलत एलिमेंट का इस्तेमाल करने के बारे में ज़्यादा जानें.
खास अकॉर्डियन
ब्राउज़र सहायता
- 120
- 120
- x
- 78 जीबी में से
वेब पर दिखने वाला एक सामान्य यूज़र इंटरफ़ेस (यूआई) पैटर्न, एक अकॉर्डियन कॉम्पोनेंट है. इस पैटर्न को लागू करने के लिए, कुछ <details>
एलिमेंट को एक साथ मिलाया जाता है. अक्सर, एलिमेंट को विज़ुअल तौर पर ग्रुप करके यह बताया जाता है कि वे एक साथ हैं.
Chrome 120 में नया है, <details>
एलिमेंट के लिए name
एट्रिब्यूट इस्तेमाल किया जा सकता है. इस एट्रिब्यूट का इस्तेमाल करने पर, एक ही name
वैल्यू वाले कई <details>
एलिमेंट एक सिमैंटिक ग्रुप बनाते हैं. ग्रुप का ज़्यादा से ज़्यादा एक एलिमेंट एक बार में खोला जा सकता है: जब ग्रुप के किसी <details>
एलिमेंट को खोला जाता है, तो पहले खुला हुआ एलिमेंट अपने-आप बंद हो जाएगा. इस तरह के अकॉर्डियन को खास अकॉर्डियन कहा जाता है.
यह ज़रूरी नहीं है कि <details>
एलिमेंट जो किसी खास अकॉर्डियन का हिस्सा हों. यह ज़रूरी नहीं है कि ये एलिमेंट मिलते-जुलते हों. इन्हें दस्तावेज़ में कहीं भी दिखाया जा सकता है.
पिछले कुछ सालों में सीएसएस के मॉडल में इतना सुधार हुआ है. खास तौर पर, 2023 में. अगर आपने सीएसएस का इस्तेमाल पहले कभी नहीं किया है या आपको इसके बारे में बुनियादी जानकारी चाहिए, तो web.dev पर उपलब्ध मुफ़्त कोर्स के साथ-साथ सीएसएस के बारे में जानें कोर्स भी देखें.
हमारी तरफ़ से आपको छुट्टियों का सीज़न शुभ हो और हम उम्मीद करते हैं कि जल्द ही आपको सीएसएस और यूज़र इंटरफ़ेस (यूआई) की कुछ शानदार सुविधाओं को अपने काम में शामिल करने का मौका मिलेगा!
⇾ Chrome की यूज़र इंटरफ़ेस (यूआई) की DevRel टीम,