मॉडर्न वेब गाइडेंस से जुड़ी गाइड

ज़्यादा कंट्रास्ट वाले इंटरफ़ेस पसंद करने वाले उपयोगकर्ताओं के लिए, स्क्रोलबार की विज़िबिलिटी बढ़ाना

एचटीएमएल कॉन्टेंट में WebGL शेडर की मदद से, कस्टम विज़ुअल इफ़ेक्ट लागू करें.

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

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

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

स्क्रोलबार के रंग या मोटाई को पसंद के मुताबिक बनाना

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

इंटरैक्टिव एचटीएमएल एलिमेंट को 3D सीन में इंटिग्रेट करना.

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

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

कैनवस से डाइनैमिक एचटीएमएल कॉन्टेंट को इमेज या वीडियो फ़्रेम के तौर पर कैप्चर और एक्सपोर्ट करें.

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

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

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

कई आकृतियों को जोड़कर, एलिमेंट में जटिल कटआउट या 'नॉकआउट' इफ़ेक्ट बनाएं. जैसे, किसी एलिमेंट में नॉच जोड़ना.

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

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

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

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

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

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

एलिमेंट पर मौसम के असर और टेक्सचर के पैटर्न लागू करें, ताकि वे असली, पुराने या किसी ठोस चीज़ जैसे दिखें.

स्क्रोल प्रोग्रेस बार, स्टेप-बाय-स्टेप प्रोग्रेस ट्रैकर या कोई ऐसा विज़ुअल बनाएं जिससे पता चले कि उपयोगकर्ता ने पेज या सेक्शन को कितना स्क्रोल किया है.

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

पेज की कलर स्कीम के बावजूद, कुछ एलिमेंट को हल्के रंग वाले मोड या गहरे रंग वाले मोड में रहने के लिए मजबूर करना. जैसे, कोड ब्लॉक, मीडिया प्लेयर वगैरह.

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

'पुल-टू-रिवील' सुविधा बनाएं. इससे उपयोगकर्ता, स्क्रीन को नीचे की ओर खींचकर ज़्यादा कॉन्टेंट देख सकता है. जैसे, खोज बार.

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

फ़्लोटिंग बटन या विजेट (सबसे ऊपर वापस जाएं, सबसे नीचे स्क्रोल करें, चैट लॉन्चर वगैरह) बनाएं. ये बटन या विजेट, उपयोगकर्ता के स्क्रोल करने के आधार पर दिखते और गायब होते हैं.

स्क्रोल-शैडो ओवरले, ग्रेडिएंट फ़ेड या दिशा बताने वाले ऐरो इंडिकेटर बनाएं. ये सिर्फ़ तब दिखते हैं, जब उस दिशा में स्क्रोल करने के लिए ज़्यादा कॉन्टेंट मौजूद हो.

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

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

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

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

ऐसा कार्ड कॉम्पोनेंट बनाएं जो उपलब्ध स्पेस और कॉन्टेंट के हिसाब से, अपने प्रज़ेंटेशन को अडजस्ट कर सके.

एक ऐसा मेन्यू कॉम्पोनेंट बनाएं जो विकल्पों या कार्रवाइयों की सूची दिखाता हो. इसमें नेस्ट किए गए सबमेन्यू के लिए सहायता भी शामिल हो.

नेविगेशन मेन्यू में, पेज के उस सेक्शन को हाइलाइट करना जो फ़िलहाल दिख रहा है

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

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

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

लगातार और स्टैक किए जा सकने वाले मैसेज और स्थिति की जानकारी देने के लिए, बिना रुकावट वाले टोस्ट और ओवरले सूचनाएं बनाएं.

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

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

एक ऐसा लोडिंग स्पिनर बनाएं जो सभी उपयोगकर्ताओं को व्यस्त स्थिति के बारे में बताए, कम मोशन वाली सेटिंग का पालन करे, और बेहतर तरीके से ऐनिमेट करे.

