सीएसएस और यूज़र इंटरफ़ेस (यूआई) में नया क्या है: I/O 2023 एडिशन

Una Kravets

Bramus

Adam Argyle

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

यहां 20 ऐसी सुविधाओं के बारे में बताया गया है जो हाल ही में लॉन्च हुई हैं या जल्द ही लॉन्च होने वाली हैं. ये सुविधाएं बेहद दिलचस्प और असरदार हैं:

• कंटेनर क्वेरी
• स्टाइल क्वेरी
• :has() सिलेक्टर
• nth-of microsyntax
• text-wrap: balance
• initial-letter
• डाइनैमिक व्यूपोर्ट यूनिट
• वाइड-गेमट कलर स्पेस
• color-mix()
• नेस्टिंग
• कैस्केड लेयर
• स्कोप वाली स्टाइल
• त्रिकोणमितीय फ़ंक्शन
• अलग-अलग ट्रांसफ़ॉर्म प्रॉपर्टी
• पॉपओवर
• ऐंकर पोज़िशनिंग
• selectmenu
• अलग-अलग प्रॉपर्टी के ट्रांज़िशन
• स्क्रोल करने पर चलने वाले ऐनिमेशन
• ट्रांज़िशन देखना

नया रिस्पॉन्सिव

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

कंटेनर क्वेरी

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

• 105
• 105
• 110
• 16

सोर्स

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

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

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

देखें

इस पोस्ट में कंटेनर क्वेरी और लॉजिकल कॉम्पोनेंट बनाने के बारे में ज़्यादा जानें.

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

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

• 111
• 111
• x
• 18

सोर्स

कंटेनर क्वेरी स्पेसिफ़िकेशन की मदद से, पैरंट कंटेनर की स्टाइल वैल्यू के बारे में भी क्वेरी की जा सकती है. फ़िलहाल, यह सुविधा Chrome 111 में कुछ हद तक लागू है. यहां कंटेनर स्टाइल लागू करने के लिए, सीएसएस कस्टम प्रॉपर्टी का इस्तेमाल किया जा सकता है.

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

@container style(--sunny: true) {
 .weather-card {
   background: linear-gradient(-30deg, yellow, orange);
 }

 .weather-card:after {
   content: url(<data-uri-for-demo-brevity>);
   background: gold;
 }
}

देखें

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

इस बारे में ज़्यादा जानने और ज़्यादा डेमो देखने के लिए, स्टाइल क्वेरी से जुड़ी हमारी ब्लॉग पोस्ट देखें.

:has()

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

• 105
• 105
• 121
• 15.4

सोर्स

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

कंटेनर क्वेरी के उदाहरण के आधार पर, कॉम्पोनेंट को ज़्यादा डाइनैमिक बनाने के लिए :has() का इस्तेमाल किया जा सकता है. इस आइटम में, "स्टार" एलिमेंट वाले आइटम पर स्लेटी रंग का बैकग्राउंड लागू होता है. वहीं, चुने गए चेकबॉक्स वाले आइटम का बैकग्राउंड नीला होता है.

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

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

:has() के बारे में ज़्यादा जानने और कुछ और डेमो देखने के लिए, यह ब्लॉग पोस्ट पढ़ें.

nवां सिंटैक्स

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

• 111
• 111
• 113
• 9

इस वेब प्लैटफ़ॉर्म पर अब बच्चों के लिए बेहतर तरीके से सेटिंग चुनी जा सकती है. बेहतर nth-child सिंटैक्स से एक नया कीवर्ड ("of") मिलता है. इसकी मदद से, An+B के मौजूदा माइक्रो सिंटैक्स का इस्तेमाल किया जा सकता है. साथ ही, खोज के लिए ज़्यादा सटीक सबसेट का इस्तेमाल किया जा सकता है.

अगर खास क्लास पर :nth-child(2) जैसे सामान्य nth-child का इस्तेमाल किया जाता है, तो ब्राउज़र उस एलिमेंट को चुनेगा जिस पर क्लास special लागू है और वह दूसरा चाइल्ड भी है. यह :nth-child(2 of .special) के उलट है, जो पहले सभी .special एलिमेंट को पहले से फ़िल्टर करेगा और फिर उस सूची से दूसरा एलिमेंट चुनेगा.

देखें

इस सुविधा के बारे में ज़्यादा जानने के लिए, nth-of सिंटैक्स के बारे में हमारा लेख पढ़ें.

text-wrap: balance

