पसंदीदा मीडिया क्वेरी की मदद से, लोगों के हिसाब से ऐसे इंटरफ़ेस बनाएं जो उनकी ज़रूरत के हिसाब से काम करते हों

1. शुरू करने से पहले

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

उपयोगकर्ता की प्राथमिकताएं

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

यहां उपयोगकर्ता की प्राथमिकताओं के कुछ उदाहरण दिए गए हैं, जिनका इस्तेमाल सीएसएस कर सकती है:

• डिवाइस के व्यूपोर्ट का साइज़
• डिवाइस ओरिएंटेशन (पोर्ट्रेट | लैंडस्केप)
• फ़ॉन्ट का साइज़
• ऑनलाइन / ऑफ़लाइन
• नेटवर्क की क्वालिटी
• कलर स्कीम (light | dark)
• इंटरफ़ेस ऐनिमेशन (चालू | कम)
• इनपुट की क्वालिटी (माउस | टच | स्टाइलस)
• दस्तावेज़ की दिशा और लिखने का मोड (बाएं से दाएं, ऊपर से नीचे वगैरह)
• डिसप्ले मोड (fullscreen | standalone | minimal UI | browser)

यहां उपयोगकर्ता की प्राथमिकताओं के कुछ उदाहरण दिए गए हैं. ये सुविधाएं जल्द ही सीएसएस के लिए उपलब्ध होंगी:

• कम डेटा / लाइट मोड
• कलर रेंज
• कंट्रास्ट (कम | ज़्यादा | घटाएं)
• रंग (इससे उपयोगकर्ता के चुने गए रंग, पेज पर लागू हो जाते हैं)
• Transparency (on | reduced)

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

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

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

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

ज़रूरी शर्तें

• एचटीएमएल और सीएसएस की जानकारी
• डेवलपर टूल के बारे में जानकारी, जैसे कि Google Chrome डेवलपर टूल

आपको क्या बनाने को मिलेगा

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

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

आपको क्या सीखने को मिलेगा

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

• हल्के और गहरे रंग वाली थीम बनाना
• ऐनिमेटेड और सुलभ फ़ॉर्म बनाना
• लेआउट रिस्पॉन्सिव फ़ॉर्म
• रिलेटिव यूनिट और लॉजिकल प्रॉपर्टी का इस्तेमाल करना

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

आपको इन चीज़ों की ज़रूरत होगी

• Google Chrome 89 और इसके बाद का वर्शन या आपका पसंदीदा ब्राउज़र

2. सेट अप करें

कोड पाएं

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

सुझाया गया: Codepen का इस्तेमाल करें

1. नया ब्राउज़र टैब खोलें.
2. https://codepen.io/argyleink/pen/abBMeeq पर जाएं.
3. अगर आपके पास कोई खाता नहीं है, तो काम सेव करने के लिए एक खाता बनाएं.
4. Fork पर क्लिक करें.

अन्य विकल्प: स्थानीय तौर पर काम करना

अगर आपको कोड डाउनलोड करके स्थानीय तौर पर काम करना है, तो आपके पास Node.js का 12 या इससे ऊपर का वर्शन होना चाहिए. साथ ही, कोड एडिटर सेट अप होना चाहिए.

Git का इस्तेमाल करना

1. https://github.com/argyleink/Google-IO-2021-Workshop_User-Adaptive-Interfaces पर जाएं
2. रिपॉज़िटरी को किसी फ़ोल्डर में क्लोन करें.
3. ध्यान दें कि डिफ़ॉल्ट ब्रांच beginning है.

फ़ाइलों का इस्तेमाल करना

सोर्स कोड डाउनलोड करें

1. डाउनलोड की गई ज़िप फ़ाइल को किसी फ़ोल्डर में अनपैक करें.

प्रोजेक्ट चलाना

ऊपर दिए गए किसी भी चरण में बनाई गई प्रोजेक्ट डायरेक्ट्री का इस्तेमाल करें. इसके बाद:

1. सर्वर चलाने के लिए ज़रूरी डिपेंडेंसी इंस्टॉल करने के लिए, npm install चलाएं.
2. पोर्ट 3000 पर सर्वर शुरू करने के लिए, npm start चलाएं.
3. नया ब्राउज़र टैब खोलें.
4. http://localhost:3000 पर जाएं.

एचटीएमएल के बारे में जानकारी

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

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

3. अडैप्टिव इंटरैक्शन

Git branch: beginning

इस सेक्शन के आखिर तक, आपका सेटिंग फ़ॉर्म इन बदलावों के हिसाब से बदल जाएगा:

• गेमपैड + कीबोर्ड
• माउस + टच
• स्क्रीन रीडर या मिलती-जुलती सहायक टेक्नोलॉजी

एचटीएमएल के लिए एट्रिब्यूट

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

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

ग्रुपिंग के लिए इनपुट

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

एलिमेंट का क्रम

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

कीबोर्ड से इंटरैक्ट करना

वेब का इस्तेमाल करने वाले लोग, टैब कुंजी की मदद से फ़ॉर्म भरने के आदी हो गए हैं. अच्छी बात यह है कि अगर आपने ज़रूरी एचटीएमएल एलिमेंट दिए हैं, तो ब्राउज़र इसका ध्यान रखता है. <button>, <input>, <h2>, और <label> जैसे एलिमेंट का इस्तेमाल करने पर, वे अपने-आप कीबोर्ड या स्क्रीन रीडर के डेस्टिनेशन बन जाते हैं.

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

style.css

input {
  outline-offset: 5px;
}

ये काम करके देखें

1. index.html में इस्तेमाल किए गए एचटीएमएल एलिमेंट की समीक्षा करें.
2. अपने ब्राउज़र में डेमो पेज पर क्लिक करें.
3. फ़ॉर्म में एलिमेंट पर फ़ोकस करने के लिए, tab और shift+tab कुंजियां दबाएं.
4. स्लाइडर और चेकबॉक्स की वैल्यू बदलने के लिए, कीबोर्ड का इस्तेमाल करें.
5. ब्लूटूथ गेमपैड कंट्रोलर कनेक्ट करें और फ़ॉर्म में मौजूद एलिमेंट पर फ़ोकस ले जाएं.

माउस से इंटरैक्शन

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

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

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

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

इस तरह के कनेक्शन से, स्क्रीन रीडर का इस्तेमाल करने वाले लोगों को भी बेहतर अनुभव मिलता है. इसके बारे में अगले सेक्शन में बताया गया है.

जुड़ा हुआ नहीं है: एलिमेंट को जोड़ने वाले कोई एट्रिब्यूट नहीं हैं

<input type="checkbox">
<label>...</label>

जुड़े हुए: एलिमेंट को कनेक्ट करने वाले एट्रिब्यूट

<input type="checkbox" id="voice-notifications" name="voice-notifications">
<label for="voice-notifications">...</label>

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

ये काम करके देखें

1. अपने माउस से किसी लेबल पर कर्सर घुमाएं और देखें कि चेकबॉक्स हाइलाइट हो रहा है.
2. Chrome डेवलपर टूल की मदद से, लेबल एलिमेंट की जांच करें. इससे आपको क्लिक किए जा सकने वाले उस एरिया के बारे में पता चलेगा जहां क्लिक करके चेकबॉक्स को चुना जा सकता है.

स्क्रीन रीडर के साथ इंटरैक्शन

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

Chrome में स्क्रीन रीडर की मदद से मौजूदा फ़ॉर्म पर नेविगेट करने वाले उपयोगकर्ताओं को, <picture> एलिमेंट पर रुकना पड़ता है. यह Chrome से जुड़ा नहीं है. स्क्रीन रीडर का इस्तेमाल करने वाला व्यक्ति, दृष्टि बाधित होने की वजह से स्क्रीन रीडर का इस्तेमाल कर रहा होगा. इसलिए, किसी इमेज पर रुकना उसके लिए मददगार नहीं होगा. किसी एट्रिब्यूट की मदद से, स्क्रीन रीडर से एलिमेंट छिपाए जा सकते हैं.

index.html

<picture aria-hidden="true">

