Frontend interview: विश्वसनीय एंट्री ट्रांज़िशन के लिए CSS @starting-style का उपयोग कैसे करें?

1. प्रश्न और संदर्भ

एक व्यवस्थापक पृष्ठ (admin page) में एक dialog एलिमेंट और एक popover मेनू है। डिज़ाइन में हर फ़्रेम पर स्टाइल बदलने वाले JavaScript के बिना एंट्री और एग्ज़िट ट्रांज़िशन की आवश्यकता होती है; पुराने ब्राउज़र उपयोग योग्य बने रहने चाहिए, और जो उपयोगकर्ता मोशन कम करते हैं उन्हें तेज़ एनीमेशन के लिए बाध्य नहीं किया जाना चाहिए। @starting-style की सीमा, CSS/स्क्रिप्ट विभाजन, फ़ॉलबैक व्यवहार और वैलिडेशन की व्याख्या करें।

2. इंटरव्यूअर क्या मूल्यांकन करता है

• यह जानना कि पहले स्टाइल अपडेट में ट्रांज़िशन के लिए कोई पिछला कंप्यूटेड स्टाइल नहीं होता है और @starting-style एक प्रारंभिक बिंदु प्रदान करता है।
• एंट्री और एग्ज़िट, असतत (discrete) display, top-layer एलिमेंट्स और सामान्य opacity/transform ट्रांज़िशन में अंतर करना।
• स्क्रिप्ट को स्टेट परिवर्तन के लिए ज़िम्मेदार रखना जबकि प्लेटफ़ॉर्म फ़ोकस, Escape, सेमेंटिक्स और मोशन प्राथमिकता को संभालता है।
• केवल CSS पेस्ट करने के बजाय क्षमता जांच (capability checks), कैंसलेशन रेस, रिड्यूस्ड मोशन और वास्तविक ब्राउज़र सत्यापन डिज़ाइन करना।

3. पहले स्पष्ट करने योग्य प्रश्न

1. क्या यह एक dialog एलिमेंट है, popover है, या सामान्य नोड है? Top-layer और डिफ़ॉल्ट-फ़ोकस व्यवहार डिज़ाइन को बदल देते हैं।
2. क्या नोड को तब तक बना रहना चाहिए जब तक कि एग्ज़िट एनीमेशन समाप्त न हो जाए, या तुरंत गैर-इंटरैक्टिव हो जाना चाहिए? यह display और इवेंट सीमाओं को बदलता है।
3. क्या किसी पुराने ब्राउज़र को स्थिर परिणाम दिखाना चाहिए, तुरंत स्विच करना चाहिए, या बिल्कुल सटीक पिक्सेल मैच करना चाहिए?
4. prefers-reduced-motion के साथ, क्या अवधि कम होनी चाहिए, हलचल हटनी चाहिए, या सभी ट्रांज़िशन हटा दिए जाने चाहिए?

4. 30-सेकंड का उत्तर

मैं विज़िबिलिटी, फ़ोकस और क्लोज़िंग का नियंत्रण HTML स्टेट और सेमेंटिक्स को सौंपूंगा, जबकि CSS प्रतिवर्ती (reversible) विज़ुअल ट्रांज़िशन का नियंत्रण रखेगा। पहले दृश्यमान अपडेट से पहले अपारदर्शिता (opacity) और ट्रांसफ़ॉर्म मान प्रदान करने के लिए @starting-style का उपयोग करें; display के लिए allow-discrete या एक कम्पैटिबिलिटी पाथ का उपयोग करें ताकि एलिमेंट ट्रांज़िशन के दौरान रेंडर होने योग्य बना रहे। एग्ज़िट के लिए केवल एक शुरुआती नियम ही नहीं, बल्कि एक स्पष्ट अंतिम स्थिति और DOM लाइफ़टाइम की आवश्यकता होती है। पुराने ब्राउज़र तुरंत स्विच करते हैं, रिड्यूस्ड-मोशन उपयोगकर्ताओं को छोटा या शून्य एनीमेशन मिलता है, और कीबोर्ड, स्क्रीन-रीडर और रेस टेस्ट परिणाम को सत्यापित करते हैं।

5. चरण-दर-चरण उत्तर

चरण 1: स्टेट और सेमेंटिक सीमाएं परिभाषित करें

