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

Una Kravets

Bramus

Adam Argyle

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

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

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

The New Responsive

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

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

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

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

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

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

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

कंटेनर क्वेरी स्पेसिफ़िकेशन की मदद से, पैरंट कंटेनर की स्टाइल वैल्यू के बारे में भी क्वेरी की जा सकती है. फ़िलहाल, इसे 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()

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

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

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

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

nth-of सिंटैक्स

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

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

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

text-wrap: balance

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

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

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

initial-letter

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

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

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

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

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

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

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

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

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

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

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

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

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

color-mix()

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

नेस्ट करना

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

.card {}
.card:hover {}

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

  }
}

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

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

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

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

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

कैस्केड लेयर

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

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

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

स्कोप की गई सीएसएस

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

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

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

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

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

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

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

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

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

बदलाव करने से जुड़ी अलग-अलग प्रॉपर्टी

अलग-अलग ट्रांसफ़ॉर्म फ़ंक्शन की मदद से, डेवलपर के काम करने के तरीके को लगातार बेहतर बनाया जा रहा है. पिछली बार 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. यह ड्रॉपडाउन मेन्यू कॉम्पोनेंट को पसंद के मुताबिक बनाने की सुविधा देता है. इसका इस्तेमाल तब किया जाता है, जब आपको किसी select कॉम्पोनेंट के अंदर मौजूद कॉन्टेंट को स्टाइल करना हो.

पॉपओवर

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

• टॉप-लेयर के लिए सहायता उपलब्ध है, इसलिए आपको 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% पर रखा जा सकता है. इसके बाद, प्लेसमेंट के बाकी स्टाइल लागू करने के लिए, पोज़िशनिंग की मौजूदा वैल्यू का इस्तेमाल करें.

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

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

.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 से ऐनिमेट करना और 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 में कुछ बहुत ही दिलचस्प एपीआई भी उपलब्ध हैं

स्क्रोल-ड्रिवन ऐनिमेशन

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

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

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

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

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

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

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

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

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 के वीडियो देखें.