स्टाइल में लॉजिक को सिर्फ़ चुनिंदा एलिमेंट और स्टाइल क्वेरी में ही जोड़ा जा सकता है, ऐसा टाइपोग्राफ़ी में भी किया जा सकता है. Chrome 114 में, balance वैल्यू वाली text-wrap प्रॉपर्टी का इस्तेमाल करके, हेडिंग के लिए टेक्स्ट-रैप बैलेंसिंग का इस्तेमाल किया जा सकता है.

डेमो आज़माएं

टेक्स्ट को बैलेंस करने के लिए, ब्राउज़र सबसे छोटी चौड़ाई के लिए बाइनरी सर्च करता है, ताकि कोई अतिरिक्त लाइन न दिखे. यह एक सीएसएस पिक्सल (डिसप्ले पिक्सल नहीं) पर रुक जाता है. बाइनरी सर्च में चरणों को कम करने के लिए, ब्राउज़र औसत लाइन की चौड़ाई के 80% से शुरू होता है.

डेमो आज़माएं

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

इस लेख में इसके बारे में ज़्यादा जानें.

initial-letter

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

• 110
• 110
• x
• 9

सोर्स

वेब टाइपोग्राफ़ी में एक और अच्छा सुधार initial-letter है. इस सीएसएस प्रॉपर्टी की मदद से, इनसेट ड्रॉप कैप की स्टाइल को बेहतर तरीके से कंट्रोल किया जा सकता है.

:first-letter स्यूडो एलिमेंट पर initial-letter का इस्तेमाल करके, यह जानकारी दी जाती है: वह कितनी लाइनों में है, इसके आधार पर अक्षर का साइज़. अक्षर का ब्लॉक-ऑफ़सेट या “सिंक”, जहां अक्षर दिखेगा.

देखें

intial-letter का इस्तेमाल करने के बारे में ज़्यादा जानने के लिए, यहां जाएं.

डाइनैमिक व्यूपोर्ट यूनिट

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

• 108
• 108
• 101
• 15.4

वेब डेवलपर को आज एक आम समस्या का सामना करना पड़ता है. यह समस्या, पूरे व्यूपोर्ट के साइज़ को सटीक और एक जैसा रखने से जुड़ी है. खास तौर पर, मोबाइल डिवाइसों पर यह समस्या होती है. डेवलपर के तौर पर, आपको 100vh (व्यूपोर्ट की ऊंचाई का 100%) का मतलब “व्यूपोर्ट जितना ऊंचा हो” चाहिए. हालांकि, vh यूनिट में मोबाइल पर नेविगेशन बार को छोटा करने जैसी चीज़ों का ध्यान नहीं रखा जाता. इसलिए, कभी-कभी यह बहुत लंबा हो जाता है और स्क्रोल करने की ज़रूरत पड़ती है.

इस समस्या को हल करने के लिए, अब हमारे पास वेब प्लैटफ़ॉर्म पर यूनिट की नई वैल्यू हैं. इनमें ये शामिल हैं: - व्यूपोर्ट की छोटी ऊंचाई और चौड़ाई (या svh और svw), जो सबसे छोटे ऐक्टिव व्यूपोर्ट साइज़ को दिखाती हैं. - व्यूपोर्ट की ऊंचाई और चौड़ाई (lvh और lvw), जो सबसे बड़े साइज़ को दिखाती है. - डाइनैमिक व्यूपोर्ट की ऊंचाई और चौड़ाई (dvh और dvw).

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

ध्यान दें: ध्यान दें कि डाइनैमिक व्यूपोर्ट यूनिट, वर्चुअल कीबोर्ड की मौजूदगी को ध्यान में नहीं रखती हैं. Chrome 108 में, इस व्यवहार को बदलने के लिए मेटा-टैग सेट किया जा सकता है.

इन नई यूनिट के बारे में ज़्यादा जानने के लिए, बड़ी, छोटी, और डाइनैमिक व्यूपोर्ट यूनिट लेख पढ़ें.

वाइड-गैमट कलर स्पेस

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

• 111
• 111
• 113
• 15.4

सोर्स

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

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

हालांकि, अब हमारे पास वेब प्लैटफ़ॉर्म पर कई नए कलर स्पेस हैं. इनमें REC2020, P3, XYZ, LAB, OKLAB, LCH, और OKLCH शामिल हैं. एचडी कलर गाइड में, वेब कलर स्पेस और अन्य चीज़ों के बारे में जानें.