dialog.showModal(), एक popover की ओपन स्टेट, और एक क्लास टॉगल के अलग-अलग सेमेंटिक्स होते हैं। सुनिश्चित करें कि एक बंद कंट्रोल फ़ोकस प्राप्त न कर सके, एक खुला कंट्रोल उपयुक्त फ़ोकस लक्ष्य प्राप्त करे, और Escape तथा cancel इवेंट काम करें। एनीमेशन स्थिति को दर्शाता है; इसे एक्सेसिबिलिटी स्थिति को परिभाषित नहीं करना चाहिए। स्क्रिप्ट्स को प्लेटफ़ॉर्म API को कॉल करना चाहिए या स्टेट एट्रिब्यूट को टॉगल करना चाहिए, टाइमर के साथ दृश्यता का अनुकरण नहीं करना चाहिए।

चरण 2: एक एंट्री शुरुआती बिंदु बनाएं

पहले स्टाइल अपडेट पर ब्राउज़र के पास कोई पिछला स्टाइल नहीं हो सकता है, इसलिए एक सामान्य ट्रांज़िशन का कोई मूल (origin) नहीं होता है। प्रारंभिक मानों को @starting-style में रखें:

.dialog {
  opacity: 1;
  transform: scale(1);
  transition: opacity 180ms ease, transform 180ms ease;
}

@starting-style {
  .dialog[open] {
    opacity: 0;
    transform: scale(0.96);
  }
}

शुरुआती नियम पहले स्टाइल अपडेट पर लागू होता है, एक स्थायी बंद स्थिति के रूप में नहीं। यदि कोई घटक फिर से डाला जाता है, तो एंट्री चलती है या नहीं यह इसके लाइफ़साइकिल और DOM ऑपरेशन पर निर्भर करता है; यह न मानें कि प्रत्येक एट्रिब्यूट टॉगल शुरुआती नियम को लागू करता है।

चरण 3: डिस्क्रीट प्रॉपर्टीज और एग्ज़िट को संभालें

display को अपारदर्शिता की तरह इंटरपोलेट नहीं किया जा सकता है। एलिमेंट को ट्रांज़िशन के दौरान रेंडर होने योग्य रखें और इसे एक असतत बिंदु पर अनुपलब्ध स्थिति में स्विच करें; समर्थित ब्राउज़र transition-behavior: allow-discrete का उपयोग कर सकते हैं, अन्यत्र तत्काल फ़ॉलबैक के साथ। ट्रांज़िशन पूरा होने तक बंद होने वाले नोड को बनाए रखें या नेटिव कंपोनेंट को उसका लाइफ़साइकिल प्रबंधित करने दें; एक निश्चित setTimeout के साथ अनुमान न लगाएं। प्रॉपर्टी के आधार पर transitionend को फ़िल्टर करें और कैंसलेशन, बार-बार ओपन होना और अनमाउंट को संभालें।

चरण 4: टॉप लेयर और इंटरैक्शन का ध्यान रखें

Top layer में dialogs और popovers स्टैकिंग, बैकड्रॉप और फ़ोकस व्यवहार को बदलते हैं। कंटेंट और ::backdrop ट्रांज़िशन को अलग-अलग परिभाषित करें, फिर बाहरी क्लिक, Escape, स्क्रॉल लॉकिंग और मल्टीपल इंस्टेंसेस का परीक्षण करें। स्क्रिप्ट्स को API कॉल्स, कैंसलेशन और बिज़नेस कॉलबैक्स को बनाए रखना चाहिए; @starting-style जावास्क्रिप्ट स्टेट मशीन का प्रतिस्थापन नहीं है।

चरण 5: मोशन प्राथमिकता का सम्मान करें और सत्यापित करें

@media (prefers-reduced-motion: reduce) के अंतर्गत, स्टेट फ़ीडबैक को बनाए रखते हुए मूवमेंट हटाएं, अवधि कम करें, या ट्रांज़िशन को अक्षम करें। पहली बार ओपन होना, फिर से ओपन होना, त्वरित टॉगल, क्लोज़िंग के दौरान नेविगेशन, स्क्रिप्ट विफलता, पुराने ब्राउज़र, कीबोर्ड, स्क्रीन रीडर, बैकड्रॉप और फ़ोकस रिटर्न का परीक्षण करें। केवल स्क्रीनशॉट जांचने के बजाय कैंसलेशन, बाधित ट्रांज़िशन, छिपे हुए नोड अवशेष (residue) और एक्सेसिबिलिटी रिग्रेशन को ट्रैक करें।

