पिछले कुछ महीनों ने वेब यूज़र इंटरफ़ेस (यूआई) के लिए सुनहरे दौर की शुरुआत की है. क्रॉस-ब्राउज़र का इस्तेमाल करके नए प्लैटफ़ॉर्म को और बेहतर बनाया गया है. अब वेब की ज़्यादा सुविधाओं और कस्टमाइज़ेशन सुविधाओं का इस्तेमाल किया जा सकता है.
यहां पर 20 सबसे रोमांचक और असरदार सुविधाएं दी गई हैं, जो हाल ही में लॉन्च हुई हैं या जल्द ही लॉन्च होने वाली हैं:
- कंटेनर क्वेरी
- स्टाइल से जुड़ी क्वेरी
:has()सिलेक्टर- माइक्रोसिंटैक्स का nवां
text-wrap: balanceinitial-letter- डाइनैमिक व्यूपोर्ट यूनिट
- वाइड-गामट कलर स्पेस
color-mix()- नेस्ट करना
- कैस्केड लेयर
- स्कोप वाली स्टाइल
- ट्रिगनोमेट्रिक फ़ंक्शन
- अलग-अलग ट्रांसफ़ॉर्म प्रॉपर्टी
- पॉपओवर
- ऐंकर की पोज़िशन
- selectमेन्यू
- अलग-अलग प्रॉपर्टी का ट्रांज़िशन
- स्क्रोल करके चलने वाले ऐनिमेशन
- ट्रांज़िशन देखना
नया रिस्पॉन्सिव
चलिए, रिस्पॉन्सिव डिज़ाइन से जुड़ी कुछ नई सुविधाओं के साथ शुरुआत करते हैं. प्लैटफ़ॉर्म की नई सुविधाओं की मदद से, लॉजिकल इंटरफ़ेस बनाने के साथ-साथ उन कॉम्पोनेंट के साथ काम किया जा सकता है जिनके पास रिस्पॉन्सिव स्टाइल की जानकारी होती है. इसके अलावा, ऐसे इंटरफ़ेस बनाए जा सकते हैं जो सिस्टम की क्षमताओं का इस्तेमाल करके, ज़्यादा नेटिव अनुभव वाले यूआई उपलब्ध कराते हैं. साथ ही, उपयोगकर्ता को उपयोगकर्ता की पसंद की क्वेरी के साथ डिज़ाइन प्रोसेस में शामिल करने देते हैं, ताकि उपयोगकर्ता अपनी पसंद के मुताबिक क्वेरी कर सकें.
कंटेनर क्वेरी
कंटेनर क्वेरी हाल ही में सभी मॉडर्न ब्राउज़र पर स्थिर हो गई हैं. इनकी मदद से, पैरंट एलिमेंट के साइज़ और स्टाइल के बारे में क्वेरी की जा सकती है. इससे यह तय किया जा सकता है कि उसके किसी भी चाइल्ड एलिमेंट पर कौनसी स्टाइल लागू की जानी चाहिए. मीडिया क्वेरी सिर्फ़ व्यूपोर्ट की जानकारी को ऐक्सेस कर सकती हैं और उसका फ़ायदा ले सकती हैं. इसका मतलब है कि वे सिर्फ़ पेज लेआउट के मैक्रो व्यू पर ही काम कर सकती हैं. वहीं दूसरी ओर, कंटेनर क्वेरी ज़्यादा सटीक टूल हैं, जो लेआउट के अंदर किसी भी लेआउट या लेआउट के साथ काम कर सकते हैं.
इनबॉक्स के नीचे दिए गए उदाहरण में, मुख्य इनबॉक्स और पसंदीदा साइडबार, दोनों कंटेनर हैं. उनमें मौजूद ईमेल अपने ग्रिड लेआउट में बदलाव करते हैं और उपलब्ध जगह के हिसाब से ईमेल टाइमस्टैंप दिखाते या छिपाते हैं. यह पेज में ठीक यही कॉम्पोनेंट है, जो बस अलग-अलग व्यू में दिख रहा है
हमारे पास कंटेनर क्वेरी है, इसलिए इन कॉम्पोनेंट की स्टाइल डाइनैमिक होती हैं. अगर पेज के साइज़ और लेआउट में बदलाव किया जाता है, तो कॉम्पोनेंट अलग-अलग असाइन किए गए स्पेस के हिसाब से काम करते हैं. साइडबार, ज़्यादा जगह वाला सबसे ऊपर मौजूद बार बन जाता है. साथ ही, हमें दिखने वाला लेआउट, मुख्य इनबॉक्स की तरह दिखता है. कम जगह होने पर, दोनों फ़ॉर्मैट छोटे किए गए फ़ॉर्मैट में दिखाए जाते हैं.
इस पोस्ट में कंटेनर की क्वेरी और लॉजिकल कॉम्पोनेंट बनाने के बारे में ज़्यादा जानें.
शैली क्वेरी
कंटेनर क्वेरी स्पेसिफ़िकेशन की मदद से, पैरंट कंटेनर की स्टाइल वैल्यू के लिए क्वेरी भी की जा सकती है. फ़िलहाल, यह सुविधा 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() के बारे में पूरी जानकारी पाने के लिए यह ब्लॉग पोस्ट देखें.
सिंटैक्स का वां
ब्राउज़र सहायता
- 111
- 111
- 113
- 9
वेब प्लैटफ़ॉर्म पर अब बच्चों को चुनने के लिए, ज़्यादा बेहतर सुविधाएं उपलब्ध हैं. ऐडवांस्ड nth-चाइल्ड सिंटैक्स एक नया कीवर्ड ("of") देता है, जिससे आपको खोजने के लिए ज़्यादा खास सबसेट के साथ, An+B के मौजूदा माइक्रो सिंटैक्स का इस्तेमाल करने की सुविधा मिलती है.
अगर खास क्लास पर सामान्य nth-चाइल्ड (जैसे कि :nth-child(2)) का इस्तेमाल किया जाता है, तो ब्राउज़र उस एलिमेंट को चुनेगा जिस पर क्लास खास लागू की गई है. साथ ही, यह दूसरा चाइल्ड एलिमेंट भी होगा. यह :nth-child(2 of .special) से उलट है, जो सबसे पहले सभी .special एलिमेंट को पहले से फ़िल्टर कर देगा और फिर उस सूची से दूसरे एलिमेंट को चुनेगा.
सिंटैक्स के बारे में हमारे लेख में, इस सुविधा के बारे में ज़्यादा जानें.
text-wrap: balance
सिलेक्टर और स्टाइल क्वेरी के अलावा, अन्य जगहों पर भी लॉजिक को अपनी स्टाइल में जोड़ा जा सकता है. टाइपोग्राफ़ी भी अलग है. Chrome 114 से, हेडिंग के लिए टेक्स्ट-रैप बैलेंसिंग का इस्तेमाल किया जा सकता है. इसके लिए, वैल्यू balance वाली text-wrap प्रॉपर्टी का इस्तेमाल किया जाता है.
टेक्स्ट को संतुलित करने के लिए, ब्राउज़र सबसे कम चौड़ाई के लिए बाइनरी खोज को असरदार तरीके से करता है. इससे कोई अतिरिक्त लाइन नहीं, एक सीएसएस पिक्सल (न कि डिसप्ले पिक्सल) पर रुक जाती है. बाइनरी खोज के चरणों को और कम करने के लिए, ब्राउज़र, लाइन की औसत चौड़ाई के 80% हिस्से से शुरू होता है.
इसके बारे में ज़्यादा जानने के लिए, यह लेख पढ़ें.
initial-letter
वेब टाइपोग्राफ़ी में एक और बेहतर सुधार है initial-letter. यह सीएसएस प्रॉपर्टी, आपको इनसेट ड्रॉप कैप स्टाइल के लिए बेहतर कंट्रोल देती है.
यह बताने के लिए कि अक्षर का साइज़, कितनी लाइनों में है, उसके हिसाब से :first-letter के स्यूडो एलिमेंट पर initial-letter का इस्तेमाल किया जाता है.
जहां पत्र को लिखा जाएगा वहां का ब्लॉक-ऑफ़सेट या “सिंक”.
intial-letter का इस्तेमाल करने के बारे में यहां ज़्यादा जानें.
डाइनैमिक व्यूपोर्ट यूनिट
ब्राउज़र सहायता
- 108
- 108
- 101
- 15.4
आज-कल वेब डेवलपर के सामने एक आम समस्या यह है कि वह सटीक और पूरे व्यूपोर्ट का आकार एक जैसा होता है, खास तौर से मोबाइल डिवाइस पर. डेवलपर के तौर पर, आपको 100vh (व्यूपोर्ट की ऊंचाई का 100%) का मतलब “व्यूपोर्ट के बराबर ऊंचाई” रखना है, लेकिन vh यूनिट, मोबाइल पर नेविगेशन बार को वापस लेने जैसी चीज़ों के लिए ज़िम्मेदार नहीं है. इसलिए, कभी-कभी यह बहुत लंबा हो जाता है और स्क्रोल की वजह से स्क्रोल करता है.
इस समस्या को हल करने के लिए, अब वेब प्लैटफ़ॉर्म पर यूनिट की नई वैल्यू दी गई हैं. इनमें ये वैल्यू शामिल हैं:
- व्यूपोर्ट की कम ऊंचाई और चौड़ाई (या svh और svw), जो व्यूपोर्ट का सबसे छोटा साइज़ दिखाती हैं.
- व्यूपोर्ट की ऊंचाई और चौड़ाई (lvh और lvw), जो सबसे बड़े साइज़ को दिखाती हैं.
- डाइनैमिक व्यूपोर्ट की ऊंचाई और चौड़ाई (dvh और dvw).
जब अतिरिक्त डाइनैमिक ब्राउज़र टूलबार, जैसे कि सबसे ऊपर मौजूद पता या टैब बार, सबसे नीचे दिखता है, तो डाइनैमिक व्यूपोर्ट यूनिट की वैल्यू बदल जाती है. ऐसा तब भी होता है, जब वे नहीं दिखते.
इन नई यूनिट के बारे में ज़्यादा जानकारी के लिए, बड़ी, छोटी, और डाइनैमिक व्यूपोर्ट यूनिट पढ़ें.
वाइड-गैमट कलर स्पेस
वेब प्लैटफ़ॉर्म में एक और नई चीज़ जोड़ी गई है, जिसमें कई तरह के कलर स्पेस दिए गए हैं. वेब प्लैटफ़ॉर्म पर वाइड-गामट रंग उपलब्ध होने से पहले, चटख रंगों वाली फ़ोटो खींची जा सकती थी और इसे आधुनिक डिवाइसों पर देखा जा सकता था. हालांकि, आपको ऐसा कोई बटन, टेक्स्ट का रंग या बैकग्राउंड नहीं मिला जिसकी मदद से उन शानदार वैल्यू को मैच किया जा सके.
इसे खुद आज़माएं
हालांकि, अब वेब प्लैटफ़ॉर्म पर हमने कई नए कलर स्पेस बनाए हैं, जिनमें REC2020, P3, XYZ, LAB, OKLAB, LCH, और OKLCH शामिल हैं. एचडी कलर गाइड में वेब के नए कलर स्पेस वगैरह के बारे में जानें.
DevTools में आपको तुरंत यह भी पता चल सकता है कि रंग की रेंज कैसे पूरी हुई है. साथ ही, सफ़ेद रंग की लाइन से यह पता चलता है कि एसआरजीबी रेंज कहां खत्म होती है और वाइड-गैमट रंग की रेंज कहां से शुरू होती है.
रंगों के लिए और भी टूल उपलब्ध हैं! ग्रेडिएंट में हुए सभी बड़े सुधारों को भी हाथ से न जाने दें. एक नया वेब कलर पिकर और ग्रेडिएंट बिल्डर इस्तेमाल करने में आपकी मदद करने के लिए एक नया टूल, एडम आर्गील भी तैयार किया गया है. इसे gradient.style पर आज़माएं.
कलर-मिक्स()
बड़े किए गए कलर स्पेस पर बड़ा किया जा रहा है, color-mix() फ़ंक्शन. यह फ़ंक्शन, रंगों की दो वैल्यू को मिलाकर नई वैल्यू बनाता है. ये वैल्यू, कलर के मिले-जुले चैनलों के आधार पर जनरेट होती हैं. जिस कलर स्पेस को मिक्स किया जाता है उसका असर नतीजों पर पड़ता है. oklch जैसे बेहतर कलर स्पेस में काम करने पर, एसआरजीबी जैसी कलर रेंज और कलर रेंज अलग होती है.
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() playground को आज़माएं.
सीएसएस फ़ाउंडेशन
ऐसी नई क्षमताएं बनाना जिसमें उपयोगकर्ताओं को साफ़ तौर पर जीत मिल सके, लेकिन Chrome में आने वाली कई सुविधाओं का लक्ष्य डेवलपर के अनुभव को बेहतर बनाना और ज़्यादा भरोसेमंद और व्यवस्थित सीएसएस आर्किटेक्चर बनाना होता है. इन सुविधाओं में सीएसएस नेस्टिंग, कैस्केड लेयर, स्कोप वाली स्टाइल, त्रिकोणमितीय फ़ंक्शन, और अलग-अलग ट्रांसफ़ॉर्म प्रॉपर्टी शामिल हैं.
नेस्ट करना
सीएसएस नेस्टिंग, Sass से पसंद की जाने वाली चीज़ और सालों से सबसे ज़्यादा अनुरोध करने वाले सीएसएस डेवलपर में से एक, आखिरकार वेब प्लैटफ़ॉर्म पर आ गया है. नेस्टिंग की सहायता से डेवलपर ज़्यादा संक्षिप्त, समूहीकृत प्रारूप में लिख सकते हैं, जो अतिरिक्तता को कम करता है.
.card {}
.card:hover {}
/* can be done with nesting like */
.card {
&:hover {
}
}
मीडिया क्वेरी को भी नेस्ट किया जा सकता है. इसका मतलब यह भी है कि कंटेनर क्वेरी को भी नेस्ट किया जा सकता है. यहां दिए गए उदाहरण में, अगर कार्ड के कंटेनर में ज़रूरत के मुताबिक चौड़ाई है, तो कार्ड को पोर्ट्रेट लेआउट से लैंडस्केप लेआउट में बदल दिया जाता है:
.card {
display: grid;
gap: 1rem;
@container (width >= 480px) {
display: flex;
}
}
flex का लेआउट अडजस्टमेंट तब होता है, जब कंटेनर में 480px इनलाइन जगह ज़्यादा या इसके बराबर होती है. शर्तें पूरी होने पर, ब्राउज़र नई डिसप्ले स्टाइल को लागू करेगा.
ज़्यादा जानकारी और उदाहरणों के लिए, सीएसएस नेस्टिंग के बारे में हमारी पोस्ट देखें.
लेयर कैस्केड करें
डेवलपर की तरफ़ से हमने एक और समस्या का पता लगाया है. इसका मतलब है कि स्टाइल में एक जैसा तरीका अपनाया गया है और यह पक्का किया जाता है कि दूसरी स्टाइल में, अन्य स्टाइल का ज़्यादा से ज़्यादा फ़ायदा हो. साथ ही, इस समस्या को हल करने का एक तरीका यह है कि सीएसएस कैस्केड पर बेहतर कंट्रोल रखा जाए.
कैस्केड लेयर का इस्तेमाल करके, उपयोगकर्ताओं को यह कंट्रोल दिया जा सकता है कि कौनसी लेयर को अन्य लेयर की तुलना में ज़्यादा प्राथमिकता दी जाए. इसका मतलब है कि आपकी स्टाइल को कब लागू किया जाए, इसे बेहतर तरीके से कंट्रोल किया जा सकता है.
इस लेख में कैस्केड लेयर इस्तेमाल करने के तरीके के बारे में ज़्यादा जानें.
स्कोप वाला सीएसएस
ब्राउज़र सहायता
- 118
- 118
- x
- 78 जीबी में से
सीएसएस के स्कोप वाली स्टाइल की मदद से, डेवलपर यह तय कर सकते हैं कि किन स्टाइल के लिए खास स्टाइल लागू की जा सकती हैं. इसका मतलब है कि सीएसएस में नेटिव नेमस्पेसिंग ज़रूरी है. पहले, डेवलपर क्लास के नाम बदलने के लिए तीसरे पक्ष की स्क्रिप्टिंग का इस्तेमाल करते थे. इसके अलावा, स्टाइल को एक जैसा रखने के लिए, नाम रखने के खास तरीकों का भी इस्तेमाल किया जाता था. हालांकि, जल्द ही आपको @scope का इस्तेमाल करने का विकल्प मिल जाएगा.
यहां हम .title एलिमेंट को .card में शामिल कर रहे हैं. यह उस टाइटल एलिमेंट को पेज पर मौजूद किसी भी अन्य .title एलिमेंट, जैसे कि ब्लॉग पोस्ट का टाइटल या अन्य हेडिंग से अलग होने से रोक देगा.
@scope (.card) {
.title {
font-weight: bold;
}
}
इस लाइव डेमो में, @layer के साथ @scope की रेंज देखी जा सकती है:
css-cascade-6 स्पेसिफ़िकेशन में, @scope के बारे में ज़्यादा जानें.
त्रिकोणमितीय फ़ंक्शन
सीएसएस के नए गणित के फ़ंक्शन में त्रिकोणमितीय फ़ंक्शन जोड़े गए हैं. ये फ़ंक्शन अब सभी मॉडर्न ब्राउज़र में एक जैसे हैं. इनकी मदद से, वेब प्लैटफ़ॉर्म पर ज़्यादा ऑर्गैनिक लेआउट बनाए जा सकते हैं. इसका एक बेहतरीन उदाहरण यह रेडियल मेन्यू लेआउट है. इसे अब sin() और cos() फ़ंक्शन का इस्तेमाल करके डिज़ाइन और ऐनिमेट किया जा सकता है.
नीचे दिए गए डेमो में, ये बिंदु एक जगह के आस-पास घूमते हैं. हर बिंदु को उसके अपने केंद्र के चारों ओर घुमाने और फिर उसे बाहर की ओर ले जाने के बजाय, हर बिंदु को X और Y ऐक्सिस पर बदल दिया जाता है. X और Y ऐक्सिस पर दूरी तय करने के लिए, --angle के sin() और cos() का इस्तेमाल किया जाता है.
इस विषय के बारे में ज़्यादा जानकारी पाने के लिए, ट्रिगनोमेट्रिक फ़ंक्शन के बारे में हमारा लेख पढ़ें.
अलग-अलग ट्रांसफ़ॉर्म प्रॉपर्टी
व्यक्तिगत रूपांतरण फ़ंक्शन के साथ डेवलपर अर्गोनॉमिक्स बेहतर होते जा रहे हैं. पिछली बार जब हमने 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 कम्यूनिटी ग्रुप के साथ काम कर रहे हैं. हमने इन तीन समाधानों की पहचान की है, ताकि इनका इस्तेमाल किया जा सके:
- इवेंट हैंडलर, डिक्लेरेटिव डीओएम स्ट्रक्चर, और ऐक्सेस किए जा सकने वाले डिफ़ॉल्ट के साथ, पॉप-अप की पहले से मौजूद सुविधा.
- ऐंकर पोज़िशनिंग की सुविधा चालू करने के लिए, दो एलिमेंट को एक-दूसरे से टेदर करने वाला CSS 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 एलिमेंट किसी अन्य तरह के एलिमेंट को ज़बरदस्ती बंद नहीं करते. साथ ही, उन पर तुरंत फ़ोकस नहीं किया जाता और न ही इन्हें खारिज किया जाता है. वे टॉगल या किसी दूसरी कार्रवाई के ज़रिए बंद हो जाते हैं.
पॉपओवर से जुड़े सबसे अप-टू-डेट दस्तावेज़ फ़िलहाल एमडीएन पर देखे जा सकते हैं.
ऐंकर पोज़िशनिंग
पॉपओवर का इस्तेमाल डायलॉग और टूलटिप जैसे एलिमेंट में भी अक्सर किया जाता है. इन्हें आम तौर पर कुछ खास एलिमेंट के साथ ऐंकर किया जाना चाहिए. इस इवेंट का उदाहरण लें. जब आप किसी कैलेंडर इवेंट पर क्लिक करते हैं, तो उस इवेंट के पास एक डायलॉग दिखता है जिस पर आपने क्लिक किया है. कैलेंडर आइटम ऐंकर है और पॉपओवर वह डायलॉग है जो इवेंट की जानकारी दिखाता है.
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>
पॉपओवर और ऐंकर पोज़िशनिंग, दोनों की मदद से पूरी तरह से पसंद के मुताबिक चुने जा सकने वाले मेन्यू बनाए जा सकते हैं. 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 में कुछ शानदार एपीआई भी मौजूद हैं.
स्क्रोल करके चलने वाले ऐनिमेशन
स्क्रोल करके चलने वाले ऐनिमेशन की मदद से, स्क्रोल कंटेनर की स्क्रोल करने की जगह के आधार पर ऐनिमेशन का प्लेबैक कंट्रोल किया जा सकता है. इसका मतलब है कि ऊपर या नीचे स्क्रोल करने पर, ऐनिमेशन आगे या पीछे की ओर स्क्रब हो जाता है. इसके अलावा, स्क्रोल करके चलने वाले ऐनिमेशन की मदद से, स्क्रोल कंटेनर में किसी एलिमेंट की जगह की जानकारी के आधार पर ऐनिमेशन को भी कंट्रोल किया जा सकता है. इसकी मदद से, पैरलैक्स बैकग्राउंड इमेज, स्क्रोल प्रोग्रेस बार, और इमेज जैसे दिलचस्प इफ़ेक्ट बनाए जा सकते हैं. ये इफ़ेक्ट, स्क्रीन पर आते ही दिखते हैं.
यह एपीआई, JavaScript क्लास और सीएसएस प्रॉपर्टी के एक सेट के साथ काम करता है. इसकी मदद से, डिक्लेरेटिव स्क्रोल-ड्रिवन ऐनिमेशन आसानी से बनाए जा सकते हैं.
स्क्रोल करके सीएसएस ऐनिमेशन चलाने के लिए, नई scroll-timeline, view-timeline, और animation-timeline प्रॉपर्टी का इस्तेमाल करें.
कोई JavaScript Web Animations API चलाने के लिए, Element.animate() के लिए timeline विकल्प के तौर पर ScrollTimeline या ViewTimeline इंस्टेंस पास करें
ये नए एपीआई, मौजूदा वेब ऐनिमेशन और सीएसएस ऐनिमेशन एपीआई के साथ काम करते हैं. इसका मतलब है कि उन्हें इन एपीआई के फ़ायदों का फ़ायदा मिलता है. इसमें मुख्य थ्रेड से इन ऐनिमेशन को चलाने की सुविधा भी शामिल है. हां, इसे सही तरीके से पढ़ें: अब आपको बस कुछ लाइनों की अतिरिक्त कोड की मदद से, स्क्रोल करके, मुख्य थ्रेड को छोड़कर, बिना किसी रुकावट के बेहतरीन ऐनिमेशन मिल सकते हैं. क्या पसंद नहीं करना चाहिए?!
स्क्रोल करके चलने वाले ऐनिमेशन को बनाने के तरीके के बारे में ज़्यादा जानकारी पाने के लिए, कृपया स्क्रोल करके चलने वाले ऐनिमेशन के बारे में यह लेख पढ़ें.
ट्रांज़िशन देखें
व्यू ट्रांज़िशन एपीआई, दोनों स्थितियों के बीच ऐनिमेशन वाला ट्रांज़िशन बनाते समय, एक ही चरण में डीओएम को बदलना आसान बनाता है. ये व्यू के बीच आसानी से फ़ेड हो सकते हैं, लेकिन यह भी कंट्रोल किया जा सकता है कि पेज के अलग-अलग हिस्सों का ट्रांज़िशन कैसे होना चाहिए.
व्यू ट्रांज़िशन का इस्तेमाल प्रोग्रेसिव एन्हैंसमेंट के तौर पर किया जा सकता है: डीओएम को किसी भी तरीके से अपडेट करने वाला कोड लें और उसे व्यू ट्रांज़िशन एपीआई में रैप करें. यह ऐसे ब्राउज़र के लिए फ़ॉलबैक के साथ होता है जो इस सुविधा का इस्तेमाल नहीं करते.
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 वीडियो देखें.