प्रश्न और परिदृश्य
साइट सर्वर द्वारा रेंडर किए गए समान-ऑरिजिन (same-origin) पृष्ठों के बीच सामान्य लिंक का उपयोग करती है। लक्ष्य समर्थित होने पर निरंतर ट्रांज़िशन प्रदान करना है, और अन्य सभी जगह नेटिव नेविगेशन बनाए रखना है। एक मजबूत उत्तर दोनों ट्रांज़िशन तंत्रों, अपडेट विफलताओं, इतिहास (history) नेविगेशन, फ़ोकस, स्क्रॉल स्थिति और रिड्यूस्ड-मोशन प्राथमिकताओं को कवर करता है।
साक्षात्कारकर्ता क्या परीक्षण कर रहा है
- क्या उम्मीदवार
document.startViewTransition()के साथ सेम-डॉक्यूमेंट अपडेट और@view-transitionके साथ ऑप्ट-इन किए गए क्रॉस-डॉक्यूमेंट नेविगेशन के बीच अंतर कर सकता है? - क्या वे समझते हैं कि API लिंक, इतिहास या सर्वर रेंडरिंग के प्रतिस्थापन के बजाय एक एन्हांसमेंट लेयर है?
- क्या वे फीचर डिटेक्शन, विफलता फ़ॉलबैक और
prefers-reduced-motionको सुरक्षित रूप से लागू कर सकते हैं? - क्या वे ट्रांज़िशन स्यूडो-एलिमेंट्स, फ़ोकस प्रबंधन, धीमे डिवाइस और बाधित नेविगेशन का परीक्षण कर सकते हैं?
पहले पूछे जाने वाले स्पष्टीकरण प्रश्न
पुष्टि करें कि क्या नेविगेशन हमेशा सेम-ऑरिजिन है, क्या iframes शामिल हैं, क्या शेयर्ड-एलिमेंट मोशन की आवश्यकता है, और क्या क्लाइंट राउटर पहले से मौजूद है। लक्षित ब्राउज़र, अवधि सीमाएं, क्या सरल फ़ेड पर्याप्त हैं, और उपयोगकर्ताओं द्वारा मोशन अक्षम करने पर उत्पाद को क्या करना चाहिए, इसे स्पष्ट करें। क्रॉस-डॉक्यूमेंट ट्रांज़िशन के लिए दोनों भाग लेने वाले दस्तावेज़ों का ऑप्ट-इन होना और ब्राउज़र का इस सुविधा का समर्थन करना आवश्यक है; वे क्रॉस-ऑरिजिन नेविगेशन तंत्र नहीं हैं।
30-सेकंड का उत्तर फ़्रेमवर्क
मैं नेटिव लिंक और सर्वर नेविगेशन को बेसलाइन के रूप में रखूँगा, फिर धीरे-धीरे ट्रांज़िशन जोड़ूँगा। इन-पेज अपडेट के लिए, startViewTransition का फीचर-डिटेक्ट करें और DOM अपडेट को रैप करें; सेम-ऑरिजिन मल्टी-पेज नेविगेशन के लिए, दोनों दस्तावेज़ों को @view-transition में ऑप्ट-इन करें। यदि कोई अपडेट विफल हो जाता है, तो पृष्ठ उपयोग योग्य बना रहना चाहिए और त्रुटि को मौजूदा UI द्वारा नियंत्रित किया जाना चाहिए। मोशन केवल ट्रांज़िशन स्यूडो-एलिमेंट्स से संबंधित है, रिड्यूस्ड-मोशन प्राथमिकताओं का सम्मान करता है, और कभी भी फ़ोकस, स्क्रॉल या इतिहास शब्दार्थ (semantics) को नियंत्रित नहीं करता है। मैं असमर्थित ब्राउज़र, फ़ॉलबैक, बैक/फ़ॉरवर्ड, धीमे नेटवर्क और बाधित नेविगेशन का परीक्षण करूँगा।
चरण-दर-चरण गहन विश्लेषण
- एक नॉन-एनिमेटेड बेसलाइन बनाएं। लिंक, फ़ॉर्म सबमिशन, सर्वर प्रतिक्रियाएं और त्रुटि पृष्ठ स्वतंत्र रूप से काम करने चाहिए; किसी एनिमेशन की नकल करने के लिए प्रत्येक नेविगेशन को इंटरसेप्ट न करें।
- सेम-डॉक्यूमेंट अपडेट को संभालें। फ़िल्टरिंग या स्थानीय स्थिति परिवर्तनों के लिए,
document.startViewTransitionका पता लगाएं। असमर्थित होने पर समान अपडेट फ़ंक्शन को सीधे चलाएं। यदि कॉलबैक विफल हो जाता है, तो मौजूदा त्रुटि स्थिति दिखाएं। - क्रॉस-डॉक्यूमेंट नेविगेशन को संभालें। सेम-ऑरिजिन पृष्ठों में
@view-transition { navigation: auto; }जोड़ें ताकि ब्राउज़र नेविगेशन के दौरान ट्रांज़िशन बना सके;startViewTransitionको कॉल न करें। गुम ऑप्ट-इन या समर्थन सामान्य नेविगेशन पर वापस आ जाता है। - विज़ुअल स्कोप को सीमित करें।
view-transition-nameकेवल उन तत्वों को असाइन करें जिनमें स्थिर समानता हो। छोटे, बाधित करने योग्य फ़ेड के लिए::view-transition-oldऔर::view-transition-newका उपयोग करें। - एक्सेसिबिलिटी को सुरक्षित रखें।
@media (prefers-reduced-motion: reduce)के तहत मोशन को अक्षम या छोटा करें। नेविगेशन के बाद, नए पृष्ठ के मुख्य शीर्षक या किसी अन्य जानबूझकर चुने गए लक्ष्य पर फ़ोकस रखें; स्क्रीनशॉट में सिमेंटिक स्थिति नहीं होनी चाहिए। - रनटाइम स्थितियों को संभालें। बैक, फ़ॉरवर्ड, रीफ़्रेश, नेटवर्क विफलता, बार-बार क्लिक और पृष्ठ छोड़ने के सामान्य परिणाम होने चाहिए। एक ट्रांज़िशन विज़ुअल टाइमिंग को बदलता है, URL, कैश, अनुमति या सबमिशन सिमेंटिक्स को नहीं।
उच्च गुणवत्ता वाला नमूना उत्तर
मैं एक नेटिव-नेविगेशन बेसलाइन को एक वैकल्पिक एनिमेशन लेयर से अलग करूँगा। सेम-डॉक्यूमेंट अपडेट के लिए, प्रत्येक ब्राउज़र एक update फ़ंक्शन को कॉल करता है; समर्थित ब्राउज़र document.startViewTransition(update) को लागू करते हैं, जबकि अन्य सीधे update को कॉल करते हैं। सर्वर-रेंडर्ड मल्टी-पेज नेविगेशन के लिए, सेम-ऑरिजिन पृष्ठों में @view-transition { navigation: auto; } शामिल होता है; लिंक वास्तविक बने रहते हैं और क्रॉस-ऑरिजिन समर्थन मान नहीं लिया जाता है।
एनिमेशन लेयर केवल विज़ुअल निरंतरता प्रदान करती है। स्थिर view-transition-name मान मेल खाने वाले तत्वों की पहचान करते हैं, एक छोटा फ़ेड डिफ़ॉल्ट है, और रिड्यूस्ड-मोशन प्राथमिकताएं इसे अक्षम कर देती हैं। नया दस्तावेज़ अभी भी अपनी सामान्य प्रतिक्रिया के माध्यम से फ़ोकस, स्क्रॉल और त्रुटियों को संभालता है। परीक्षणों में समर्थन की कमी, कॉलबैक त्रुटियां, बैक/फ़ॉरवर्ड, बार-बार क्लिक, धीमा CPU, धीमा नेटवर्क, टैब स्विचिंग और रिड्यूस्ड मोशन शामिल हैं। प्राथमिक संदर्भ MDN View Transition API और startViewTransition दस्तावेज़ हैं, साथ ही Chrome for Developers की क्रॉस-डॉक्यूमेंट गाइड भी है।
सामान्य गलतियाँ
- क्रॉस-डॉक्यूमेंट नेविगेशन के लिए
startViewTransitionको कॉल करना; यह सेम-डॉक्यूमेंट अपडेट के लिए है, जबकि नेविगेशन प्लस CSS ऑप्ट-इन क्रॉस-डॉक्यूमेंट केस शुरू करता है। - स्क्रिप्ट के साथ प्रत्येक लिंक को ब्लॉक करना, जिससे कीबोर्ड उपयोग, कॉपी किए गए लिंक, बैक नेविगेशन और नो-स्क्रिप्ट एक्सेस ख़राब हो जाते हैं।
- फ़ीचर डिटेक्शन और नेटिव फ़ॉलबैक के बिना सभी ब्राउज़रों या iframes में समान समर्थन मान लेना।
- कई तत्वों को डुप्लिकेट नाम देना या एनिमेशन को इतना लंबा बनाना जिससे स्नैपशॉट टकराव और भटकाव पैदा हो।
- केवल फ़ॉरवर्ड क्लिक का परीक्षण करना और विफल प्रतिक्रियाओं, बैक/फ़ॉरवर्ड, रिड्यूस्ड मोशन और बाधित ट्रांज़िशन की अनदेखी करना।
फॉलो-अप प्रश्न और उत्तर
क्या होगा यदि सेम-डॉक्यूमेंट अपडेट कॉलबैक विफल हो जाता है?
DOM अपडेट और त्रुटि स्थिति को स्वतंत्र रूप से निष्पादन योग्य फ़ंक्शन के रूप में रखें। ViewTransition अपवाद को पकड़ना लॉगिंग और विज़ुअल स्थिति को व्यवस्थित करने के लिए है; व्यावसायिक त्रुटि अभी भी मौजूदा UI का उपयोग करती है, और एनिमेशन अपवाद को डेटा अपडेट को अवरुद्ध नहीं करना चाहिए।
आप कैसे साबित करेंगे कि क्रॉस-डॉक्यूमेंट ट्रांज़िशन ने नेविगेशन सिमेंटिक्स को नहीं बदला?
समर्थक और गैर-समर्थक ब्राउज़रों में, URL, इतिहास स्टैक, रीफ़्रेश, कॉपी किए गए लिंक प्रविष्टि, कीबोर्ड संचालन, फ़ोकस लक्ष्य और सर्वर त्रुटि पृष्ठ की जांच करें। CSS ट्रांज़िशन अक्षम होने पर, पृष्ठ का परिणाम समान होना चाहिए।
शेयर्ड-एलिमेंट मोशन से कब बचना चाहिए?
पहचान अस्थिर होने पर, सूचियों के बार-बार पुनर्व्यवस्थित होने पर, सामग्री में तीव्र गति होने पर, या उपयोगकर्ताओं को तत्काल स्थिति स्थान की आवश्यकता होने पर एक साधारण फ़ेड का उपयोग करें या कोई गति न रखें। जब विज़ुअल लाभ फ़ोकस, प्रदर्शन और समझने की लागत को सही नहीं ठहराता है, तो नेटिव व्यवहार को बनाए रखें।