6. मॉडल उत्तर

मैं सेमेंटिक्स से शुरुआत करूंगा: नेटिव dialog या popover APIs के साथ थोड़ा सा स्क्रिप्ट ओपन स्टेट, फ़ोकस और Escape का स्वामित्व रखता है; CSS केवल उस स्थिति को प्रस्तुत करता है। एक सामान्य ट्रांज़िशन में पहले अपडेट पर पुरानी स्टाइल की कमी होती है, इसलिए @starting-style अपारदर्शिता और ट्रांसफ़ॉर्म ओरिजिन प्रदान करता है। display डिस्क्रीट है, इसलिए समर्थित डिस्क्रीट-ट्रांज़िशन व्यवहार का उपयोग करें या पुराने ब्राउज़रों में तुरंत स्विच करें। टाइमर के साथ अनुमान लगाने के बजाय ट्रांज़िशन समाप्त होने तक बंद होने वाले नोड को बनाए रखें। Top-layer कंटेंट और बैकड्रॉप को अलग-अलग परिभाषित करें, फिर रिड्यूस्ड मोशन, त्वरित टॉगल, कीबोर्ड और स्क्रीन रीडर का परीक्षण करें।

7. सामान्य गलतियाँ

• शुरुआती नियम को बंद स्थिति मानना: बाद के टॉगल में गलत स्थिति होगी; स्थायी, एंट्री और अंतिम बंद मानों को अलग करें।
• display पर सामान्य अपारदर्शिता ट्रांज़िशन लागू करना: एलिमेंट बहुत जल्दी गायब हो जाता है या इंटरैक्टिव बना रहता है; डिस्क्रीट व्यवहार और फ़ॉलबैक का उपयोग करें।
• setTimeout के साथ नोड्स को हटाना: उपयोगकर्ता सेटिंग्स, कैंसलेशन, या छूटे हुए फ़्रेम लाइफ़साइकिल को डि-सिंक्रनाइज़ करते हैं; एक वैध ट्रांज़िशन इवेंट या नेटिव लाइफ़साइकिल का उपयोग करें।
• एनीमेशन को फ़ोकस और सेमेंटिक्स नियंत्रित करने देना: सहायक तकनीक दृश्य समय का अनुसरण करती है; पहले HTML/API स्थिति स्थापित करें।
• रिड्यूस्ड मोशन को अनदेखा करना: प्राथमिकता का उल्लंघन होता है; स्पष्ट स्थिति प्रतिक्रिया बनाए रखते हुए गति को छोटा करें या हटाएं।

8. फॉलो-अप प्रश्न और उत्तर

फॉलो-अप 1: पहले फ़ेड-इन के लिए एक सामान्य ट्रांज़िशन अपर्याप्त क्यों है?

पहले स्टाइल अपडेट से पहले तुलना करने के लिए कोई पिछला कंप्यूटेड स्टाइल नहीं हो सकता है, इसलिए ब्राउज़र सीधे अंतिम मान लागू करता है। @starting-style वह मूल (origin) प्रदान करता है; यह बाद की प्रत्येक समापन स्थिति को परिभाषित नहीं करता है।

फॉलो-अप 2: display एग्ज़िट में कैसे भाग ले सकता है?

ट्रांज़िशन के दौरान एलिमेंट को रेंडर होने योग्य रखें और display को एक असतत बिंदु पर स्विच करें। जहां समर्थित हो वहां allow-discrete का उपयोग करें और अन्यत्र तुरंत बंद करें, साथ ही यह सुनिश्चित करें कि एक बंद एलिमेंट फ़ोकस या पॉइंटर इंटरैक्शन प्राप्त न कर सके।

फॉलो-अप 3: त्वरित ओपन-क्लोज़-ओपन परिवर्तनों के दौरान क्या होता है?

पिछला ट्रांज़िशन समाप्त होने से पहले स्थिति उलट सकती है। पुराने एनीमेशन कार्य को रद्द करें, वर्तमान स्थिति पढ़ें, और नवीनतम स्थिति को ही एकमात्र कमिट बनने दें; दो टाइमर न चलाएं जो स्वतंत्र रूप से नोड को हटाएं और फिर से खोलें। बारी-बारी से क्लिक, Escape और नेविगेशन टियरडाउन का परीक्षण करें।