अब स्क्रीन रीडर, सिर्फ़ विज़ुअल एलिमेंट को छोड़कर आगे बढ़ जाते हैं.

स्लाइडर एलिमेंट input[type="range"] में एक खास ARIA एट्रिब्यूट होता है: aria-labelledby="media-volume". इससे स्क्रीन रीडर को खास निर्देश मिलते हैं, ताकि वह उपयोगकर्ता अनुभव को बेहतर बना सके.

ये काम करके देखें

1. फ़ॉर्म में फ़ोकस को आगे-पीछे ले जाने के लिए, अपने ऑपरेटिंग सिस्टम में मौजूद स्क्रीन रीडर टेक्नोलॉजी का इस्तेमाल करें.
2. फ़ॉर्म पर कुछ स्क्रीन रीडर सॉफ़्टवेयर डाउनलोड करके आज़माएं.

4. अडैप्टिव लेआउट

Git branch: layouts

इस सेक्शन के आखिर तक, सेटिंग पेज में ये बदलाव हो जाएंगे:

• कस्टम प्रॉपर्टी और उपयोगकर्ता की रिलेटिव यूनिट की मदद से, स्पेसिंग सिस्टम बनाना
• फ़्लेक्सिबल और रिस्पॉन्सिव अलाइनमेंट और स्पेसिंग के लिए CSS ग्रिड लिखना
• अंतरराष्ट्रीय स्तर पर अडैप्टिव लेआउट के लिए, लॉजिकल प्रॉपर्टी का इस्तेमाल करना
• कॉम्पैक्ट और स्पेस वाले लेआउट के बीच अडैप्ट करने के लिए, मीडिया क्वेरी लिखें

स्पेसिंग

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

कस्टम प्रॉपर्टी

यह वर्कशॉप, कस्टम प्रॉपर्टी के सात साइज़ के सेट पर आधारित है.

• इन्हें style.css में सबसे ऊपर रखें:

style.css

:root {
  --space-xxs: .25rem;
  --space-xs:  .5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-xxl: 6rem;
}

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

पेज स्टाइल

इसके बाद, आपको कुछ दस्तावेज़ स्टाइल सेट करनी होंगी, एलिमेंट से मार्जिन हटाने होंगे, और फ़ॉन्ट को एक अच्छा Sans-Serif फ़ॉन्ट सेट करना होगा.

• style.css में यह जोड़ें:

style.css

* {
  box-sizing: border-box;
  margin: 0;
}

html {
  block-size: 100%;
}

body {
  min-block-size: 100%;  
  padding-block-start: var(--space-xs);
  padding-block-end: var(--space-xs);
}

यहां स्पेसिंग की कस्टम प्रॉपर्टी का पहली बार इस्तेमाल किया गया है! इससे आपके अंतरिक्ष के सफ़र की शुरुआत होती है.

टाइपोग्राफ़ी

इस लेआउट के लिए फ़ॉन्ट ऐडैप्टिव है. system-ui कीवर्ड, उपयोगकर्ता के ऑपरेटिंग सिस्टम के हिसाब से सबसे सही इंटरफ़ेस फ़ॉन्ट का इस्तेमाल करेगा.

body {
  font-family: system-ui, sans-serif;
}

h1,h2,h3 { 
  font-weight: 500;
}

small {
  line-height: 1.5;
}

h1, h2, और h3 के लिए स्टाइल में छोटे-मोटे बदलाव किए गए हैं. हालांकि, small एलिमेंट को टेक्स्ट रैप होने पर, अतिरिक्त line-height की ज़रूरत होती है. ऐसा न करने पर, यह बहुत ज़्यादा इकट्ठा हो जाता है.

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

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

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

लॉजिकल प्रॉपर्टी की मदद से, कम स्टाइल में लिखकर ज़्यादा उपयोगकर्ताओं तक पहुंचा जा सकता है.

सीएसएस ग्रिड लेआउट

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

यहां Chrome DevTools का एक स्क्रीनशॉट दिया गया है. इसमें एक साथ हर सीएसएस ग्रिड लेआउट को ओवरले किया गया है:

1. style.css में इनमें से हर स्टाइल को जोड़कर, साथ-साथ काम करें:

<main>

main {
  display: grid;
  gap: var(--space-xl);
  place-content: center;
  padding: var(--space-sm);
}

ग्रिड लेआउट में, डिफ़ॉल्ट रूप से हर चाइल्ड एलिमेंट को उसकी लाइन में रखा जाता है. इससे एलिमेंट को स्टैक करने में आसानी होती है. इसमें gap का इस्तेमाल करने का फ़ायदा भी मिलता है. आपने पहले * सिलेक्टर का इस्तेमाल करके, सभी एलिमेंट पर margin: 0 सेट किया था. अब यह ज़रूरी है, क्योंकि आपको स्पेसिंग के लिए gap का इस्तेमाल करना है. गैप, कंटेनर में स्पेस को मैनेज करने के लिए सिर्फ़ एक जगह नहीं है, बल्कि यह कंटेनर के फ़्लो के हिसाब से काम करता है.

<form>

form {
  max-width: 89vw;
  display: grid;
  gap: var(--space-xl) var(--space-xxl);
  align-items: flex-start;
  grid-template-columns: 
    repeat(auto-fit, minmax(min(10ch, 100%), 35ch));
}

यह डिज़ाइन का सबसे मुश्किल ग्रिड लेआउट है. हालांकि, इसमें रिस्पॉन्सिव डिज़ाइन का सबसे दिलचस्प पहलू शामिल है:

• max-width, लेआउट एल्गोरिदम के लिए एक वैल्यू उपलब्ध करा रहा है. इससे यह तय किया जा सकेगा कि लेआउट कितना बड़ा हो सकता है.
• gap, कस्टम प्रॉपर्टी का इस्तेमाल कर रहा है और column-gap से अलग row-gap पास कर रहा है.
• align-items को flex-start पर सेट किया गया है, ताकि आइटम की ऊंचाई न बढ़े.
• grid-template-columns में कुछ मुश्किल सिंटैक्स हैं, लेकिन इसका मकसद छोटा है. कॉलम 35ch को चौड़ा रखें और कभी भी 10ch से कम न रखें. साथ ही, अगर जगह हो, तो चीज़ों को कॉलम में रखें. ऐसा न होने पर, पंक्तियां ठीक हैं.

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

<section>

section {
  display: grid;
  gap: var(--space-md);
}

हर सेक्शन, लाइनों की एक ग्रिड होनी चाहिए. इसमें चाइल्ड एलिमेंट के बीच में कुछ जगह होनी चाहिए.

<header>

header {
  display: grid;
  gap: var(--space-xxs);
}

हर हेडर, लाइनों का एक ग्रिड होना चाहिए. साथ ही, चाइल्ड एलिमेंट के बीच बहुत कम जगह होनी चाहिए.

<fieldset>

fieldset {
  padding: 0;
  display: grid;
  gap: 1px;
  border-radius: var(--space-sm);
  overflow: hidden;
}

इस लेआउट की मदद से, कार्ड जैसा दिखने वाला लेआउट बनाया जाता है और इनपुट को एक साथ ग्रुप किया जाता है. अगले सेक्शन में रंग जोड़ने पर, overflow: hidden और gap: 1px साफ़ तौर पर दिखते हैं.

.fieldset-item

.fieldset-item {
  display: grid;
  grid-template-columns: var(--space-lg) 1fr;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
}

इस लेआउट की मदद से, आइकॉन और चेकबॉक्स को उससे जुड़े लेबल और कंट्रोल के साथ बीच में रखा जाता है. ग्रिड टेंप्लेट का पहला कॉलम, var(--space-lg), आइकॉन से ज़्यादा चौड़ा कॉलम बनाता है, ताकि चाइल्ड एलिमेंट को बीच में रखा जा सके.

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

.fieldset-item <picture>

.fieldset-item > picture {
  block-size: var(--space-xl);
  inline-size: var(--space-xl);
  clip-path: circle(50%);
  display: inline-grid;
  place-content: center;
}

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

<picture> & [checkbox] अलाइनमेंट