एक नेविगेशन पैनल कॉम्पोनेंट बनाएं. जब इसे मेन्यू बटन से ट्रिगर किया जाए, तो यह मौजूदा पेज के कॉन्टेंट के ऊपर स्लाइड करके दिखे. साथ ही, खारिज किए जाने पर (स्वाइप करके, बाहर टैप करके या Esc दबाकर) स्लाइड करके हट जाए.

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

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

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

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

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

डीओएम में एलिमेंट जोड़ने/हटाने या उनकी डिसप्ले वैल्यू को टॉगल करने पर, एलिमेंट को आसानी से छिपाएं/दिखाएं.

डायलॉग, पॉपओवर, और टूलटिप जैसे एलिमेंट को ऐनिमेट करें, क्योंकि वे टॉप लेयर में शामिल हो रहे हैं/उससे बाहर निकल रहे हैं.

पेज पर फ़्लोटिंग एलिमेंट को इधर-उधर ले जाने के लिए, खींचें और छोड़ें.

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

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

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

सिबलिंग एलिमेंट के बीच ऐनिमेशन या ट्रांज़िशन के समय को अलग-अलग करें, ताकि हर एलिमेंट, सिबलिंग लिस्ट में अपनी पोज़िशन के आधार पर तय की गई देरी के बाद शुरू हो.

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

किसी बटन को किसी एलिमेंट से डिक्लेरेटिव तरीके से कनेक्ट करें, ताकि डिक्लेरेटिव बटन कमांड, इन्वोकर कमांड, बटन कमांड, कस्टम कमांड या डिक्लेरेटिव टॉगल ऐक्शन का इस्तेमाल करके, ऐप्लिकेशन के हिसाब से कस्टम कार्रवाइयां ट्रिगर की जा सकें.

JavaScript लिखे बिना, किसी बटन से डायलॉग या पॉपओवर की विज़िबिलिटी को टॉगल करें.

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

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

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

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

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

एक ऐसा मॉडल डायलॉग बनाएं जिसे लाइट डिसमिस (यानी कि डायलॉग के बाहर क्लिक या टैप करके) के ज़रिए बंद किया जा सके

सीएसएस ट्रांज़िशन, ऐनिमेशन, स्क्रोल-ड्रिवन ऐनिमेशन, और व्यू ट्रांज़िशन की मदद से यूज़र इंटरफ़ेस (यूआई) को ऐनिमेट करें. साथ ही, कंपोज़िटर पर मोशन को चालू रखें और कम मोशन वाली सेटिंग का ध्यान रखें.

किसी डीओएम एलिमेंट को उसकी अहम स्थिति को खोए बिना मूव करें या उसे किसी दूसरे पैरंट एलिमेंट में जोड़ें. जैसे, इंटरैक्टिविटी की स्थितियां (:focus/:active), <iframe> लोड होने की स्थिति, ऐनिमेशन/ट्रांज़िशन की स्थिति वगैरह

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

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

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

मॉडल डायलॉग खुला होने पर, पेज को स्क्रोल होने से रोकें.

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

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

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

स्क्रोल किए जा सकने वाले कंटेनर में, स्नैप किए गए आइटम के साथ नेविगेशन इंडिकेटर, लिंक किए गए कॉन्टेंट पैनल, और आंकड़ों की ट्रैकिंग को सिंक करें.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ऑटोकंप्लीट की सही वैल्यू और ऑटोमैटिक भरने की सुविधा के साथ साइन-इन फ़ॉर्म बनाएं.

ऑटोकंप्लीट की सही वैल्यू और ऑटोमैटिक भरने की सुविधा के साथ साइन-अप फ़ॉर्म बनाएं.

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

ऑटोकंप्लीट एट्रिब्यूट और ऑटोमैटिक तरीके से भरने की सुविधा का इस्तेमाल करके, पते का फ़ॉर्म बनाएं.

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

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

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

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

