नया रिस्पॉन्सिव: कॉम्पोनेंट-आधारित दुनिया में वेब डिज़ाइन

रिस्पॉन्सिव वेब डिज़ाइन के नए दौर में, मैक्रो और माइक्रो लेआउट को कंट्रोल करना.

Una Kravets

आज ही रिस्पॉन्सिव डिज़ाइन का इस्तेमाल करें

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

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

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

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

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

ऐसा हर 10 साल में होता है. दस साल पहले, यानी कि 2010 से 2012 के बीच, हमने मोबाइल और रिस्पॉन्सिव डिज़ाइन में एक बड़ा बदलाव देखा था. साथ ही, CSS3 का इस्तेमाल शुरू हुआ था.

इसलिए, एक बार फिर सीएसएस में कुछ बड़े बदलाव होने वाले हैं. Chrome और वेब प्लैटफ़ॉर्म के इंजीनियर, रिस्पॉन्सिव डिज़ाइन के अगले वर्शन के लिए प्रोटोटाइप बना रहे हैं, स्पेसिफ़िकेशन तय कर रहे हैं, और उसे लागू करने की प्रोसेस शुरू कर रहे हैं.

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

उपयोगकर्ता के हिसाब से काम करना

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

उपयोगकर्ता की पसंद के हिसाब से मीडिया की इन सुविधाओं में ये शामिल हैं:

• prefers-reduced-motion
• prefers-contrast
• prefers-reduced-transparency
• prefers-color-scheme
• inverted-colors
• अन्य चैनल या इन्वेंट्री

प्राथमिकता से जुड़ी सुविधाएं, उपयोगकर्ता के ऑपरेटिंग सिस्टम में सेट की गई प्राथमिकताओं को पहचानती हैं. साथ ही, ये ज़्यादा बेहतर और मनमुताबिक वेब अनुभव बनाने में मदद करती हैं. खास तौर पर, उन लोगों के लिए जिन्हें ऐक्सेसिबिलिटी की ज़रूरत होती है.

prefers-reduced-motion

जिन उपयोगकर्ताओं ने ऑपरेटिंग सिस्टम की सेटिंग में मोशन कम करने की सुविधा चालू की है वे आम तौर पर कंप्यूटर का इस्तेमाल करते समय, कम ऐनिमेशन देखते हैं. इसलिए, ऐसा हो सकता है कि वेब का इस्तेमाल करते समय, उन्हें फ़्लैश वाली इंट्रो स्क्रीन, कार्ड फ़्लिप ऐनिमेशन, जटिल लोडर या अन्य फ़्लैश वाले ऐनिमेशन पसंद न आएं.

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

इस कार्ड में दोनों तरफ़ जानकारी दी गई है. मोशन कम करने की सुविधा के तहत, जानकारी दिखाने के लिए क्रॉसफ़ेड का इस्तेमाल किया जाता है. वहीं, मोशन बढ़ाने की सुविधा के तहत, कार्ड फ़्लिप का इस्तेमाल किया जाता है.

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

prefers-color-scheme

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

अगर आपने सीएसएस कस्टम प्रॉपर्टी का इस्तेमाल करके अपना पेज सेट अप किया है, तो रंग की वैल्यू बदलना आसान हो जाता है. मीडिया क्वेरी में नई थीम के हिसाब से डाइनैमिक तरीके से बदलाव करने के लिए, backgroundColor और textOnPrimary जैसे कलर थीम वैल्यू को तुरंत अपडेट किया जा सकता है.

इन प्राथमिकताओं से जुड़ी कुछ क्वेरी को आसानी से आज़माने के लिए, हर बार सिस्टम की सेटिंग खोलने के बजाय DevTools for emulation का इस्तेमाल किया जा सकता है.

गहरे रंग वाली थीम के लिए डिज़ाइन करना

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

किसी एलिमेंट को आगे की ओर दिखाने के लिए, डेप्थ बनाने के लिए शैडो का इस्तेमाल करने के बजाय, एलिमेंट के background-color में लाइट का इस्तेमाल किया जा सकता है. ऐसा इसलिए है, क्योंकि गहरे रंग के बैकग्राउंड पर शैडो उतनी असरदार नहीं दिखती हैं.

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

गहरे रंग वाली थीम पर साल 2018 में Android पर की गई एक स्टडी से पता चला कि स्क्रीन की रोशनी और यूज़र इंटरफ़ेस के आधार पर, बैटरी की खपत में 60% तक की बचत हो सकती है. 60% का यह आंकड़ा, YouTube की प्ले स्क्रीन की तुलना करके निकाला गया है. इसमें, ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) के लिए गहरे रंग वाली थीम का इस्तेमाल करके, 100% स्क्रीन की रोशनी पर रोके गए वीडियो की तुलना हल्के रंग वाली थीम से की गई है.

आपको हमेशा अपने उपयोगकर्ताओं को गहरे रंग वाली थीम का अनुभव देना चाहिए.

कंटेनर के हिसाब से काम करना

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

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

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

इस तरह की सुविधा सिर्फ़ मीडिया क्वेरी की मदद से नहीं दी जा सकती.

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

