फ्रंटेंड इंटरव्यू: आप CSS zoom या transform: scale में से किसे चुनते हैं?

प्रॉम्प्ट और संदर्भ

एक डिज़ाइन टूल को टूलबार को लेआउट में बनाए रखते हुए अपने कैनवास को ज़ूम करना होगा। लेआउट, ओवरफ़्लो, इवेंट कोऑर्डिनेट्स और एक्सेसिबिलिटी के लिए CSS zoom और transform: scale() की तुलना करें, फिर बताएं कि आप नेस्टेड ज़ूम को कैसे डिबग करेंगे।

इंटरव्यूअर क्या टेस्ट कर रहा है

• लेआउट को प्रभावित करने वाले ज़ूम और केवल पेंट को प्रभावित करने वाले ट्रांसफ़ॉर्म में अंतर करना।
• स्क्रॉल कंटेनर, पॉइंटर कोऑर्डिनेट्स, फ़ोकस, ब्राउज़र ज़ूम और नेस्टेड ज़ूम को संभालना।
• स्क्रीनशॉट से चुनने के बजाय वास्तविक परिदृश्यों में अपने विकल्प को सत्यापित करना।

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

1. क्या लक्ष्य सामान्य पेज सामग्री है, एक एडिटेबल कैनवास है, या केवल पढ़ने योग्य (read-only) पूर्वावलोकन है?
2. क्या ज़ूम को लेआउट स्पेस, स्क्रॉल रेंज और हिट क्षेत्रों को बदलना चाहिए?
3. क्या इसे कीबोर्ड नेविगेशन, स्क्रीन रीडर्स, ब्राउज़र ज़ूम और हाई कंट्रास्ट का समर्थन करना चाहिए?

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

यदि ज़ूम को लेआउट और स्क्रॉल स्पेस को बदलना है, तो मैं CSS zoom का मूल्यांकन करूँगा। यदि यह केवल एक विज़ुअल परिवर्तन है और सिबलिंग तत्वों को अपने स्थान पर ही रहना चाहिए, तो मैं transform: scale() पर विचार करूँगा और ट्रांसफ़ॉर्म ओरिजिन, हिट टेस्टिंग और स्क्रॉलिंग को स्पष्ट रूप से संभालूँगा। zoom लेआउट को प्रभावित करता है; scale() लेआउट पुनर्गणना को ट्रिगर नहीं करता है। currentCSSZoom नेस्टेड CSS ज़ूम मानों के प्रभावी उत्पाद को उजागर कर सकता है, जबकि ब्राउज़र ज़ूम और ट्रांसफ़ॉर्म अलग माप बने रहते हैं।

चरण-दर-चरण गहन विश्लेषण

1. ज़ूम सेमांटिक्स को परिभाषित करें

पेज की पठनीयता के लिए ज़ूम को CSS के साथ उपयोगकर्ता सेटिंग्स को बदलने के बजाय ब्राउज़र और सिस्टम नियंत्रणों का उपयोग करना चाहिए। एक कैनवास एडिटर को एक एप्लिकेशन स्केल और कैनवास तथा व्यूपोर्ट कोऑर्डिनेट्स के बीच एक स्पष्ट रूपांतरण की आवश्यकता होती है; दोनों स्थितियों को आपस में न मिलाएँ।

2. ज़ूम के लेआउट प्रभाव को समझें

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

3. transform: scale के पेंट प्रभाव को समझें

transform: scale() सिबलिंग्स को रीफ्लो किए बिना पेंटिंग और ट्रांसफ़ॉर्म की गई विज़ुअल सीमा को बदलता है। यह पूर्वावलोकन या स्थिर बाहरी लेआउट के लिए उपयुक्त है, लेकिन transform-origin और विज़ुअल तथा इवेंट कोऑर्डिनेट्स के बीच रूपांतरण स्पष्ट होना चाहिए।

4. कोड सीमा को स्पष्ट रखें

.preview-zoom {
  zoom: var(--preview-zoom, 1);
}

.canvas-visual {
  transform: scale(var(--canvas-scale, 1));
  transform-origin: top left;
}

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

5. कोऑर्डिनेट्स, फ़ोकस और स्क्रॉल को संभालें

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

6. नेस्टेड ज़ूम को डिबग करें

Element.currentCSSZoom तत्व और उसके पूर्वजों (ancestors) पर CSS ज़ूम के प्रभावी उत्पाद की रिपोर्ट करता है। यह लॉग और डिबगिंग टूल को यह समझाने में मदद करता है कि सामग्री कई बार आवर्धित क्यों दिखाई देती है। यह ब्राउज़र पेज ज़ूम या ट्रांसफ़ॉर्म स्केल का संयुक्त माप नहीं है; उन्हें अलग से रिकॉर्ड करें।

7. एक्सेसिबिलिटी और प्रदर्शन जाँच चलाएँ

ब्राउज़र ज़ूम, सिस्टम फ़ॉन्ट प्राथमिकताओं, कीबोर्ड संचालन, स्क्रीन-रीडर क्रम, हाई कंट्रास्ट और कम गति (reduced motion) का परीक्षण करें। बड़े या लगातार ज़ूम परिवर्तन लेआउट और पेंट लागत को बढ़ा सकते हैं; स्लाइडर पूर्वावलोकन को थ्रॉटल करें और रिलीज़ होने पर सटीक मान सहेजें।