DevTools में तुरंत देखा जा सकता है कि कलर रेंज कैसे बड़ी हुई है. इसमें सफ़ेद लाइन से यह पता चलता है कि sRGB रेंज कहां खत्म होती है और वाइडर-गैमट कलर रेंज कहां से शुरू होती है.

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

color-mix()

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

• 111
• 111
• 113
• 16.2

सोर्स

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

color-mix(in srgb, blue, white);
color-mix(in srgb-linear, blue, white);
color-mix(in lch, blue, white);
color-mix(in oklch, blue, white);
color-mix(in lab, blue, white);
color-mix(in oklab, blue, white);
color-mix(in xyz, blue, white);

डेमो आज़माएं

color-mix() फ़ंक्शन, लंबे समय से अनुरोध की गई सुविधा देता है: इसमें ओपेक रंग की वैल्यू को सुरक्षित रखने की सुविधा होती है, ताकि उनमें कुछ पारदर्शिता रखी जा सके. अब, अलग-अलग ओपैसिटी वाले रंगों के वैरिएंट बनाते समय, अपने ब्रैंड के कलर वैरिएबल का इस्तेमाल किया जा सकता है. ऐसा करने का तरीका यह है कि आप रंग को पारदर्शी के साथ मिलाएं. अपने ब्रैंड के नीले रंग को 10% पारदर्शी रंग के साथ मिलाने पर, आपको 90% अपारदर्शी ब्रैंड रंग मिलता है. यह देखा जा सकता है कि इसकी मदद से, तेज़ी से कलर सिस्टम कैसे बनाए जा सकते हैं.

आज Chrome DevTools में इसे काम करते हुए देखा जा सकता है. स्टाइल पैनल में मौजूद, झलक दिखाने वाले वेन डायग्राम के आइकॉन को अब यह देखा जा सकता है.

color-mix फ़ंक्शन के बारे में हमारी ब्लॉग पोस्ट में ज़्यादा उदाहरण और जानकारी देखें या color-mix() फ़ंक्शन के इस प्लेग्राउंड को आज़माएं.

देखें

सीएसएस के बुनियादी सिद्धांत

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

नेस्ट करना

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

• 120
• 120
• 117
• 17.2

सोर्स

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

.card {}
.card:hover {}

/* can be done with nesting like */
.card {
  &:hover {

  }
}

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

.card {
  display: grid;
  gap: 1rem;

  @container (width >= 480px) {
    display: flex;
  }
}

लेआउट में flex तब बदलाव होता है, जब कंटेनर में 480px इनलाइन स्पेस से ज़्यादा या उसके बराबर हो. शर्तें पूरी होने पर ब्राउज़र, डिसप्ले की नई स्टाइल को सिर्फ़ लागू कर देगा.

ज़्यादा जानकारी और उदाहरणों के लिए, CSS नेस्टिंग पर हमारी पोस्ट देखें.

कैस्केड लेयर

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

• 99
• 99
• 97
• 15.4

सोर्स

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

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

Codepen पर प्रोजेक्ट को एक्सप्लोर करें.

कैस्केड लेयर इस्तेमाल करने के तरीके के बारे में ज़्यादा जानने के लिए, यह लेख पढ़ें.

स्कोप वाली सीएसएस

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

• 118
• 118
• 
• 17.4

सोर्स

सीएसएस स्कोप वाली स्टाइल की मदद से, डेवलपर यह तय कर सकते हैं कि कौनसी स्टाइल किन सीमाओं के लिए लागू होंगी. इससे सीएसएस में नेटिव नेमस्पेस बनता है. पहले, डेवलपर क्लास का नाम बदलने के लिए तीसरे पक्ष की स्क्रिप्टिंग या अलग-अलग स्टाइल के इस्तेमाल से बचने के लिए नाम रखने के खास तौर-तरीकों का इस्तेमाल करते थे. हालांकि, जल्द ही @scope का इस्तेमाल किया जा सकेगा.

यहां, हम .title एलिमेंट को .card के दायरे में रख रहे हैं. इससे, टाइटल एलिमेंट को पेज पर मौजूद किसी भी दूसरे .title एलिमेंट से, जैसे कि ब्लॉग पोस्ट का टाइटल या कोई अन्य हेडिंग से, अलग रखा जा सकेगा.

@scope (.card) {
  .title {
    font-weight: bold;
  }
}

इस लाइव डेमो में, @layer के साथ-साथ स्कोपिंग की सीमाओं के साथ @scope देखा जा सकता है:

देखें

css-cascade-6 स्पेसिफ़िकेशन में @scope के बारे में ज़्यादा जानें.