टेक्स्ट एरिया और सिंगल-लाइन इनपुट (चैट, खोज, इनलाइन नाम बदलना) में, Enter-to-submit को सुरक्षित तरीके से लागू करें. इससे इनपुट पद्धति संपादक (आईएमई) का इस्तेमाल करने वाले लोग, अधूरा टेक्स्ट सबमिट नहीं कर पाएंगे.

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

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

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

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

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

कस्टम एलिमेंट को डिफ़ॉल्ट रूप से ऐक्सेस करने लायक बनाएं. इसके लिए, ElementInternals ARIA मिक्सिन की मदद से, भूमिकाएं और ARIA स्टेटस सेट करें. साथ ही, delegatesFocus की मदद से फ़ोकस मैनेज करें और ARIA रिलेशनशिप को एक ही शैडो रूट में रखें.

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

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

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

कस्टम एलिमेंट को सर्वर-रेंडर करें. इसके बाद, उसे फिर से रेंडर किए बिना या बिना स्टाइल वाले कॉन्टेंट को फ़्लैश किए बिना, उसे हाइड्रेट करें.

शैडो डीओएम की मदद से, कॉम्पोनेंट के डीओएम और स्टाइल को एनकैप्सुलेट करें. साथ ही, एचटीएमएल टेंप्लेट की मदद से ट्री को बेहतर तरीके से बनाएं और स्लॉट की मदद से उपभोक्ता के कॉन्टेंट को प्रोजेक्ट करें.

शैडो बाउंड्री के साथ स्टाइल करने के लिए, :host सिलेक्टर, थीम के लिए इनहेरिट की गई और कस्टम प्रॉपर्टी, ::slotted और ::part, और कॉम्पोनेंट के अंदर कैस्केड लेयर और कंटेनर क्वेरी का इस्तेमाल करें.

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

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

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

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

कुछ सीएसएस नियमों या एलान को सिर्फ़ तब लागू करें, जब ब्राउज़र किसी खास at-rule के साथ काम करता हो.

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

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

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

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

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

किसी एक एलिमेंट पर, अन्य ट्रांसफ़ॉर्म प्रॉपर्टी से अलग, अलग-अलग सीएसएस ट्रांसफ़ॉर्म प्रॉपर्टी (जैसे, ट्रांसलेट, रोटेट, स्केल) को ऐनिमेट या ओवरराइड करें.

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

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

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

सिलेक्टर और शर्त वाले @-नियमों के इंटरसेक्शन या यूनियन के आधार पर, एलिमेंट को टारगेट करें. साथ ही, दोहराव को कम करें.

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

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

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

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

Temporal.Duration और Intl.DurationFormat का इस्तेमाल करके, तारीखों और समय के बीच बीते या बचे हुए समय का हिसाब लगाएं, अवधि की इकाइयों को बैलेंस करें, और स्थानीय भाषा में अवधि को फ़ॉर्मैट करें, ताकि लोग उसे आसानी से पढ़ सकें.

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

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

Temporal.Instant का इस्तेमाल करके, सब-मिलीसेकंड या नैनोसेकंड ISO 8601 टाइमस्टैंप के बीच के इंटरवल को पार्स करें, क्रम से लगाएं, और मेज़र करें. ऐसा करते समय, तारीख को छोटा करने से जुड़ी गड़बड़ियां नहीं होती हैं.

अंतरराष्ट्रीय उपयोगकर्ताओं के लिए, नॉन-ग्रिगोरियन कैलेंडर सिस्टम (जैसे, इस्लामिक, हिब्रू या चाइनीज़) में तारीखों को सटीक तरीके से दिखाना और उनकी गिनती करना.

Emscripten का इस्तेमाल करके, C/C++ को WebAssembly में कंपाइल करना

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

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

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

