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

Una Kravets

Bramus

Adam Argyle

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

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

• कंटेनर क्वेरी
• स्टाइल क्वेरी
• :has() चुनने वाला
• nth-of माइक्रोटैक्स
• text-wrap: balance
• initial-letter
• डाइनैमिक व्यूपोर्ट यूनिट
• वाइड-गैमट कलर स्पेस
• color-mix()
• नेस्टिंग
• कैस्केड लेयर
• स्कोप किए गए स्टाइल
• त्रिकोणमितीय फ़ंक्शन
• बदलाव करने से जुड़ी अलग-अलग प्रॉपर्टी
• पॉपओवर
• ऐंकर की पोज़िशनिंग
• 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), तो ब्राउज़र उस एलिमेंट को चुनेगा जिस पर खास क्लास लागू की गई है. साथ ही, वह दूसरा चाइल्ड भी है. यह :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;
  }
}

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

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

कैस्केड लेयर

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

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

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

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

सीएसएस स्कोप की गई स्टाइल की मदद से डेवलपर, उन सीमाओं के बारे में बता सकते हैं जिनके लिए खास स्टाइल लागू होती हैं. इससे सीएसएस में नेटिव नेमस्पेसिंग बनती है. पहले, डेवलपर क्लास का नाम बदलने के लिए तीसरे पक्ष की स्क्रिप्टिंग पर भरोसा करते थे. इसके अलावा, स्टाइल कोलिज़न को रोकने के लिए, वे नाम रखने के खास नियमों का इस्तेमाल करते थे. हालांकि, अब @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 के अंदर मौजूद कॉन्टेंट को स्टाइल करना हो.

पॉपओवर

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

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

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

पॉपओवर के लिए DOM स्ट्रक्चर, डिक्लेरेटिव होता है. इसे इस तरह से लिखा जा सकता है कि आपके पॉपओवर एलिमेंट को 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 के वीडियो देखें.