.fieldset-item > :is(picture, input[type="checkbox"]) {
  place-self: center;
}

इस लेआउट में, :is स्यूडो सिलेक्टर का इस्तेमाल करके, फ़ोटो और चेकबॉक्स एलिमेंट को सेंटर में रखा गया है.

3. picture > svg सिलेक्टर को .fieldset-item svg से बदलें. इसके लिए, यह तरीका अपनाएं:

.fieldset-item <svg>

.fieldset-item svg {
  block-size: var(--space-md);
}

यह svg आइकॉन के साइज़ को, साइज़ सिस्टम से मिली वैल्यू पर सेट करता है.

.sm-stack

.sm-stack {
  display: grid;
  gap: var(--space-xs);
}

इस यूटिलिटी क्लास का इस्तेमाल, चेकबॉक्स के लेबल एलिमेंट के लिए किया जाता है. इससे चेकबॉक्स के लिए सहायता वाले टेक्स्ट में स्पेस दिया जा सकता है.

input[type="checkbox"]

input[type="checkbox"] {
  inline-size: var(--space-sm);
  block-size: var(--space-sm);
}

ये स्टाइल, हमारे स्पेसिंग सेट से वैल्यू का इस्तेमाल करके चेकबॉक्स का साइज़ बढ़ाती हैं.

ये काम करके देखें

1. Chrome डेवलपर टूल खोलें और Elements पैनल में एचटीएमएल पर ग्रिड बैज ढूंढें. डीबग टूल चालू करने के लिए, इन पर क्लिक करें.
2. Chrome डेवलपर टूल खोलें और स्टाइल पैनल में मौजूद गैप पर कर्सर घुमाएं.
3. Chrome डेवलपर टूल खोलें. इसके बाद, स्टाइल पैनल पर जाएं और स्टाइल से लेआउट पर स्विच करें. इस सेक्शन की सेटिंग टॉगल करके और लेआउट चालू करके, इसे एक्सप्लोर करें.

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

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

ध्यान दें: हर सेक्शन का सीएसएस, style.css में उस सिलेक्टर के बाद जोड़ा जाना चाहिए जिसे वह बदल रहा है.

<main>

@media (min-width: 540px) {
  main {
    padding: var(--space-lg);
  }
}

@media (min-width: 800px) {
  main {
    padding: var(--space-xl);
  }
}

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

<form>

form {
  --repeat: auto-fit;
  grid-template-columns: 
    repeat(var(--repeat), minmax(min(10ch, 100%), 35ch));
}

@media (orientation: landscape) and (min-width: 640px) {
  form {
    --repeat: 2;
  }
}

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

.fieldset-item

@media (min-width: 540px) {
  .fieldset-item {
    grid-template-columns: var(--space-xxl) 1fr;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-xl) var(--space-md) 0;
  }
}

यह मीडिया क्वेरी, व्यूपोर्ट के लिए ज़्यादा जगह उपलब्ध होने पर स्पेसिंग को बढ़ाती है. ग्रिड टेंप्लेट में, टेंप्लेट में बड़ी कस्टम प्रॉपर्टी (var(--space-xxl)) का इस्तेमाल करके पहले कॉलम को बड़ा किया जाता है. पैडिंग को बड़ी कस्टम प्रॉपर्टी के लिए भी बढ़ाया जाता है.

ये काम करके देखें

1. अपने ब्राउज़र को बड़ा और छोटा करें. देखें कि स्पेस कैसे अडजस्ट होता है.
2. मोबाइल डिवाइस पर झलक देखना
3. लैंडस्केप मोड में मोबाइल डिवाइस पर झलक देखना

5. अडैप्टिव कलर

Git branch: colors

इस सेक्शन के आखिर तक, आपकी सेटिंग का फ़ॉर्म:

• गहरे और हल्के रंग की प्राथमिकताओं के हिसाब से ढालना
• ब्रैंड के हेक्स कोड से जनरेट की गई कलर स्कीम हो
• ऐसे रंग इस्तेमाल करें जो देखने में आसान हों

HSL

