संकेत और दायरा
आप एक क्रॉस-ब्राउज़र कार्ड घटक (card component) के जिम्मेदार हैं। आधुनिक ब्राउज़र bevel, scoop और squircle को रेंडर कर सकते हैं, जबकि पुराने ब्राउज़र केवल border-radius को समझते हैं। corner-shape के लिए पूर्व-शर्त, फ़ॉलबैक (fallback), और दृश्य व इंटरैक्शन स्वीकृति योजना की व्याख्या करें।
यह CSS ज्यामिति, प्रोग्रेसिव एन्हांसमेंट और कंपोनेंट इंजीनियरिंग का परीक्षण करता है। corner-shape मौजूदा border-radius द्वारा बनाए गए कोनों को संशोधित करता है; जब त्रिज्या शून्य पर समाप्त होती है तो इसका कोई प्रभाव नहीं पड़ता है। उत्तर में पेंटिंग, सामग्री लेआउट और पॉइंटर हिट क्षेत्रों को अलग-अलग रखें।
साक्षात्कारकर्ता क्या परीक्षण कर रहा है
एक मजबूत उत्तर एक उपयोगी border-radius बेसलाइन बनाए रखता है और एन्हांसमेंट को एक फीचर क्वेरी (feature query) के पीछे लेयर करता है। यह एक-से-चार-मान कोने के क्रम, सकारात्मक और नकारात्मक superellipse() वक्रता (curvature), विपरीत कोनों के ओवरलैप होने पर त्रिज्या बाधाओं (radius constraints), और कौन से पेंट किए गए प्रभाव आकार का पालन करते हैं, की व्याख्या करता है।
साक्षात्कारकर्ता यह भी चाहता है कि आप आकार को सामग्री क्लिप (content clip) के रूप में मानने से बचें। MDN नोट करता है कि सामग्री मूल बॉक्स के विरुद्ध रखी जाती है और होवर अभी भी दृश्यमान कोने के बाहर लागू हो सकता है, इसलिए फ़ोकस दृश्यता और हिट परीक्षण के लिए अपनी स्वयं की जाँच की आवश्यकता होती है।
स्पष्टीकरण के लिए प्रश्न
पुराने ब्राउज़रों को कौन सा दृश्य रूप बनाए रखना चाहिए
यदि एक गोल कार्ड पर्याप्त है, तो border-radius रखें। यदि ब्रांड ज्यामिति का सटीक मिलान होना चाहिए, तो एक SVG या स्यूडो-एलिमेंट फ़ॉलबैक रखरखाव और रेंडरिंग लागत को जोड़ता है।
क्या आकार इंटरैक्शन सीमा को परिभाषित करता है
पुष्टि करें कि क्या लिंक, बटन या ड्रैग लक्ष्यों को दृश्यमान रूपरेखा से मेल खाना चाहिए। एक CSS कोना आकार आवश्यक रूप से सामग्री या ईवेंट हिट परीक्षण को नहीं बदलता है, इसलिए केवल एक स्क्रीनशॉट पर्याप्त नहीं है।
क्या एनिमेशन और RTL आवश्यक हैं
जांचें कि क्या लक्षित ब्राउज़र superellipse() को इंटरपोलेट करते हैं और reduced-motion का सम्मान करते हैं। बहुभाषी लेआउट के लिए भौतिक शीर्ष-बाएँ को इनलाइन शुरुआत मानने के बजाय लॉजिकल कॉर्नर लॉन्गहैंड्स (logical corner longhands) को प्राथमिकता दें।
30-सेकंड का उत्तर
“मैं border-radius को बेसलाइन के रूप में शुरू करता हूँ और @supports के अंदर corner-shape को लेयर करता हूँ। यह प्रॉपर्टी मौजूदा त्रिज्या की पेंटिंग को बदलती है, सामग्री लेआउट को नहीं; ब्राउज़र त्रिज्या को बाधित करते हैं जब विपरीत कोने ओवरलैप होते हैं, इसलिए मैं अत्यधिक आकारों का परीक्षण करता हूँ। मैं फ़ोकस रिंग, हिट क्षेत्रों और ओवरफ़्लो को अलग से सत्यापित करता हूँ, और एनिमेशन के लिए फ़ीचर और reduced-motion फ़ॉलबैक प्रदान करता हूँ।”
चरण-दर-चरण समाधान
चरण 1: एक डिग्रेडेबल बेसलाइन स्थापित करें
पहले बेस स्टाइल लिखें ताकि नई प्रॉपर्टी के बिना भी कार्ड बॉर्डर, बैकग्राउंड, शैडो और गोल कोनों को बनाए रखें। फीचर क्वेरी के पीछे एन्हांसमेंट जोड़ें:
.card {
border-radius: 24px;
background: var(--surface);
box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
}
@supports (corner-shape: scoop) {
.card {
corner-shape: scoop notch;
}
}असमर्थित ब्राउज़र अज्ञात घोषणा को अनदेखा करते हैं और बेसलाइन को बनाए रखते हैं। केवल एन्हांसमेंट में कंट्रास्ट, पठनीय टेक्स्ट या आवश्यक निर्देश न रखें।
चरण 2: मान मैपिंग और पूर्व-शर्तों की व्याख्या करें
एक मान सभी चार कोनों पर लागू होता है; दो मान विकर्ण जोड़े बनाते हैं; तीन मान तीसरे को नीचे-दाएँ में असाइन करते हैं; चार मान दक्षिणावर्त (clockwise) शीर्ष-बाएँ, शीर्ष-दाएँ, नीचे-दाएँ और नीचे-बाएँ मैप करते हैं। corner-shape border-radius पर निर्भर करता है, इसलिए शून्य त्रिज्या कोई आकार नहीं बनाती है।
superellipse() संख्या वक्रता को नियंत्रित करती है, जिसमें सकारात्मक और नकारात्मक दिशाएं उत्तल (convex) और अवतल (concave) रूप उत्पन्न करती हैं। एक साक्षात्कार में, बताएं कि सिंटैक्स नामों को डिज़ाइन टूल लेबल से अनुमान लगाने के बजाय लक्षित ब्राउज़रों में रेंडर किए गए आउटपुट के विरुद्ध जाँचा जाना चाहिए।
चरण 3: ओवरलैप और पेंटिंग सीमाओं को संभालें
जब विपरीत कोने की त्रिज्या और आकार ओवरलैप होते हैं, तो ब्राउज़र ज्यामितीय टकराव से बचने के लिए त्रिज्या को बाधित करता है। संकीर्ण कार्ड, अत्यधिक प्रतिशत त्रिज्या, और घनी सामग्री का परीक्षण करें ताकि टेक्स्ट, बैकग्राउंड, बॉर्डर और शैडो सुसंगत रहें।
बैकग्राउंड, बॉर्डर, आउटलाइन, बॉक्स शैडो, ओवरफ़्लो और बैकड्रॉप फ़िल्टर आमतौर पर कोने के आकार का पालन करते हैं। सामग्री अभी भी बॉक्स मॉडल का पालन करती है। यदि किसी इमेज या इंटरैक्शन क्षेत्र को वास्तव में क्लिपिंग की आवश्यकता है, तो एक अलग clip-path, मास्क या सिमेंटिक हिट लेयर का उपयोग करें।
चरण 4: इंटरैक्शन और एक्सेसिबिलिटी का परीक्षण करें
फ़ोकस रिंग दृश्यमान रहनी चाहिए और कीबोर्ड क्रम, फ़ोकस स्थिति और पॉइंटर क्षेत्र समर्थित और फ़ॉलबैक ब्राउज़रों में मेल खाने चाहिए। एक कार्ड के लिए जो एक लिंक है, एक पूर्ण आयताकार हिट क्षेत्र अक्सर पिक्सेल-परफेक्ट रूपरेखा की तुलना में अधिक उपयोगी होता है; विज़ुअल परीक्षणों में उस ट्रेड-ऑफ का दस्तावेजीकरण करें।
चरण 5: एनिमेट करें और लॉजिकल दिशा का सम्मान करें
कीवर्ड समतुल्य सुपरएलिप्स मानों के माध्यम से इंटरपोलेट हो सकते हैं, लेकिन कार्यान्वयन समर्थन की पुष्टि करें। होवर, फ़ोकस और स्थिति परिवर्तनों को स्पष्ट अवधि दें और उन्हें prefers-reduced-motion: reduce के तहत अक्षम या छोटा करें। बहुभाषी घटकों में लॉजिकल कॉर्नर लॉन्गहैंड्स का उपयोग करें ताकि RTL इच्छित ज्यामिति को उलट न दे।
चरण 6: एक संगतता मैट्रिक्स बनाएं
समर्थन वाले Chromium, आंशिक रूप से समर्थन करने वाले या असमर्थित ब्राउज़र, संकीर्ण चौड़ाई, लंबा टेक्स्ट, इमेज, शैडो, कीबोर्ड फ़ोकस, टच हिट परीक्षण और रिड्यूस्ड मोशन को कवर करें। संवर्धित और फ़ॉलबैक दोनों स्थितियों को कैप्चर करें, यह रिकॉर्ड करते हुए कि क्या घोषणा लागू होती है, लेआउट बदलता है, और ईवेंट लक्ष्य सुसंगत रहते हैं।
मॉडल उच्च-गुणवत्ता वाला उत्तर
मैं border-radius को उत्पाद बेसलाइन बनाऊँगा और @supports के माध्यम से corner-shape को लेयर करूँगा। पुराने ब्राउज़रों को अभी भी एक उपयोगी कार्ड मिलता है, जबकि नया आकार समर्थित होने पर उपस्थिति में सुधार करता है। मैं एक गैर-शून्य त्रिज्या को सत्यापित करूँगा, एक-से-चार-मान मैपिंग की व्याख्या करूँगा, और ओवरलैप बाधाओं के लिए संकीर्ण कार्ड और अत्यधिक त्रिज्या का परीक्षण करूँगा।
मैं कोने के आकार को सामग्री क्लिपिंग के रूप में नहीं मानूँगा। बैकग्राउंड, बॉर्डर और शैडो आमतौर पर इसका पालन करते हैं, लेकिन सामग्री लेआउट और पॉइंटर हिट परीक्षण को अलग-अलग जाँच की आवश्यकता होती है; फ़ोकस रिंग को दृश्यमान रहना चाहिए। एनिमेशन को एक reduced-motion शाखा मिलती है, RTL लॉजिकल लॉन्गहैंड्स का उपयोग करता है, और संगतता मैट्रिक्स केवल एक आधुनिक-ब्राउज़र स्क्रीनशॉट पर भरोसा करने के बजाय विज़ुअल, लेआउट, कीबोर्ड और टच व्यवहार की तुलना करता है।
सामान्य गलतियाँ
- लक्षण →
border-radiusके बिनाcorner-shapeघोषित करना → यह क्यों विफल होता है → कोई प्रभावी त्रिज्या नहीं होने का अर्थ है कोई आकार नहीं → समाधान → पहले गोल बेसलाइन प्रदान करें। - लक्षण → इमेज क्लिपिंग के रूप में
corner-shapeका उपयोग करना → यह क्यों विफल होता है → सामग्री अभी भी मूल बॉक्स का पालन करती है → समाधान → क्लिपिंग की आवश्यकता होने पर overflow, clip-path या मास्क का उपयोग करें। - लक्षण → मान लेना कि दृश्यमान कोना हिट क्षेत्र को छोटा करता है → यह क्यों विफल होता है → ईवेंट अभी भी मूल बॉक्स को लक्षित कर सकते हैं → समाधान → कीबोर्ड, टच और ईवेंट लक्ष्यों का अलग से परीक्षण करें।
- लक्षण → केवल एक चौड़ाई का परीक्षण करना → यह क्यों विफल होता है → एक संकीर्ण कंटेनर में विपरीत त्रिज्या बाधित हो सकती है → समाधान → अत्यधिक आकार और लंबे टेक्स्ट को शामिल करें।
- लक्षण → असमर्थित ब्राउज़रों में एक खाली कार्ड दिखाना → यह क्यों विफल होता है → एन्हांसमेंट को आवश्यक स्टाइलिंग माना गया था → समाधान → एक स्थिर बेसलाइन पर फीचर क्वेरी का उपयोग करें।
अनुवर्ती प्रश्न और उत्तर
अनुवर्ती 1: क्या होता है जब border-radius प्रतिशत का उपयोग करता है?
अनुमान द्वारा प्रतिशत को निश्चित पिक्सेल में बदलने के बजाय लक्षित ब्राउज़र के गणना किए गए परिणाम को सत्यापित करें। ओवरलैप और शैडो निरंतरता का निरीक्षण करने के लिए कई पहलू अनुपातों (aspect ratios) को कैप्चर करें। यदि ब्रांड आकार स्थिर होना चाहिए, तो बेस फ़ॉलबैक को बनाए रखते हुए एन्हांसमेंट लेयर में एक नियंत्रित त्रिज्या का उपयोग करें।
अनुवर्ती 2: फ़ोकस रिंग आकार का पालन कैसे कर सकती है?
पहले दृश्यता और कंट्रास्ट को सुरक्षित रखें, फिर इसे outline या स्यूडो-एलिमेंट के साथ मिलाने पर विचार करें। यदि कोई तकनीक रिंग को क्लिप करती है, तो कीबोर्ड फीडबैक का त्याग करने के बजाय एक आयताकार रिंग बनाए रखें।
अनुवर्ती 3: क्या होगा यदि corner-shape और border-shape दोनों घोषित किए गए हों?
W3C और MDN निर्दिष्ट करते हैं कि border-shape border-radius को अप्रभावी बनाता है, जबकि corner-shape border-radius पर निर्भर करता है। उन्हें वैकल्पिक ज्यामिति पथों के रूप में मानें और अप्रयुक्त पथ को एक स्पष्ट फ़ॉलबैक दें बजाय इसके कि यह माना जाए कि वे स्टैक होते हैं।
अनुवर्ती 4: आप इस प्रॉपर्टी से कब बचेंगे?
जब ब्राउज़र कवरेज अपर्याप्त हो, आकार आवश्यक क्लिपिंग को प्रभावित करता हो, या टीम दृश्य फ़ॉलबैक को बनाए नहीं रख सकती हो, तो इससे बचें। जब एक्सेसिबिलिटी और प्रदर्शन लक्ष्य पहले से पूरे हो जाते हैं तो स्थिर border-radius, SVG, या स्यूडो-एलिमेंट बेहतर विकल्प हो सकते हैं।