त्रिकोणमितीय फ़ंक्शन

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

• 111
• 111
• 108
• 15.4

सोर्स

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

नीचे दिए गए डेमो में, बिंदु एक सेंटर पॉइंट के आस-पास घूमते हैं. हर बिंदु को उसके चारों ओर घूमने के बजाय, फिर उसे बाहर की ओर ले जाने के बजाय, हर बिंदु का अनुवाद X और Y ऐक्सिस पर किया जाता है. X और Y ऐक्सिस पर दूरियां तय करने के लिए, --angle के cos() और sin() को ध्यान में रखा जाता है.

देखें

इस विषय पर अधिक जानकारी के लिए हमारा त्रिकोणमितीय फलनों पर आधारित हमारा लेख देखें.

अलग-अलग ट्रांसफ़ॉर्म प्रॉपर्टी

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

• 104
• 104
• 72
• 14.1

सोर्स

अलग-अलग ट्रांसफ़ॉर्म फ़ंक्शन की मदद से, डेवलपर के काम करने के तरीके को लगातार बेहतर बनाया जा रहा है. पिछली बार I/O कॉन्फ़्रेंस होने के बाद से, अलग-अलग ट्रांसफ़ॉर्मेशन सभी आधुनिक ब्राउज़र पर स्टेबल हो गए हैं.

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

.target {
  transform: translateX(50%) rotate(30deg) scale(1.2);
}

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2); /* Only scale changed here, yet you have to repeat all other parts */
}

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

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

.target:hover {
  scale: 2;
}

इसकी मदद से, ऐनिमेशन के दौरान अलग-अलग समय में, ट्रांसलेशन, रोटेशन या स्केल में एक साथ बदलाव हो सकते हैं.

ज़्यादा जानकारी के लिए, अलग-अलग ट्रांसफ़ॉर्म फ़ंक्शन के बारे में यह पोस्ट देखें.

पसंद के मुताबिक बनाए जा सकने वाले कॉम्पोनेंट

यह पक्का करने के लिए कि हम वेब प्लैटफ़ॉर्म के ज़रिए डेवलपर की कुछ अहम ज़रूरतों को पूरा कर सकें, हम OpenUI कम्यूनिटी ग्रुप के साथ काम कर रहे हैं. हमने इन तीन समाधानों का इस्तेमाल करके शुरुआत की है:

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

पॉपओवर

popover API, एलिमेंट को ब्राउज़र के साथ काम करने की कुछ सुविधाएं देता है. जैसे:

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

इसका मतलब है कि इस सभी फ़ंक्शन को बनाने और इन सभी स्थितियों को ट्रैक करने के लिए, कम JavaScript लिखना पड़ता है.

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

<div id="event-popup" popover>
  <!-- Popover content goes in here -–>
</div>

<button popovertarget="event-popup">Create New Event</button>

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

फ़िलहाल, पॉपओवर के बारे में सबसे अप-टू-डेट दस्तावेज़ MDN पर मिल सकते हैं.

ऐंकर की पोज़िशनिंग

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

anchor() फ़ंक्शन की मदद से, बीच में मौजूद टूलटिप बनाया जा सकता है. इसके लिए, ऐंकर की चौड़ाई का इस्तेमाल करके, टूलटिप को ऐंकर के x पोज़िशन के 50% पर रखा जा सकता है. इसके बाद, बाकी प्लेसमेंट स्टाइल लागू करने के लिए, मौजूदा पोज़िशनिंग वैल्यू का इस्तेमाल करें.

अगर पोपओवर को जिस जगह पर रखा गया है वहां वह व्यूपोर्ट में फ़िट नहीं होता है, तो क्या होगा?

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

.center-tooltip {
  position-fallback: --top-then-bottom;
  translate: -50% 0;
}

@position-fallback --top-then-bottom {
  @try {
    bottom: calc(anchor(top) + 0.5rem);
    left: anchor(center);
  }

  @try {
    top: calc(anchor(bottom) + 0.5rem);
    left: anchor(center);
  }
}

देखें

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

ऐंकर पोज़िशनिंग के बारे में ज़्यादा जानने के लिए, यह ब्लॉग पोस्ट पढ़ें.

<selectmenu>

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

सबसे बाईं ओर मौजूद selectmenu का उदाहरण बनाने के लिए, रंगीन बिंदुओं का इस्तेमाल करें. ये बिंदु उस रंग के होने चाहिए जो कैलेंडर इवेंट में दिखेगा. इसे इस तरह लिखा जा सकता है:

<selectmenu>
  <button slot="button" behavior="button">
    <span>Select event type</span>
    <span behavior="selected-value" slot="selected-value"></span>
    <span><img src="icon.svg"/></span>
  </button>
  <option value="meeting">
    <figure class="royalblue"></figure>
    <p>Meeting</p>
  </option>
  <option value="break">
    <figure class="gold"></figure>
     <p>Lunch/Break</p>
  </option>
  ...
</selectmenu>

देखें

डिस्क्रीट प्रॉपर्टी ट्रांज़िशन

पॉपओवर को आसानी से अंदर और बाहर ले जाने के लिए, वेब को अलग-अलग प्रॉपर्टी को ऐनिमेट करने की ज़रूरत होती है. ये ऐसी प्रॉपर्टी हैं जिन्हें पहले आम तौर पर ऐनिमेट नहीं किया जाता था. जैसे, टॉप-लेयर के लिए ऐनिमेट करना और display: none से ऐनिमेशन करना.

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

नीचे दिया गया पॉपओवर डेमो, खुली स्थिति के लिए :popover-open और ओपन से पहले की स्थिति के लिए @starting-style का इस्तेमाल करके पॉपओवर को ऐनिमेट करता है. साथ ही, 'ओपन-इज़-क्लोज़्ड' स्थिति के लिए सीधे एलिमेंट में ट्रांसफ़ॉर्म वैल्यू लागू करता है. इसे डिसप्ले के साथ काम करने के लिए, इसे transition प्रॉपर्टी में जोड़ना होगा. जैसे:

.settings-popover {
  &:popover-open {
    /*   0. before-change   */
    @starting-style {
      transform: translateY(20px);
      opacity: 0;
    }

    /*   1. open (changed) state   */
    transform: translateY(0);
    opacity: 1;
  }

  /*   2. After-change state */
  transform: translateY(-50px);
  opacity: 0;

  /*  enumarate transitioning properties, including display */
  transition: transform 0.5s, opacity 0.5s, display 0.5s allow-discrete;
}

देखें

इंटरैक्शन

इससे हम इंटरैक्शन पर फ़ोकस करते हैं. यह वेब यूज़र इंटरफ़ेस (यूआई) की सुविधाओं की इस यात्रा का आखिरी पड़ाव है.

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

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

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

• 115
• 115
• 
• x

सोर्स

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

यह एपीआई, JavaScript क्लास और सीएसएस प्रॉपर्टी के सेट के साथ काम करता है. इनकी मदद से, आसानी से स्क्रोल-ड्रिवन ऐनिमेशन बनाए जा सकते हैं.

स्क्रोल करके सीएसएस ऐनिमेशन चलाने के लिए, नई scroll-timeline, view-timeline, और animation-timeline प्रॉपर्टी का इस्तेमाल करें. JavaScript Web Animations API को चलाने के लिए, Element.animate() को timeline विकल्प के तौर पर ScrollTimeline या ViewTimeline इंस्टेंस पास करें

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

स्क्रोल करने पर चलने वाले इन ऐनिमेशन को बनाने के बारे में ज़्यादा जानकारी के लिए, कृपया स्क्रोल करने पर चलने वाले ऐनिमेशन के बारे में यह लेख पढ़ें.

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

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

• 111
• 111
• x
• 18

सोर्स

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

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

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // With a transition:
  document.startViewTransition(() => updateTheDOMSomehow(data));
}

सीएसएस की मदद से यह कंट्रोल किया जाता है कि ट्रांज़िशन कैसा दिखे

@keyframes slide-from-right {
  from { opacity: 0; transform: translateX(75px); }
}

@keyframes slide-to-left {
  to { opacity: 0; transform: translateX(-75px); }
}

::view-transition-old(root) {
  animation: 350ms both slide-to-left ease;
}

::view-transition-new(root) {
  animation: 350ms both slide-from-right ease;
}

जैसा कि मैक्सी फ़ेरेरा के इस शानदार डेमो में दिखाया गया है, व्यू ट्रांज़िशन के दौरान दूसरे पेज इंटरैक्शन, जैसे कि कोई चलाया जा रहा वीडियो काम करते रहें.

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

नतीजा

सीएसएस और एचटीएमएल के सभी नए अपडेट के बारे में जानने के लिए, developer.chrome.com पर जाएं. साथ ही, वेब के लिए ज़्यादा अपडेट पाने के लिए, I/O के वीडियो देखें.