सीएसएस और यूज़र इंटरफ़ेस (यूआई) में नया क्या है: 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 चुनने की ज़्यादा बेहतर सुविधा उपलब्ध है. nth-child के ऐडवांस सिंटैक्स में एक नया कीवर्ड ("of") दिया गया है. इससे An+B के मौजूदा माइक्रो सिंटैक्स का इस्तेमाल किया जा सकता है. साथ ही, आपको खोज के लिए ज़्यादा खास सबसेट मिलता है.

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

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

text-wrap: balance

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

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

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

initial-letter

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

initial-letter का इस्तेमाल :first-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;
  }
}

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

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 में और उससे ऐनिमेशन करना.

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

नीचे दिए गए पॉपओवर डेमो में, पॉपओवर को खोलने और बंद करने के लिए :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 को चलाने के लिए, ScrollTimeline या ViewTimeline इंस्टेंस को Element.animate() के timeline विकल्प के तौर पर पास करें

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

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

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

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