अगली-पीढ़ी की वेब स्टाइलिंग

आधुनिक सीएसएस की कुछ शानदार सुविधाओं के बारे में अप-टू-डेट रहें.

Adam Argyle

Una Kravets

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

इस पोस्ट में उन सुविधाओं के बारे में बताया गया है जिन्हें आज-कल इस्तेमाल किया जा सकता है, इसलिए, अपनी बातचीत को का इस्तेमाल, आने वाले समय में होने वाली सुविधाओं के बारे में गहराई से जानने के लिए किया है. आपको उन सभी सुविधाओं के डेमो भी दिख सकते हैं जिनकी हमने यहां पर चर्चा की है CSS@CDS पेज.

कॉन्टेंट

• Snap को स्क्रोल करें
• :focus-within
• मीडिया क्वेरी लेवल 5
• लॉजिकल प्रॉपर्टी
• position: sticky
• backdrop-filter
• :is()
• gap
• सीएसएस हुडीनी
• ओवरफ़्लो

Snap को स्क्रोल करें

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

यह सैंपल कोड, <section> एलिमेंट में हॉरिज़ॉन्टल स्क्रोलिंग सेट अप करता है. इसमें स्नैप पॉइंट, चाइल्ड <picture> एलिमेंट की बाईं ओर अलाइन होते हैं:

section {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
}

section > picture {
  scroll-snap-align: start;
}

यह इस तरह से काम करता है:

• पैरंट <section> एलिमेंट पर,
  • हॉरिज़ॉन्टल स्क्रोलिंग की अनुमति देने के लिए, overflow-x को auto पर सेट किया गया है.
  • overscroll-behavior-x को contain पर सेट किया गया है, ताकि जब उपयोगकर्ता <section> एलिमेंट के स्क्रोल एरिया की सीमाओं तक पहुंच जाए, तब पैरंट एलिमेंट को स्क्रोल करने से रोका जा सके. (स्नैप करने के लिए यह पूरी तरह से ज़रूरी नहीं है, लेकिन आम तौर पर यह एक अच्छा आइडिया है.)
  • हॉरिज़ॉन्टल रूप से स्नैप करने के लिए scroll-snap-type को x पर और mandatory पर सेट किया गया है, ताकि व्यूपोर्ट हमेशा सबसे नज़दीकी स्नैप पॉइंट पर स्नैप हो जाए.
• चाइल्ड <picture> एलिमेंट पर, scroll-snap-align को शुरू होने के लिए सेट किया गया है. इससे हर तस्वीर की बाईं ओर स्नैप पॉइंट सेट हो जाते हैं (यह मानते हुए कि direction को ltr पर सेट किया गया है).

और यह रहा एक लाइव डेमो:

वर्टिकल स्क्रोल स्नैप और मैट्रिक्स स्क्रोल स्नैप के डेमो भी देखे जा सकते हैं.

ध्यान दें: स्क्रोल स्नैप करने की सुविधा, वर्टिकल स्नैप करने की सुविधा देती है. हालांकि, पेज लेवल पर इसका इस्तेमाल करते समय सावधानी बरतें. ऐसा इसलिए, क्योंकि कुछ मामलों में ऐसा लग सकता है कि कंट्रोल, उपयोगकर्ता से लिया जा रहा है. आम तौर पर, पेज के बजाय उसके किसी कॉम्पोनेंट पर स्नैप करना सबसे अच्छा होता है.

:focus-within

:focus-within लंबे समय से चली आ रही सुलभता की समस्या को हल करता है: कई मामलों में ऐसे कई मामले हैं जिनमें किसी चाइल्ड एलिमेंट पर फ़ोकस करने से, पैरंट एलिमेंट के प्रज़ेंटेशन पर असर पड़ सकता है, ताकि उपयोगकर्ता, सहायक टेक्नोलॉजी के यूज़र इंटरफ़ेस (यूआई) को ऐक्सेस कर सकें.

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

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

.menu:focus-within {
  display: block;
  opacity: 1;
  visibility: visible;
}

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

मीडिया क्वेरी लेवल 5

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

यहां कुछ नई क्वेरी दी गई हैं, जिनके बारे में हमें लगता है कि डेवलपर सबसे ज़्यादा उत्साहित होंगे:

• प्रेरणा देने वाले वीडियो बनाना
• पसंद के हिसाब से रंग योजना
• कंट्रास्ट को प्राथमिकता देता है
• prefers-reduced-transparency
• ज़बरदस्ती रंग
• बदले हुए रंग

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

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

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

ध्यान दें: Chrome कैनरी में, DevTools रेंडरिंग पैनल में सही सेटिंग चुनकर, prefers-reduced-motion या prefers-color-scheme का इस्तेमाल करने वाली सीएसएस की जांच की जा सकती है. रेंडरिंग को ऐक्सेस करने के लिए, कमांड मेन्यू खोलें और Show Rendering निर्देश चलाएं.