इसके लिए, @container ऐट-रूल की ज़रूरत होती है. यह @media के साथ मीडिया क्वेरी की तरह ही काम करता है. हालांकि, @container व्यूपोर्ट और उपयोगकर्ता एजेंट के बजाय, जानकारी के लिए पैरंट कंटेनर से क्वेरी करता है.

.card {
  container-type: inline-size;
}

@container (max-width: 850px) {
  .links {
    display: none;
  }

  .time {
    font-size: 1.25rem;
  }

  /* ... */
}

सबसे पहले, पैरंट एलिमेंट पर कंटेनमेंट सेट करें. इसके बाद, कंटेनर के साइज़ के आधार पर उसके किसी भी एलिमेंट को स्टाइल करने के लिए, @container क्वेरी लिखें. इसके लिए, min-width या max-width का इस्तेमाल करें.

ऊपर दिए गए कोड में max-width का इस्तेमाल किया गया है. साथ ही, लिंक को display:none पर सेट किया गया है. इसके अलावा, कंटेनर की चौड़ाई 850px से कम होने पर, फ़ॉन्ट का साइज़ कम किया गया है.

कंटेनर क्वेरी कार्ड

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

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

.product {
  container-type: inline-size;
}

@container (min-width: 350px) {
  .card-container {
    padding: 0.5rem 0 0;
    display: flex;
  }

  .card-container button {
    /* ... */
  }
}

ग्रिड में कम से कम 350px जगह होने पर, कार्ड लेआउट को display: flex पर सेट करके हॉरिज़ॉन्टल किया जाता है. इसमें डिफ़ॉल्ट फ़्लेक्स-डायरेक्शन "row" होता है.

जगह कम होने पर, प्रॉडक्ट कार्ड स्टैक हो जाते हैं. हर प्रॉडक्ट कार्ड का स्टाइल अलग होता है. सिर्फ़ ग्लोबल स्टाइल का इस्तेमाल करके ऐसा नहीं किया जा सकता.

कंटेनर क्वेरी के साथ मीडिया क्वेरी का इस्तेमाल करना

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

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

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

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

आज कंटेनर क्वेरी का इस्तेमाल करना

ये डेमो अब Chrome Canary में फ़्लैग के साथ उपलब्ध हैं. Canary में about://flags पर जाएं और #enable-container-queries फ़्लैग चालू करें. इससे contain प्रॉपर्टी के लिए, @container, inline-size, और block-size वैल्यू इस्तेमाल की जा सकेंगी. साथ ही, LayoutNG Grid को लागू किया जा सकेगा.

इस फ़्लैग से, Chrome DevTools की सुविधाएं भी चालू हो जाती हैं. DevTools में कंटेनर क्वेरी की जांच करने और उन्हें डीबग करने का तरीका जानें.

स्कोप की गई स्टाइल

कंटेनर क्वेरी को बेहतर बनाने के लिए, @scope के साथ स्कोप किए गए स्टाइल का इस्तेमाल करें, ताकि आपके सिलेक्टर की पहुंच सीमित हो.

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

/* @scope (<root>#) [to (<boundary>#)]? { … } */

@scope (.tabs) to (.panel) {
  :scope { /* targeting the scope root */ }
  .light-theme :scope .tab { /* contextual styles */ }
}

स्कोपिंग की मदद से, "डोनट के आकार वाले" सिलेक्टर बनाए जा सकते हैं. इनमें ज़्यादा से ज़्यादा और कम से कम सीमा तय की जा सकती है. @scope नियम में मौजूद सिलेक्टर, उन सीमाओं के बीच मैच हो जाते हैं.

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

डिवाइस के नाप या आकार के हिसाब से काम करता हो

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

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

स्क्रीन-स्पैनिंग के लिए, एक्सपेरिमेंट के तौर पर उपलब्ध मीडिया क्वेरी हमारी मदद कर सकती है. फ़िलहाल, यह इस तरह काम करता है: @media (spanning: <type of fold>). इस डेमो में, दो कॉलम वाला ग्रिड लेआउट सेट अप किया गया है: एक की चौड़ाई --sidebar-width है, जो डिफ़ॉल्ट रूप से 5rem होती है. वहीं, दूसरे की चौड़ाई 1fr होती है. जब लेआउट को दो स्क्रीन वाले ऐसे डिवाइस पर देखा जाता है जिसमें एक वर्टिकल फ़ोल्ड होता है, तो --sidebar-width की वैल्यू को बाएं फ़ोल्ड की एनवायरमेंट वैल्यू के साथ अपडेट किया जाता है.

:root {
  --sidebar-width: 5rem;
}

@media (spanning: single-fold-vertical) {
  --sidebar-width: env(fold-left);
}

main {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
}

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

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

नतीजा

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

यह नया रिस्पॉन्सिव है.

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

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

रिस्पॉन्सिव डिज़ाइन का नया दौर शुरू हो चुका है. इसे अभी से आज़माया जा सकता है.

web.dev/learnCSS

अगर आपको सीएसएस के बारे में ज़्यादा जानना है और कुछ बुनियादी बातों को फिर से समझना है, तो हमारी टीम web.dev पर सीएसएस का बिलकुल नया और पूरी तरह से मुफ़्त कोर्स और रेफ़रंस लॉन्च कर रही है. इसे web.dev/learnCSS पर जाकर ऐक्सेस किया जा सकता है.

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

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