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

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

Adam Argyle

Una Kravets

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

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

विषय सूची

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

स्नैप स्क्रोल करें

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

यह सैंपल कोड, <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 पर सेट किया गया है.
  • जब उपयोगकर्ता <section> एलिमेंट के स्क्रोल करने की जगह की सीमाओं तक पहुंच जाता है, तब overscroll-behavior-x को contain पर सेट किया जाता है, ताकि किसी पैरंट एलिमेंट को स्क्रोल करने से रोका जा सके. (स्नैप करने के लिए यह पूरी तरह ज़रूरी नहीं है, लेकिन यह आम तौर पर अच्छा आइडिया है.)
  • हॉरिज़ॉन्टल स्नैपिंग के लिए 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-contrast का इस्तेमाल करके, ओएस से हाई कंट्रास्ट सेटिंग का पता लगाया जा सकता है.

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

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

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

लॉजिकल प्रॉपर्टी की मदद से वह समस्या हल हो जाती है जो पहले से ज़्यादा लोगों को दिख रही है. ऐसा इसलिए, क्योंकि ज़्यादातर डेवलपर अंतरराष्ट्रीय मानकों के मुताबिक तैयार होने की समस्या को हल कर रहे हैं. 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 प्रॉपर्टी की मदद से, एलिमेंट के बजाय एलिमेंट के पीछे मौजूद एरिया पर ग्राफ़िकल इफ़ेक्ट लागू किए जा सकते हैं. इससे ऐसे कई शानदार इफ़ेक्ट बन जाते हैं जिन्हें पहले सिर्फ़ CSS की एक ही लाइन से किए जा सकने वाले जटिल CSS और JavaScript हैक का इस्तेमाल करके ही हासिल किया जा सकता था.

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

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

:is()

हालांकि, :is() बदली हुई क्लास 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 में की जाने वाली सीएसएस पॉलीफ़िलिंग की तुलना में ज़्यादा बेहतर है. ऐसा इसलिए है, क्योंकि अब ब्राउज़र को स्क्रिप्ट पार्स करने और रेंडरिंग की एक और प्रोसेस पूरी करने की ज़रूरत नहीं पड़ेगी. हूडीनी कोड को पहले रेंडरिंग साइकल में पार्स किया जाता है.

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

ओवरफ़्लो

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

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