लॉजिकल प्रॉपर्टी

लॉजिकल प्रॉपर्टी की मदद से, उस समस्या को हल किया जा सकता है जो अंतरराष्ट्रीय स्तर पर काम करता है. इसकी वजह यह है कि ज़्यादा से ज़्यादा डेवलपर इस समस्या को हल कर रहे हैं. margin और padding जैसी कई लेआउट प्रॉपर्टी, एक भाषा के तौर पर सेट होती हैं. इस भाषा को ऊपर से नीचे और बाईं से दाईं ओर के हिसाब से पढ़ा जाता है.

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

लॉजिकल प्रॉपर्टी की मदद से, अनुवाद और लिखने के मोड में लेआउट को पूरी तरह सुरक्षित रखा जा सकता है. वे कॉन्टेंट के क्रम के हिसाब से डाइनैमिक तौर पर अपडेट होते हैं, न कि जगह के हिसाब से. लॉजिकल प्रॉपर्टी में, हर एलिमेंट में दो डाइमेंशन होते हैं:

• ब्लॉक डाइमेंशन, किसी लाइन में टेक्स्ट के फ़्लो के लंबवत होता है. (अंग्रेज़ी में, block-size और height एक जैसे हैं.)
• इनलाइन डाइमेंशन, किसी लाइन में मौजूद टेक्स्ट के फ़्लो के पैरलल होता है. (अंग्रेज़ी में, inline-size और width एक जैसे हैं.)

ये डाइमेंशन नाम, सभी लॉजिकल लेआउट प्रॉपर्टी पर लागू होते हैं. उदाहरण के लिए, अंग्रेज़ी में block-start, top और inline-end, right के बराबर है.

लॉजिकल प्रॉपर्टी की मदद से, अपने पेज के लिए writing-mode और direction प्रॉपर्टी को बदलकर, अलग-अलग एलिमेंट के लिए दर्जनों लेआउट प्रॉपर्टी अपडेट करने के बजाय, अपने लेआउट को अन्य भाषाओं के लिए अपने-आप अपडेट किया जा सकता है.

नीचे दिए गए डेमो में, <body> एलिमेंट पर writing-mode प्रॉपर्टी को अलग-अलग वैल्यू पर सेट करके देखा जा सकता है कि लॉजिकल प्रॉपर्टी कैसे काम करती हैं:

position: sticky

position: sticky वाला एलिमेंट तब तक ब्लॉक फ़्लो में रहता है, जब तक वह ऑफ़स्क्रीन नहीं होता, ऐसा करने से, पेज के बाकी हिस्से के साथ स्क्रोल करना बंद हो जाता है और एलिमेंट के top वैल्यू की तय पोज़िशन पर बना रहता है. उस एलिमेंट के लिए तय की गई जगह, फ़्लो में बनी रहती है, और जब उपयोगकर्ता ऊपर की ओर स्क्रोल करता है, तब एलिमेंट उस पर वापस आ जाता है.

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

स्टिकी स्टैक

इस डेमो में, सभी स्टिकी एलिमेंट एक ही कंटेनर का इस्तेमाल करते हैं. इसका मतलब है कि जैसे ही उपयोगकर्ता नीचे की ओर स्क्रोल करता है, हर स्टिकी एलिमेंट पिछले एलिमेंट पर स्लाइड होता है. स्टिकी एलिमेंट एक ही जगह पर अटक जाते हैं.

स्टिकी स्लाइड

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

स्टिकी डिस्परेडो

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

backdrop-filter

backdrop-filter प्रॉपर्टी की मदद से, एलिमेंट के बजाय एलिमेंट के पीछे वाले हिस्से में ग्राफ़िक इफ़ेक्ट इस्तेमाल किए जा सकते हैं. इसकी वजह से कई अच्छे इफ़ेक्ट बन जाते हैं, जिन्हें पहले सिर्फ़ मुश्किल सीएसएस और JavaScript हैकिंग का इस्तेमाल करके हासिल किया जा सकता था. इन इफ़ेक्ट को सीएसएस की एक लाइन से ही इस्तेमाल किया जा सकता था.

उदाहरण के लिए, यह डेमो ओएस की स्टाइल में धुंधला करने के लिए backdrop-filter का इस्तेमाल करता है:

हमारे पास पहले से ही backdrop-filter के बारे में एक बढ़िया पोस्ट है, इसलिए ज़्यादा जानकारी के लिए वहां जाएं.

:is()