अगले सेक्शन में, एचएसएल की मदद से कलर सिस्टम बनाया जाएगा. इससे आपको लाइट और डार्क थीम बनाने में मदद मिलेगी. यह सीएसएस के इस मुख्य सिद्धांत पर आधारित है: calc().

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

कस्टम प्रॉपर्टी

इस सेक्शन में, आपको कस्टम प्रॉपर्टी का एक सेट बनाना होता है. इसका इस्तेमाल बाकी स्टाइल में किया जा सकता है. आपने :root टैग में पहले जो स्पेसिंग सेट की थी उसी तरह से, अब आपको रंग जोड़ने होंगे.

मान लें कि आपके ऐप्लिकेशन के ब्रैंड का रंग #0af है. आपका पहला काम, इस हेक्स कलर वैल्यू को HSL कलर वैल्यू में बदलना है: hsl(200 100% 50%). इस कन्वर्ज़न से, आपके ब्रैंड के कलर चैनल, एचएसएल में दिखते हैं. इनका इस्तेमाल करके, calc() पर ब्रैंड के अलग-अलग रंगों का हिसाब लगाया जा सकता है.

ध्यान दें: यह ऐप्लिकेशन, गहरे रंग वाली थीम को प्राथमिकता देता है. इसके बाद, यह हल्के रंग वाली थीम के हिसाब से काम करता है. पहली कलर स्कीम बनाते समय, यह ज़रूरी है कि यह डार्क थीम हो.

इस सेक्शन में मौजूद हर कोड ब्लॉक को एक ही :root सिलेक्टर में जोड़ा जाना चाहिए.

ब्रैंड चैनल

:root {
  --hue: 200;
  --saturation: 100%;
  --lightness: 50%;
}

तीनों एचएसएल चैनलों को एक्सट्रैक्ट करके, उनकी अपनी कस्टम प्रॉपर्टी में रखा गया है.

1. तीनों प्रॉपर्टी का इस्तेमाल करें और ब्रैंड के रंग को फिर से बनाएं.

ब्रैंड

:root {
  --brand: hsl(
    var(--hue) 
    calc(var(--saturation) / 2)
    var(--lightness) 
  );
}

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

टेक्स्ट

:root {
  --text1: hsl(var(--hue) 15% 85%);
  --text2: hsl(var(--hue) 15% 65%);
}

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

2. अपने प्रोजेक्ट में कोड जोड़ने के बाद, Chrome डेवलपर टूल खोलें और चैनल की इन वैल्यू को बदलने की कोशिश करें. देखें कि एचएसएल और इसके चैनल एक-दूसरे के साथ कैसे इंटरैक्ट करते हैं. ऐसा हो सकता है कि आपको ज़्यादा या कम सैचुरेशन पसंद हो.

प्लैटफ़ॉर्म

:root {
  --surface1: hsl(var(--hue) 10% 10%);
  --surface2: hsl(var(--hue) 10% 15%);
  --surface3: hsl(var(--hue) 5% 20%);
  --surface4: hsl(var(--hue) 5% 25%);
}

टेक्स्ट का रंग बहुत हल्का होता है, क्योंकि डार्क मोड में सर्फ़ेस गहरे रंग के होते हैं. जहां टेक्स्ट के रंगों में ज़्यादा लाइटनेस वैल्यू (85% और इससे ज़्यादा) का इस्तेमाल किया गया था वहां प्लैटफ़ॉर्म कम वैल्यू (30% और इससे कम) का इस्तेमाल करेंगे. सरफ़ेस और टेक्स्ट के बीच, हल्केपन की रेंज का सही अंतर होने से यह पक्का करने में मदद मिलेगी कि उपयोगकर्ता, टेक्स्ट को आसानी से पढ़ सकें.

3. ध्यान दें कि रंग, 10% रोशनी और 10% सैचुरेशन के साथ सबसे गहरे स्लेटी रंग से शुरू होते हैं. इसके बाद, हल्के होते जाते हैं. हर नई सतह, पिछली सतह से 5% हल्की होती है. हल्की सतहों में सैचुरेशन भी थोड़ा कम हो गया है. सभी सतहों के रंग की चमक को 10% पर सेट करके देखें. क्या आपको यह ज़्यादा पसंद है या कम?