नेटवर्क की समस्या को कम करने और सर्वर पर लोड कम करने के लिए, कई आंकड़ों, टेलीमेट्री, और Core Web Vitals इवेंट को एक ही बीकन में डीबाउंस और बैच करें. इससे रीयल-टाइम अपडेट भी मिलते रहेंगे.

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

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

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

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

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

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

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

क्लाइंट-साइड JavaScript का इस्तेमाल करके, A/B टेस्ट, मल्टी-वैरिएट टेस्ट या अन्य एक्सपेरिमेंट डिलीवर और रेंडर करें. इससे, एचटीएमएल, सीएसएस, और JavaScript में बदलाव किया जा सकता है या उन्हें इंजेक्ट किया जा सकता है. ऐसा करने पर, एक्सपेरिमेंट के कॉन्टेंट को दिखाने के लिए, फ़्लिकर या फ़्लैश होने से पहले ओरिजनल कॉन्टेंट नहीं दिखता.

धीमी गति से चलने वाली JavaScript और पेज के रिस्पॉन्स में लगने वाले समय (आईएनपी) के खराब होने की अन्य वजहों का पता लगाएं.

उन स्क्रिप्ट की पहचान करना जिनकी वजह से लंबे ऐनिमेशन फ़्रेम बनते हैं

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

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

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

सबसे बड़े एलिमेंट को रेंडर करने में लगने वाले समय (एलसीपी) से जुड़ी इमेज को लोड करने की प्राथमिकता को ऑप्टिमाइज़ करें. साथ ही, कम ज़रूरी इमेज को लोड करने की प्राथमिकता को कम करें, ताकि ज़रूरी रिसॉर्स को लोड होने में लगने वाले समय को कम किया जा सके.

पहले से लोड किए गए कॉन्टेंट की प्राथमिकता को ऑप्टिमाइज़ करें, ताकि ज़रूरी रिसॉर्स लोड होने में देरी न हो.

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

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

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

आधुनिक वेब ऐप्लिकेशन को ऑप्टिमाइज़ करने के लिए, काम के दिशा-निर्देश. परफ़ॉर्मेंस का ऑडिट करते समय, लोड होने से जुड़ी मेट्रिक को ऑप्टिमाइज़ करते समय, इंटरैक्शन में लगने वाले समय को कम करते समय, और Core Web Vitals (एलसीपी, आईएनपी, सीएलएस) को ऑप्टिमाइज़ करते समय इस गाइड का इस्तेमाल करें

उपयोगकर्ता के पूरे पेज विज़िट के दौरान, आंकड़ों, Core Web Vitals, गड़बड़ियों, और टेलीमेट्री डेटा को भरोसेमंद तरीके से ट्रैक करें. साथ ही, डेटा भेजने में तब तक देरी करें, जब तक उपयोगकर्ता पेज को छोड़ न दे.

डीओएम नोड की संख्या कम करने के लिए, सीएसएस के स्यूडो-एलिमेंट (जैसे कि ::before और ::after) में, रिज़ॉल्यूशन के हिसाब से ऑप्टिमाइज़ की गई इमेज का इस्तेमाल करें.

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

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

प्रोग्राम के हिसाब से सुलभता की स्थितियों (जैसे, aria-invalid) को विज़ुअल :user-invalid स्थिति के साथ सिंक करें. इससे यह पक्का किया जा सकेगा कि स्क्रीन रीडर का इस्तेमाल करने वाले लोगों को गड़बड़ी का फ़ीडबैक, इंटरैक्शन के बाद ही मिले. इससे विज़ुअल अनुभव को बेहतर बनाया जा सकेगा.

::before/::after जैसे सीएसएस जनरेटेड कॉन्टेंट का इस्तेमाल इस तरह करें कि वह ऐक्सेस किया जा सके. इसमें सजावटी कॉन्टेंट के लिए वैकल्पिक टेक्स्ट शामिल है.