हालांकि, :is() pseudo-class 10 साल से ज़्यादा पुराना है, लेकिन अब भी इसका उतना इस्तेमाल नहीं हुआ जितना हमें लगता है कि इसकी ज़रूरत है. यह सिलेक्टर की कॉमा-सेपरेटेड लिस्ट को अपने आर्ग्युमेंट के तौर पर इस्तेमाल करता है और उस सूची में मौजूद किसी भी सिलेक्टर से मैच करता है. इस सुविधा की मदद से, यह बहुत आसान हो जाता है और सीएसएस को भेजने में लगने वाला समय कम हो जाता है.

यहां एक उदाहरण दिया गया है:

button.focus,
button:focus {
  …
}

article > h1,
article > h2,
article > h3,
article > h4,
article > h5,
article > h6 {
  …
}

/* selects the same elements as the code above */
button:is(.focus, :focus) {
  …
}

article > :is(h1,h2,h3,h4,h5,h6) {
  …
}

gap

सीएसएस के ग्रिड लेआउट में कुछ समय से, gap (पहले grid-gap) था. चाइल्ड एलिमेंट के आस-पास स्पेस के बजाय, शामिल एलिमेंट के बीच स्पेस देकर gap, लेआउट से जुड़ी कई सामान्य समस्याओं को हल करता है. उदाहरण के लिए, गैप के साथ, आपको चाइल्ड एलिमेंट पर मार्जिन की चिंता नहीं करनी होगी. इसकी वजह से, शामिल एलिमेंट के किनारों के आस-पास अनचाहा खाली सफ़ेद जगह हो सकती है:

एक और अच्छी खबर: gap अब फ़्लेक्सबॉक्स में आ रहा है. इसमें वे सभी फ़ायदे मिलेंगे जो ग्रिड में मिलेंगे:

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

नीचे दिया गया वीडियो दो एलिमेंट के लिए एक ही gap प्रॉपर्टी इस्तेमाल करने के फ़ायदे बताता है, पहला ग्रिड लेआउट के साथ और दूसरा फ़्लेक्स लेआउट के साथ:

फ़िलहाल, सिर्फ़ FireFox के लिए फ़्लेक्स लेआउट वाले लेआउट में ही gap को इस्तेमाल किया जा सकता है. हालांकि, इस डेमो को आज़माकर देखें कि यह कैसे काम करता है:

सीएसएस हुडिनी

Houdini, ब्राउज़र के रेंडरिंग इंजन के लिए लो-लेवल एपीआई का एक सेट है. इसकी मदद से, ब्राउज़र को कस्टम सीएसएस को समझने का तरीका बताया जाता है. दूसरे शब्दों में, इससे आपको सीएसएस ऑब्जेक्ट मॉडल का ऐक्सेस मिलता है. इसकी मदद से, JavaScript की मदद से सीएसएस को बढ़ाया जा सकता है. इसके कई फ़ायदे हैं:

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

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

ओवरफ़्लो

हम कुछ और चीज़ों के बारे में चर्चा करना चाहते थे, लेकिन उनके बारे में ज़्यादा जानने का समय नहीं था. इसलिए, हमने उन चीज़ों को तेज़ी से समझा. ⚡ अगर आपने अभी तक इनमें से कुछ सुविधाओं के बारे में नहीं सुना है, तो बातचीत का आखिरी हिस्सा ज़रूर देखें!

• size: ऐसी प्रॉपर्टी जिसकी मदद से, एक ही समय पर ऊंचाई और चौड़ाई सेट की जा सकती है
• aspect-ratio: ऐसी प्रॉपर्टी जो उन एलिमेंट के लिए आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) सेट करती है जिनमें कोई एलिमेंट नहीं है
• min(), max(), और clamp(): ऐसे फ़ंक्शन जिनकी मदद से आप लंबाई और चौड़ाई के साथ-साथ, किसी भी सीएसएस प्रॉपर्टी पर न्यूमेरिक कंस्ट्रेंट सेट कर सकते है
• list-style-type किसी मौजूदा प्रॉपर्टी के लिए है. हालांकि, जल्द ही यह कई तरह की वैल्यू के साथ काम करेगी. इनमें इमोजी और SVG भी शामिल हैं
• display: outer inner: display प्रॉपर्टी जल्द ही दो पैरामीटर स्वीकार करेगी. इन पैरामीटर की मदद से, inline-flex जैसे कंपाउंड कीवर्ड का इस्तेमाल करने के बजाय, इसके आउटर और इनर लेआउट को साफ़ तौर पर तय किया जा सकेगा.
• सीएसएस क्षेत्र: इसकी मदद से आप एक खास, गैर-आयताकार क्षेत्र को भर सकते हैं, जहां से सामग्री अंदर और बाहर जा सकती है
• सीएसएस मॉड्यूल: JavaScript, सीएसएस मॉड्यूल का अनुरोध कर पाएगा. साथ ही, इससे एक रिच ऑब्जेक्ट वापस मिल जाएगा. इस ऑब्जेक्ट पर आसानी से कार्रवाइयां की जा सकेंगी