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

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

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

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

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

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

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

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

• कम डेटा / लाइट मोड
• कलर रेंज
• कंट्रास्ट (कम | ज़्यादा | कम करें)
• रंग (इस्तेमाल करने वाले के रंग को पेज पर दिखने के लिए मजबूर किया जाता है)
• पारदर्शिता (चालू | कम की गई)

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

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

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

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

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

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

आपको क्या बनाना होगा

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

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

आपको इनके बारे में जानकारी मिलेगी

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

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

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

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

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

2. सेट अप करें

कोड पाएं

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

सुझाव: कोडपेन का इस्तेमाल करें

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. डाउनलोड की गई ZIP फ़ाइल को किसी फ़ोल्डर में खोलें.

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

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

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

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

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

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

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

Git ब्रांच: 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 ब्रांच: layouts

इस सेक्शन के आखिर तक, सेटिंग पेज पर ये काम किए जाएंगे:

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

स्पेस

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

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

यह वर्कशॉप, सात कस्टम प्रॉपर्टी साइज़ के एक सेट पर बनाई जाती है.

• इन्हें 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);
}

हर सेक्शन में लाइनों का ग्रिड होना चाहिए और चाइल्ड एलिमेंट के बीच में मीडियम स्पेस होना चाहिए.

&lt;header&gt;

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

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

&lt;fieldset&gt;

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;
}

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

<तस्वीर> और [चेकबॉक्स] अलाइनमेंट

.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=&quot;checkbox&quot;]

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

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

इन तरीकों को आज़माएं

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

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

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

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

&lt;main&gt;

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

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

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

&lt;form&gt;

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 ब्रांच: colors

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

• गहरे और हल्के रंग की प्राथमिकताओं को अपनाएं
• ब्रैंड के हेक्स कोड से मिली कलर स्कीम हो
• जिनके रंग ऐक्सेस किए जा सकते हों

HSL

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

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

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

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

मान लें कि आपके ऐप्लिकेशन के लिए ब्रैंड का रंग #0af है. आपका पहला काम है, इस रंग की हेक्स वैल्यू को एचएसएल कलर वैल्यू में बदलना: 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%);
  }
}

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

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

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

• नीचे दिए गए कोड सेक्शन के लिए, मेल खाने वाला सिलेक्टर ढूंढें और मौजूदा कोड ब्लॉक में कलर सीएसएस जोड़ें.

&lt;body&gt;

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

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

&lt;fieldset&gt;

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

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

.fieldset-item

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

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

.fieldset-item > तस्वीर

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

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

.fieldset-item svg

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

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

.fieldset-item:focus-without svg

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

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

&lt;small&gt;

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

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

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

:root {
  color-scheme: dark light;
}

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

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

Git ब्रांच: animations

इस सेक्शन के आखिर तक, सेटिंग पेज पर ये काम किए जाएंगे:

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

मोशन कम करना बनाम कोई मोशन न होना

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

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

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

&lt;fieldset&gt;

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 > तस्वीर

@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 ब्रांच: complete

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

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