किसी पेज के लिए, ऑपरेटिंग सिस्टम की टेक्स्ट स्केल की सेटिंग का पालन करें, ताकि फ़ॉन्ट साइज़, लेआउट, और rem-आधारित मेज़रमेंट, उपयोगकर्ता की सुलभता सेटिंग के मुताबिक हों.

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

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

किसी सार्वजनिक वेब ऐप्लिकेशन से, उपयोगकर्ता के लोकल नेटवर्क या लूपबैक इंटरफ़ेस पर मौजूद संसाधनों को ऐक्सेस करना.

लौटने वाले उपयोगकर्ता की पुष्टि, प्राइमरी साइन-इन के लिए पासकी की मदद से करें.

पासवर्ड से लॉग इन करने के बाद, किसी मौजूदा उपयोगकर्ता के लिए बैकग्राउंड में पासकी रजिस्टर करना.

उपयोगकर्ताओं को उनके खाते में रजिस्टर की गई पासकी देखने और मैनेज करने की सुविधा दें.

साइन इन किए हुए उपयोगकर्ता की पहचान की पुष्टि करने के लिए, उसकी मौजूदा पासकी का इस्तेमाल करें. ऐसा किसी संवेदनशील कार्रवाई से पहले करें.

किसी मौजूदा उपयोगकर्ता खाते के लिए पासकी रजिस्टर करना.

वेब ऐप्लिकेशन में WebAuthn और पासकी लागू करने के लिए, पूरी जानकारी और क्रॉस-कटिंग सिद्धांत. पासकी को रजिस्टर करने, उसकी पुष्टि करने, उसे मैनेज करने या उसकी फिर से पुष्टि करने के लिए, इस गाइड का इस्तेमाल करें.

डीओएम पर आधारित XSS हमलों को रोकने के लिए, Trusted Types की नीति तय करें. इससे, भरोसेमंद न होने वाले एचटीएमएल को सैनिटाइज़ किया जा सकेगा. साथ ही, innerHTML जैसे डीओएम सिंक में लिखते समय इस नीति का इस्तेमाल करें और कॉन्टेंट की सुरक्षा के लिए नीति के ज़रिए, Trusted Types को लागू करें.

लौटने वाले उपयोगकर्ताओं को साइन-इन पेज पर ले जाने या उनके वर्कफ़्लो में रुकावट डालने से पहले, उनकी सेव की गई पासकी या पासवर्ड की मदद से उनकी पुष्टि करें.

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

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

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

ब्राउज़र में मैसेज, टोकन या आर्टफ़ैक्ट पर हस्ताक्षर करने और उनकी पुष्टि करने के लिए, क्लासिकल या क्वांटम-रेज़िस्टेंट (पोस्ट-क्वांटम) एसिमेट्रिक कुंजियों का इस्तेमाल करें. इससे डेटा की सुरक्षा और प्रामाणिकता पक्का की जा सकती है.

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

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

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

इंस्टॉल किए गए वेब ऐप्लिकेशन को नए ऑरिजिन पर ट्रांसफ़र करना. इस दौरान, उपयोगकर्ता के कॉन्फ़िगरेशन और ओएस-लेवल के शॉर्टकट सुरक्षित रहते हैं.

यूज़र जनरेटेड कॉन्टेंट या साइट कॉन्टेंट की भाषा का पता लगाएं.

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

उपयोगकर्ता के डिवाइस पर मौजूद Summarizer API का इस्तेमाल करके, टेक्स्ट कॉन्टेंट की खास जानकारी जनरेट करना.

डिवाइस पर मौजूद Translator API का इस्तेमाल करके, टेक्स्ट का एक भाषा से दूसरी भाषा में अनुवाद करें.

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

WebMCP Imperative API का इस्तेमाल करके, क्लाइंट-साइड JavaScript फ़ंक्शन को एआई एजेंट के लिए टूल के तौर पर प्रोग्राम के हिसाब से रजिस्टर करें.

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