हल्के रंग वाली थीम

गहरे रंग वाली थीम के लिए, टेक्स्ट और बैकग्राउंड के रंगों का सही सेट तय करने के बाद, अब हल्के रंग वाली थीम के लिए अपनी पसंद के मुताबिक रंग चुनने का समय है. इसके लिए, prefers-color-scheme मीडिया क्वेरी में जाकर, रंग की कस्टम प्रॉपर्टी अपडेट करें.

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

ब्रैंड

@media (prefers-color-scheme: light) {
  :root {
    --brand: hsl(
      var(--hue) 
      var(--saturation)
      var(--lightness) 
    );
  }
}

सबसे पहले बात करते हैं ब्रैंड के रंग की. इसमें सैचुरेशन को पूरी तरह से वापस लाने की ज़रूरत है.

टेक्स्ट

@media (prefers-color-scheme: light) {
  :root {
    --text1: hsl(
      var(--hue) 
      var(--saturation)
      10% 
    );

    --text2: hsl(
      var(--hue) 
      calc(var(--saturation) / 2)
      30%
    );
  }
}

गहरे रंग वाली थीम में टेक्स्ट का रंग हल्का नीला होता है. इसी तरह, हल्के रंग वाली थीम में टेक्स्ट का रंग गहरा नीला होता है. एचएसएल रंग के लिए, 10% और 30% को लाइटनेस वैल्यू के तौर पर देखने से आपको पता चलना चाहिए कि ये रंग गहरे हैं.

सरफ़ेस

@media (prefers-color-scheme: light) {
  :root {
    --surface1: hsl(var(--hue) 20% 90%);
    --surface2: hsl(var(--hue) 10% 99%);
    --surface3: hsl(var(--hue) 10% 96%);
    --surface4: hsl(var(--hue) 10% 85%);
  }
}

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

कलर सिस्टम का इस्तेमाल करना

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

• कोड के इन सेक्शन के लिए, मिलता-जुलता सिलेक्टर ढूंढें और मौजूदा कोड ब्लॉक में कलर सीएसएस जोड़ें.

<body>

body {
  background: var(--surface1);
  color: var(--text1);
}

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

<fieldset>

fieldset {
  border: 1px solid var(--surface4);
  background: var(--surface4);
}

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

.fieldset-item

.fieldset-item {
  background: var(--surface3);
}

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

.fieldset-item > picture

.fieldset-item > picture {
  background: var(--surface4);
}

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

.fieldset-item svg

.fieldset-item svg {
  fill: var(--text2);
}

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

.fieldset-item:focus-within svg

.fieldset-item:focus-within svg {
  fill: var(--brand);
}

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

<small>

small {
  color: var(--text2);
}

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

गहरे रंग वाले फ़ॉर्म कंट्रोल

:root {
  color-scheme: dark light;
}

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

6. अडैप्टिव ऐनिमेशन

Git branch: animations

इस सेक्शन के आखिर तक, सेटिंग पेज में ये बदलाव हो जाएंगे:

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

हलचल कम करने की सुविधा बनाम मोशन हटाने की सुविधा

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

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

इंटरैक्शन स्टाइल

<fieldset>

fieldset {
  transition: box-shadow .3s ease;
}

fieldset:focus-within {
  box-shadow: 0 5px 20px -10px hsl(0 0% 0% / 50%);
}

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

.fieldset-item

.fieldset-item {
  transition: background .2s ease;
}

.fieldset-item:focus-within {
  background: var(--surface2);
}

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

.fieldset-item > picture

@media (prefers-reduced-motion: no-preference) {
  .fieldset-item > picture {
    clip-path: circle(40%);
    transition: clip-path .3s ease;
  }

  .fieldset-item:focus-within picture {
    clip-path: circle(50%);
  }
}

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

7. बधाई हो

Git branch: complete

बधाई हो, आपने उपयोगकर्ता के हिसाब से ढलने वाला इंटरफ़ेस बना लिया है!

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