मॉडल उत्तर

मैं पहले तय करूँगा कि ज़ूम को लेआउट स्पेस बदलना चाहिए या नहीं। यदि इसे स्क्रॉलिंग और सिबलिंग स्थितियों को बदलना है, तो मैं zoom का मूल्यांकन करूँगा; यदि टूलबार के स्थिर रहने के दौरान कैनवास को विज़ुअल रूप से बढ़ना चाहिए, तो मैं transform: scale() का उपयोग करूँगा और ओरिजिन, स्क्रॉलिंग और पॉइंटर कोऑर्डिनेट्स को संभालूँगा। कैनवास की स्थिति को ब्राउज़र पेज ज़ूम को नहीं बदलना चाहिए या डायलॉग्स को आकस्मिक अनुपात इनहेरिट नहीं करने देना चाहिए। मैं नेस्टेड CSS ज़ूम को डिबग करने के लिए currentCSSZoom का उपयोग करूँगा लेकिन ट्रांसफ़ॉर्म और पेज ज़ूम को अलग से रिकॉर्ड करूँगा, फिर कीबोर्ड फ़ोकस, स्क्रीन रीडर्स, स्क्रॉलिंग, DPI, प्रदर्शन और मोबाइल उपकरणों का परीक्षण करूँगा।

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

• यह मान लेना कि zoom और scale() केवल विज़ुअल आकार बदलते हैं।
• यह उम्मीद करना कि ट्रांसफ़ॉर्म स्केलिंग लेआउट और स्क्रॉल रेंज को स्वचालित रूप से विस्तारित करेगी।
• रूट पर एक कैनवास अनुपात सेट करना और टूलबार, डायलॉग्स और नेविगेशन को स्केल करना।
• स्केलिंग के बाद पॉइंटर-कोऑर्डिनेट रूपांतरण और फ़ोकस दृश्यता की उपेक्षा करना।
• currentCSSZoom को ट्रांसफ़ॉर्म या ब्राउज़र पेज ज़ूम सहित कुल योग मानना।

अनुवर्ती प्रश्न और उत्तर

आपको CSS zoom से कब बचना चाहिए?

उपयोगकर्ता की पठनीयता के लिए ब्राउज़र और सिस्टम नियंत्रणों का उपयोग करें। जब ब्राउज़र मैट्रिक्स या लेआउट दुष्प्रभाव अस्वीकार्य हों, तो सामान्य लेआउट, कंटेनर क्वेरीज़ या एप्लिकेशन कोऑर्डिनेट ट्रांसफ़ॉर्म का उपयोग करें।

क्या होगा यदि ट्रांसफ़ॉर्म की गई विज़ुअल सीमा कंटेनर से अधिक हो जाए?

क्लिपिंग और स्क्रॉलिंग को सोच-समझकर परिभाषित करें, ट्रांसफ़ॉर्म की गई सीमा को मापें, और फ़ोकस तथा ड्रैग हैंडल को दृश्यमान रखें। केवल overflow: hidden के साथ समस्या को न छिपाएँ।

पॉइंटर कोऑर्डिनेट्स ऑफ़सेट क्यों होते हैं?

इवेंट कोऑर्डिनेट्स आमतौर पर व्यूपोर्ट-सापेक्ष होते हैं, जबकि कैनवास कोऑर्डिनेट्स में स्क्रॉल और ट्रांसलेशन को घटाना और एप्लिकेशन स्केल द्वारा विभाजित करना आवश्यक होता है। रूपांतरण को एक परीक्षित फ़ंक्शन में रखें और विभिन्न ट्रांसफ़ॉर्म ओरिजिन को कवर करें।

आप नेस्टेड ज़ूम को कैसे नियंत्रित करते हैं?

स्कोप को सीमित करें, स्केल स्थिति को केंद्रीकृत करें, प्रत्येक लेयर और currentCSSZoom को लॉग करें, और पूर्वज की स्थिति को जाने बिना घटकों को अनुपात गुणा करने से रोकें।

आप ब्राउज़र पेज ज़ूम का परीक्षण कैसे करते हैं?

100%, 125%, और 200% पर, रीफ्लो, कीबोर्ड क्रम, ट्रंकेशन और हॉरिजॉन्टल स्क्रॉलिंग की जाँच करें। पेज ज़ूम और एप्लिकेशन कैनवास ज़ूम को अलग-अलग स्वीकृति आयामों के रूप में रखें।

आप एक इंटरव्यू में अपने विकल्प को कैसे मापते हैं?

लक्षित उपकरणों पर लेआउट मूवमेंट, स्क्रॉल रेंज, हिट-टेस्ट त्रुटि, फ़ोकस दृश्यता, फ़्रेम समय और इनपुट लेटेंसी की तुलना करें, फिर उस प्रॉपर्टी को चुनें जो उत्पाद सेमांटिक्स से मेल खाती हो।