शीर्ष 60+ CSS साक्षात्कार प्रश्न और उत्तर (2026)

क्या आप CSS इंटरव्यू के लिए तैयार हैं? अब समय आ गया है कि आप CSS के मूल सिद्धांतों और उससे आगे के बारे में अपनी जानकारी बढ़ाएँ। समझ सीएसएस साक्षात्कार प्रश्नों से यह पता चल सकता है कि अभ्यर्थी डिजाइन संरचना और स्टाइलिंग तर्क को कितनी गहराई से समझते हैं।

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

तकनीकी नेताओं, प्रबंधकों और भर्ती विशेषज्ञों सहित 85 से अधिक पेशेवरों द्वारा साझा की गई अंतर्दृष्टि से आकर्षित होकर, यह मार्गदर्शिका विभिन्न उद्योगों में विश्वसनीय साक्षात्कार प्रथाओं को संकलित करती है - सभी अनुभव स्तरों के लिए सटीकता, प्रासंगिकता और विश्वसनीयता सुनिश्चित करती है।

शीर्ष CSS साक्षात्कार प्रश्न और उत्तर

1) आधुनिक CSS कैस्केड की व्याख्या करें, जिसमें शामिल हैं `@layer`, विशिष्टता, और स्रोत क्रम।

जब कई नियम एक ही तत्व को लक्षित करते हैं, तो कैस्केड यह तय करता है कि कौन सा नियम "जीतता" है। यह निर्णय महत्व के आधार पर होता है ( !important ), मूल (उपयोगकर्ता एजेंट, उपयोगकर्ता, लेखक), फिर परत क्रम से @layer, उसके बाद विशिष्टता, और अंत में स्रोत क्रम। @layer आपको रीसेट, बेस, कंपोनेंट्स और यूटिलिटीज़ जैसे पूर्वानुमानित स्तरों को परिभाषित करने की अनुमति देता है ताकि नियमों के पूरे समूह चयनकर्ता की विशिष्टता बढ़ाए बिना दूसरों को ओवरराइड कर सकें। इसका मुख्य लाभ रखरखाव है; मुख्य नुकसान यह है कि गलत परत क्रम बग्स को छिपा सकता है। कम-विशिष्टता वाले वर्ग चयनकर्ताओं को प्राथमिकता दें, रिज़र्व !important जानबूझकर बनाई गई नीतियों के लिए, तथा वास्तुकला को सुपाठ्य बनाए रखने के लिए।

उदाहरण सहित उत्तर दें

@layer reset, base, components, utilities;
@layer reset { *,*::before,*::after{ box-sizing:border-box } }
@layer base { body{ font:16px/1.5 system-ui } }
@layer components { .btn{ background:var(--brand,#4b6fff); color:#fff } }
@layer utilities { .text-sm{ font-size:.875rem } }

👉 मुफ़्त पीडीएफ़ डाउनलोड: सीएसएस साक्षात्कार प्रश्न

2) कंटेनर क्वेरीज़ मीडिया क्वेरीज़ से किस प्रकार भिन्न हैं, तथा आप प्रत्येक का उपयोग कहां करेंगे?

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

के बीच अंतर (तुलना तालिका)

फ़ैक्टर	मीडिया के प्रश्नों	कंटेनर प्रश्न
ट्रिगर	व्यूपोर्ट सुविधाएँ	कंटेनर का आकार या शैली
विस्तार	पृष्ठ-व्यापी	घटक-स्थानीय
व्यवस्था	प्रश्न से परे कोई नहीं	आवश्यकता है `container-type` / वैकल्पिक नाम
के लिए सबसे अच्छा	वैश्विक ब्रेकपॉइंट	कार्ड या विजेट वेरिएंट

उदाहरण सहित उत्तर दें

/* Declare a query container */
.card-grid { container-type: inline-size; }
/* Component-level breakpoint */
@container (min-width: 32rem) {
   .card { display:grid; grid-template-columns: 2fr 3fr; gap:1rem; }
}

3) इसकी विशेषताएँ और लाभ क्या हैं? `:has()`, और इसकी तुलना किस प्रकार की जाती है `:is()` और `:where()` ?

संबंधपरक छद्म-वर्ग :has() अपने वंशजों या बाद के पैटर्न के आधार पर एक तत्व का चयन करता है, बिना किसी पैरेंट-स्टेट स्टाइलिंग को सक्षम करता है Javaस्क्रिप्ट। यह फ़ॉर्म सत्यापन समूहों, नेविगेशन स्थितियों या घनत्व स्विच के लिए शक्तिशाली है। इसके विपरीत, :is() और :where() लंबी चयनकर्ता सूचियों को सरल बनाना; :where() शून्य विशिष्टता का योगदान देता है, जबकि :is() इसके सबसे विशिष्ट तर्क की विशिष्टता में योगदान देता है। :has() प्रासंगिक स्टाइलिंग और साफ़ मार्कअप शामिल करें; नुकसानों में असीमित चयनकर्ताओं के साथ उपयोग करने पर संभावित प्रदर्शन समस्याएँ शामिल हैं। इसका दायरा सीमित रखें, और पूर्वानुमान के लिए क्लासेस या विशेषताओं के साथ संयोजित करें।

उदाहरण सहित उत्तर दें

/* Emphasize label when any input inside is invalid */
.form-group:has(input:invalid) label { color:#b00020; }

/* Compact nav if there are many items */
.nav:has(> li:nth-child(n+8)) { font-size:.9rem }

/* Specificity control helpers */
:is(h1,h2,h3){ margin-block:.75em }
where(.prose h1,.prose h2){ line-height:1.2 }

4) थीमिंग के लिए आप CSS कस्टम प्रॉपर्टीज़ को कहां लागू करेंगे, और उनके क्या फायदे और नुकसान हैं?

CSS कस्टम प्रॉपर्टीज़ कैस्केड के माध्यम से मान ले जाती हैं, स्वाभाविक रूप से इनहेरिट होती हैं और रनटाइम पर रिजॉल्व होती हैं, जो उन्हें थीम, डेंसिटी मोड और डिज़ाइन टोकन के लिए आदर्श बनाती हैं। वे डार्क मोड को टॉगल करने या स्वैप करने की अनुमति देती हैं।ping एसेट्स को रीबिल्ड किए बिना कलर सिस्टम। इसके फायदों में डायनामिक अपडेट, कंपोनेंट्स के साथ को-लोकेशन और कम्पैटिबिलिटी शामिल हैं। @layer. नुकसानों में स्थिर विश्लेषकों के लिए अप्रत्यक्षता और फ़ॉलबैक डिज़ाइन करने की आवश्यकता शामिल है। वैश्विक अर्थविज्ञान के लिए रूट-स्कोप्ड टोकन और वेरिएंट के लिए घटक-स्कोप्ड टोकन का उपयोग करें, और दीर्घकालिक रखरखाव के लिए नामों को स्थिर रखें।

उदाहरण सहित उत्तर दें

:root { --bg: #fff; --fg: #111; --radius: .5rem; }
@media (prefers-color-scheme: dark){
   :root { --bg:#0b0d10; --fg:#e7edf3; }
}
.card { background:var(--bg); color:var(--fg); border-radius:var(--radius); }

5) कौन सी लेआउट प्रणाली किस समस्या के लिए उपयुक्त है: फ्लेक्सबॉक्स, ग्रिड या सबग्रिड?

फ्लेक्सबॉक्स इसके लिए इष्टतम है एक आयामी एकल अक्ष के साथ संरेखण और वितरण में, ग्रिड उत्कृष्ट है दो आयामी प्लेसमेंट और स्पष्ट track कंट्रोल और सबग्रिड चाइल्ड एलिमेंट्स को पैरेंट ग्रिड से इनहेरिट करने की अनुमति देते हैं। tracनेस्टेड कंपोनेंट्स में एकसमान अलाइनमेंट के लिए ks का उपयोग किया जाता है। सही सिस्टम चुनने से ओवरराइड कम होते हैं और पठनीयता बेहतर होती है। पेज फ्रेम और डैशबोर्ड के लिए ग्रिड, टूलबार और चिप लिस्ट के लिए फ्लेक्सबॉक्स और कार्ड मेटाडेटा जैसे आंतरिक तत्वों को बाहरी कॉलम में अलाइन करने के लिए सबग्रिड एक सामान्य पैटर्न है।

प्रकार और उनके बीच अंतर (तुलना तालिका)

उदाहरण	flexbox	ग्रिड	सबग्रिड
आयाम	1-D	2-D	विरासत में मिली 2-डी tracks
शक्ति	वितरण, संरेखण	स्पष्ट क्षेत्र, दोहराने योग्य tracks	क्रॉस-घटक संरेखण
व्यवस्था	न्यूनतम	पंक्तियाँ/कॉलम परिभाषित करें	पैरेंट ग्रिड आवश्यक
उदाहरण	नव बार, गोलियाँ	गैलरी, डैशबोर्ड	कार्ड फ़ुटर पृष्ठ ग्रिड से संरेखित

उदाहरण सहित उत्तर दें

.layout { display:grid; grid-template-columns: 1fr 3fr; gap:1rem; }
.card-meta { display:grid; grid-template-columns: subgrid; grid-column: 1 / -1; }

6) क्या तार्किक गुण अंतर्राष्ट्रीयकरण को बेहतर बनाते हैं? इसके लाभ और नुकसान बताइए।

तार्किक गुण, बाएँ और दाएँ जैसे भौतिक निर्देशों की जगह प्रवाह-सापेक्ष शब्दों, जैसे इनलाइन और ब्लॉक प्रारंभ या अंत, का उपयोग करते हैं। इससे एक ही स्टाइलशीट, शाखा नियमों के बिना, दाएँ-से-बाएँ भाषाओं और लंबवत लेखन मोड के अनुकूल हो जाती है। इसके लाभ बेहतर वैश्वीकरण, कम नियम दोहराव और अधिक लचीले घटक हैं। इसके नुकसानों में अपनाने के दौरान मानसिक बदलाव और लॉन्ग-टेल गुणों में कभी-कभी अंतराल शामिल हैं। अनुकूल margin-inline, padding-block, तथा inset-inline-start विभिन्न स्थानों पर एकसमान लेआउट प्राप्त करने के लिए रिक्ति और स्थिति निर्धारण हेतु।

उदाहरण सहित उत्तर दें

.alert { padding-inline:1rem; border-inline-start:4px solid currentColor; }
[dir="rtl"] .breadcrumb { float:inline-end; }

7) आप इसका उपयोग कब करेंगे? `clamp()` और आधुनिक व्यूपोर्ट इकाइयाँ ( `svh`, `lvh`, `dvh` ) द्रव प्रकार और अंतर के लिए?

उपयोग clamp(min, preferred, max) जब आप ऐसे मान चाहते हैं जो व्यूपोर्ट के विकास के साथ सुचारू रूप से स्केल हों, लेकिन कभी भी उचित सीमा से अधिक न हों। यह टाइपोग्राफी, पैडिंग और हीरो सेक्शन के लिए आदर्श है। आधुनिक व्यूपोर्ट इकाइयाँ मोबाइल ब्राउज़र UI क्रोम को संबोधित करती हैं, पूर्ण-स्क्रीन सेक्शन के लिए स्थिर ऊँचाई प्रदान करती हैं। इसके लाभों में कम मीडिया क्वेरी, एकसमान लय और बेहतर पहुँच शामिल हैं, जब इन्हें साथ में जोड़ा जाता है। rem.इसकी कमी यह है कि दृश्य इरादे और सुरक्षित टैप लक्ष्यों की पुष्टि करने के लिए विभिन्न उपकरणों पर परीक्षण करने की आवश्यकता होती है।

उदाहरण सहित उत्तर दें

:root { --step-0: clamp(1rem, 1.2vw + .9rem, 1.25rem); }
h1 { font-size: clamp(1.75rem, 4vw + 1rem, 2.5rem); }
.hero { min-height: 100dvh; padding-block: clamp(1rem, 3vw, 3rem); }

8) स्टैकिंग संदर्भ क्या है, और z-इंडेक्स और पोजिशनिंग कारक इसे कैसे बनाते या अलग करते हैं?

स्टैकिंग संदर्भ एक पृथक पेंटिंग क्षेत्र है जिसमें z-इंडेक्स तुलनाएँ केवल समान संदर्भ के सहोदरों के बीच ही की जाती हैं। नए संदर्भ मूल तत्व, स्थित तत्वों से उत्पन्न होते हैं z-index अन्य की तुलना में auto, और कुछ गुण जैसे transform, opacity < 1, filter, तथा position: fixedइन्हें समझने से "z-इंडेक्स काम नहीं कर रहा" जैसी आम समस्याओं का समाधान होता है, जहाँ कोई चाइल्ड अपने संदर्भ से बाहर की सामग्री को पार नहीं कर पाता। इसका फ़ायदा एनकैप्सुलेशन है; ख़तरा आकस्मिक अलगाव है जो इच्छित ओवरले को रोकता है।

उदाहरण सहित उत्तर दें

.header { position:relative; z-index:10; }
.modal { position:fixed; inset:0; z-index:1000; }
.card { transform: translateZ(0); /* new stacking context */ }

9) क्या मूल CSS नेस्टिंग उत्पादन के लिए तैयार है, और आप प्रीप्रोसेसर्स से कैसे माइग्रेट करेंगे?

देशी नेस्टिंग को व्यापक रूप से समर्थन प्राप्त है और यह नियम संबंधों को सहस्थित करके दोहराव को कम करता है जबकि कीping चयनकर्ता संक्षिप्त हैं। माइग्रेशन में घटकों को प्राथमिकता दी जानी चाहिए, गहरी वंशज श्रृंखलाओं को एक या दो स्तरों की नेस्टिंग से प्रतिस्थापित किया जाना चाहिए और मिक्सिन जैसे केवल प्रीप्रोसेसर-आधारित संरचनाओं को हटाया जाना चाहिए। इसके लाभों में छोटे बंडल और बेहतर डेवटूल्स मैप शामिल हैं।pingकमियों में अत्यधिक नेस्टिंग का प्रलोभन शामिल है, जिससे विशिष्टता बढ़ती है और पुन: उपयोग में बाधा आती है। सीमाएँ निर्धारित करें: गहराई सीमित करें, वर्ग-आधारित हुक रखें और इन्हें संयोजित करें। @layer ओवरराइड आदेश को नियंत्रित करने के लिए.

उदाहरण सहित उत्तर दें

.card {
    display:grid; gap:.75rem;
    & h3 { margin-block:.5rem; }
    & .actions { display:flex; gap:.5rem; }
    & .actions > button:hover { text-decoration:underline; }
}

10) क्या आप कंटेनर शैली क्वेरी का उपयोग कर सकते हैं, और उनके व्यावहारिक लाभ क्या हैं?

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

उदाहरण सहित उत्तर दें

/* Container emits a style signal */
.panel { --density: compact; container-type:inline-size; }

/* Child adapts when the container declares compact density */
@container style(--density: compact) {
    .item { padding:.5rem; gap:.5rem; }
}

11) CSS के लिए कौन से प्रदर्शन कारक मायने रखते हैं, और आप लेआउट थ्रैशिंग से कैसे बचते हैं?

CSS का प्रदर्शन इस बात पर निर्भर करता है कि ब्राउज़र को कितनी बार पुनर्गणना करनी होगी अंदाज, गणना ख़ाका, और पुनः रंगना या संयुक्त परतें। लेआउट थ्रैशिंग तब होती है जब लेआउट को प्रभावित करने वाले गुणों पर इंटरलीव्ड रीड और राइट बार-बार रीफ़्लो को मजबूर करते हैं। एक अनुशासित दृष्टिकोण चयनकर्ता की जटिलता को कम करना, विशिष्टता को कम रखना और केवल कंपोज़िटर-अनुकूल गुणों को एनिमेट करना है। बैच DOM लिखने से पहले रीड करता है, और ब्लास्ट रेडियस को सीमित करने के लिए कंटेनमेंट का लाभ उठाता है।

उदाहरण सहित उत्तर दें

पसंद करते हैं transform और opacity एनिमेशन के लिए; एनिमेशन से बचें width/height/top/left.
लागू करें content-visibility: auto ऑफ-स्क्रीन अनुभागों को प्रदान करना और contain-intrinsic-size.
उपयोग will-change केवल लंबे समय तक चलने वाले एनिमेशन के लिए परतों को बढ़ावा देने के लिए संयम से।
शैली पुनर्गणना को कम करने के लिए डीप डिसेन्डेंट चयनकर्ताओं को एकल-वर्ग हुक से प्रतिस्थापित करें।

.article-preview { content-visibility: auto; contain-intrinsic-size: 600px 400px; }
.fab { transition: transform .25s, opacity .25s; will-change: transform; }

12) कौन-सी CSS सुविधाएँ बिना किसी अतिरिक्त प्रयास के पहुँच क्षमता का समर्थन करती हैं? लाभ और उदाहरण बताएँ।

CSS अर्थपूर्ण HTML या ARIA की जगह नहीं ले सकता, लेकिन यह सुधार करता है फोकस दृश्यता, गति सुरक्षा, तथा विपरीत रणनीतियाँ। :focus-visible छद्म-वर्ग कीबोर्ड मोडैलिटी का पता चलने पर फ़ोकस प्रकट करता है, जिससे माउस उपयोगकर्ताओं के लिए दृश्य शोर को रोका जा सकता है जबकि कीबोर्ड उपयोगकर्ताओं के लिए संकेतों को संरक्षित रखा जा सकता है। मीडिया विशेषताएँ जैसे prefers-reduced-motion सम्मानजनक फ़ॉलबैक पैटर्न की अनुमति देता है, जबकि सावधानीपूर्वक डिज़ाइन किया गया रंग टोकन पर्याप्त कंट्रास्ट का समर्थन करता है। इसका लाभ विभिन्न उपयोगकर्ता प्राथमिकताओं में समावेशी डिफ़ॉल्ट है; सीमा यह है कि सिमेंटिक्स और कीबोर्ड नेविगेशन मार्कअप और स्क्रिप्टिंग द्वारा प्रदान किया जाना चाहिए।

उदाहरण सहित उत्तर दें

:focus-visible { outline: 3px solid Highlight; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .parallax, .video-bg { animation: none; transition: none; }
}

13) सीएसएस को शामिल करने के विभिन्न तरीके और प्रत्येक दृष्टिकोण के फायदे या नुकसान।

कई समावेशन रणनीतियाँ मौजूद हैं, जिनमें से प्रत्येक की अपनी विशिष्ट विशेषताएँ हैं जो कैशिंग, महत्वपूर्ण पथ और रखरखाव को प्रभावित करती हैं। बाहरी स्टाइलशीट चिंताओं को अलग रखती हैं और ब्राउज़र कैशिंग का लाभ उठाती हैं; इनलाइन <style> महत्वपूर्ण नियमों के लिए उपयुक्त है जिन्हें HTML के साथ लोड किया जाना चाहिए; इनलाइन style="" विशेषताएँ सर्वोच्च प्राथमिकता हैं, लेकिन पुन: उपयोग को नुकसान पहुँचाती हैं और विशिष्टता को बढ़ाती हैं। सही प्रकार का चयन करने से डेवलपर के एर्गोनॉमिक्स को बनाए रखते हुए पेलोड दोहराव कम होता है।

लाभ बनाम हानि (तुलना तालिका)

विधि	फायदे	नुकसान	विशिष्ट उपयोग
बाहरी स्टाइलशीट	ब्राउज़र कैशिंग; सभी पृष्ठों पर साझा किया गया	अतिरिक्त HTTP अनुरोध	वैश्विक डिजाइन प्रणाली
इन - लाइन `<style>`	अनुरोध को समाप्त करता है; महत्वपूर्ण CSS के लिए आदर्श	बड़े पैमाने पर प्रबंधन करना कठिन	तह के ऊपर की शैलियाँ
इन - लाइन `style=""`	तत्काल और उच्चतम विशिष्टता	पुनः उपयोग निषेध; शोरयुक्त HTML	एकबारगी ओवरराइड

उदाहरण सहित उत्तर दें

<link rel="stylesheet" href="/hi/assets/app.css" />
<style>/* minimal critical rules for LCP elements */</style>
<div class="btn" style="--danger: #b00020">Delete</div>

14) इनमें क्या अंतर है `relative`, `absolute`, `fixed`, तथा `sticky` उपयोग-मामले का मार्गदर्शन प्रदान करें।

स्थिति निर्धारण यह निर्धारित करता है कि तत्वों को प्रवाह में कैसे रखा जाता है और वे स्क्रॉल और पूर्वजों के साथ कैसे अंतःक्रिया करते हैं। relative प्राकृतिक प्रवाह को बनाए रखता है लेकिन दृश्य बॉक्स को ऑफसेट करता है; इसका उपयोग अक्सर एंकरिंग संदर्भ स्थापित करने के लिए किया जाता है। absolute प्रवाह से एक तत्व को हटाता है, इसे निकटतम स्थित पूर्वज के सापेक्ष स्थिति में रखता है, जो प्रतिक्रियाशीलता की कीमत पर परिशुद्धता प्रदान करता है। fixed व्यूपोर्ट में तत्वों को पिन करता है, जो लगातार बार के लिए आदर्श है, लेकिन ऑन-स्क्रीन कीबोर्ड और सुरक्षित क्षेत्रों पर विचार करना चाहिए। sticky स्क्रॉल थ्रेसहोल्ड के आधार पर स्थिर और निश्चित के बीच टॉगल करता है, अनुभाग हेडर और इन-पेज इंडेक्स प्रदान करता है।

उदाहरण सहित उत्तर दें

.badge-anchor { position: relative; }
.badge { position: absolute; inset: -6px -6px auto auto; }
.header { position: sticky; top: 0; background: var(--bg); }
.toast { position: fixed; inset: auto 1rem 1rem auto; }

15) कौन से कारक एक रखरखाव योग्य सीएसएस आर्किटेक्चर (बीईएम, आईटीसीएसएस, उपयोगिताओं, परतें) को आकार देते हैं, और घटक शैली का जीवन चक्र क्या है?

एक रखरखाव योग्य वास्तुकला संतुलन विशिष्टता अनुशासन, पूर्वानुमान योग्य लेयरिंग, और स्थिर नामकरणबीईएम स्पष्ट हुक प्रदान करता है, आईटीसीएसएस निम्न-स्तरीय रीसेट से उच्च-स्तरीय उपयोगिताओं के लिए नियमों का आदेश देता है, उपयोगिता-प्रथम दृष्टिकोण बाध्य प्राइमिटिव्स के साथ पुनरावृत्ति को गति देता है, और @layer कोडबेस में ओवरराइड क्रम को औपचारिक रूप देता है। एक घटक जीवनचक्र आमतौर पर टोकन परिभाषा से शुरू होता है, आधार और घटक नियमों तक आगे बढ़ता है, वेरिएंट और स्थितियाँ जोड़ता है, और अवमूल्यन नीतियों के साथ समाप्त होता है जो परिवर्तनों को तोड़ने से बचाती हैं। इसका लाभ टीमों में एकरूप व्यवहार है; इसका समझौता अग्रिम योजना और शासन है।

उदाहरण सहित उत्तर दें

टोकन :root (अंतर, रंग, त्रिज्या).
इसमें रखे गए घटक @layer components एकल-वर्ग चयनकर्ताओं के साथ.
स्पष्टता के लिए डेटा विशेषताओं या कंटेनर शैली प्रश्नों के माध्यम से वेरिएंट।

@layer reset, base, components, utilities;
@layer components { .card { border-radius: var(--radius-2); } }

16) शैडो DOM CSS स्कोर को कैसे प्रभावित करता है?pingऔर, पार्ट्स को स्टाइल करने के अलग-अलग तरीके क्या हैं?

शैडो DOM मार्कअप और स्टाइलिंग को समाहित करता है, आकस्मिक रिसाव को रोकता है और घटक स्थिरता सुनिश्चित करता है। लेखक जानबूझकर सतहों को उजागर कर सकते हैं: ::part() घटक द्वारा निर्यात किए गए नामित भागों को लक्षित करता है, जबकि ::slotted() स्लॉट्स में लाइट-DOM नोड्स को निर्दिष्ट शैलियाँ। इसके लाभों में मज़बूत एनकैप्सुलेशन और पूर्वानुमानित थीमिंग सतहें शामिल हैं; नुकसानों में आंतरिक भागों तक सीमित पहुँच शामिल है जब तक कि घटक डिज़ाइनर पुर्जे उपलब्ध न कराएँ, और उपभोक्ताओं के लिए उन पुर्जों का दस्तावेज़ीकरण करने की आवश्यकता शामिल है।

उदाहरण सहित उत्तर दें

/* Theme an exposed component part */
custom-rating::part(star) { color: gold; }
file-card::slotted(img) { border-radius: .5rem; }

17) सीएसएस बॉक्स मॉडल की विशेषताएं क्या हैं, और ऐसा क्यों होता है? `box-sizing: border-box` मामला?

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

उदाहरण सहित उत्तर दें

*, *::before, *::after { box-sizing: border-box; }
.card { width: 22rem; padding: 1rem; border: 1px solid #ddd; }

18) आप इसका उपयोग कहां करेंगे? `@supports` प्रगतिशील वृद्धि के लिए क्या किया जा सकता है, और इसके क्या लाभ हैं?

@supports CSS में फ़ीचर डिटेक्शन को सक्षम बनाता है, जिससे बेसलाइन को जहाँ भी उपलब्ध हो, सशर्त संवर्द्धन के साथ हर जगह कार्य करने की अनुमति मिलती है। यह पैटर्न कंटेनर क्वेरीज़ जैसी आधुनिक सुविधाओं को अपनाने पर जोखिम को कम करता है, :has(), या सबग्रिड। इसके मुख्य लाभ हैं सुंदर डिग्रेडेशन और स्पष्ट माइग्रेशन पथ; नुकसानों में कुछ समय के लिए दोहरे कोड पथ बनाए रखना शामिल है। पहले बुनियादी व्यवहार की संरचना करें, फिर उन्नत व्यवहार को लक्षित व्यवहार के अंदर लपेटें। @supports ब्लॉक ताकि विरासत वातावरण पीछे न हट जाए।

उदाहरण सहित उत्तर दें

.card { display: block; }
@supports (display: grid) {
     .card { display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; }
}

19) आपको कौन सी सीएसएस इकाइयाँ चुननी चाहिए, और उनके बीच क्या अंतर है?

इकाई का चयन स्केलिंग, पठनीयता और पहुंच को प्रभावित करता है। rem रूट फ़ॉन्ट आकार के साथ स्केल करता है, जो इसे वैश्विक प्रकार और रिक्ति के लिए आदर्श बनाता है; em वर्तमान तत्व के साथ स्केल करता है, जो घटकों के अंदर उपयोगी है लेकिन अप्रत्याशित रूप से मिश्रित हो सकता है। ch "0" ग्लिफ़ की चौड़ाई को दर्शाता है और माप (लाइन की लंबाई) के लिए उत्कृष्ट है। px डिवाइस पिक्सेल संरेखित है और हेयरलाइन के लिए सुरक्षित है, लेकिन उपयोगकर्ता की प्राथमिकताओं पर प्रतिक्रिया नहीं करता है। लाइन-ऊँचाई इकाइयाँ जैसे lh और rlh टाइपोग्राफिक ग्रिड में रिक्त स्थान बांधकर ऊर्ध्वाधर लय बनाए रखने में मदद करें।

उदाहरण सहित उत्तर दें

उपयोग max-width: 65ch पठनीय पैराग्राफ के लिए.
वैश्विक रिक्ति को के गुणजों के रूप में सेट करें rem उपयोगकर्ता की प्राथमिकताओं का सम्मान करना।
उपयोग em घटक आंतरिक के लिए जैसे आइकन बटन जो फ़ॉन्ट आकार के साथ स्केल करते हैं।

.prose { max-width: 65ch; margin-inline: auto; }
.btn { padding-inline: 1em; }

20) क्या सीएसएस काउंटर संरचित सामग्री में मदद करते हैं, और उनके लाभ और नुकसान क्या हैं?

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

उदाहरण सहित उत्तर दें

article { counter-reset: h2; }
h2::before { counter-increment: h2; content: "Section " counter(h2) ". "; }
figure { counter-increment: fig; }
figcaption::before { content: "Figure " counter(fig) ": "; }

21) आपको CSS के साथ कब एनिमेट करना चाहिए, और प्रदर्शन के लिए कौन से गुण सबसे सुरक्षित हैं?

एनिमेशन तब सबसे ज़्यादा लचीले होते हैं जब वे कंपोज़िटर-फ्रेंडली प्रॉपर्टीज़ पर काम करते हैं जो रिलेआउट और रीपेंट से बचते हैं। CSS डिक्लेरेटिव, स्टेट-ड्रिवन ट्रांज़िशन में उत्कृष्ट है जहाँ ब्राउज़र फ़्रेम शेड्यूलिंग को ऑप्टिमाइज़ कर सकता है। सबसे सुरक्षित विकल्प हैं transform और opacity, जो आमतौर पर कंपोज़िटर थ्रेड पर चलते हैं और मुख्य थ्रेड के काम को न्यूनतम करते हैं। माइक्रोइंटरैक्शन, होवर ट्रांज़िशन और सरल प्रवेश प्रभावों के लिए CSS का उपयोग करें। लेआउट को प्रभावित करने वाले गुणों जैसे एनिमेट करने से बचें width, height, top, तथा left क्योंकि वे लेआउट पुनर्गणना को ट्रिगर करते हैं। जब ज्यामिति परिवर्तन आवश्यक हों, तो परिवर्तन-आधारित भ्रमों पर विचार करें या कोमल युग्मन करें max-height अतिप्रवाह प्रबंधन और सावधानीपूर्वक पहुंच-योग्यता फ़ॉलबैक के साथ संक्रमण।

उदाहरण सहित उत्तर दें

.dialog { transform: translateY(8px); opacity: 0; }
.dialog[open] {
   transform: translateY(0);
   opacity: 1;
   transition: transform .2s ease, opacity .2s ease;
}
@media (prefers-reduced-motion: reduce) {
   .dialog { transition: none; }
}

22) क्या CSS उत्तरदायी छवियों की सहायता कर सकता है, और इसके लिए विभिन्न तरीके क्या हैं?

HTML के माध्यम से अंतर्निहित छवि चयन का स्वामित्व है srcset और sizes, लेकिन सजावटी इमेजरी, पृष्ठभूमि की कला निर्देशन और ऑब्जेक्ट फिटिंग के लिए CSS अभी भी महत्वपूर्ण है। image-set() पृष्ठभूमि छवियों के लिए कई रिज़ॉल्यूशन प्रदान करने के लिए, और पसंद करते हैं object-fit और object-position अपने बॉक्स के भीतर प्रतिस्थापित तत्वों को नियंत्रित करने के लिए। इन्हें कंटेनर या मीडिया क्वेरीज़ के साथ संयोजित करके क्रॉप, घनत्व या फ़ोकल पॉइंट्स को अनुकूलित करें। इसका लाभ मार्कअप प्रसार के बिना सटीक दृश्य नियंत्रण है; नुकसान यह है कि CSS पृष्ठभूमि छवियों में आंतरिक आकार-निर्धारण का अभाव होता है और सहायक तकनीकों द्वारा घोषित नहीं की जाती हैं, इसलिए सामग्री छवियों को HTML में ही रहना चाहिए।

लाभ बनाम हानि (तुलना तालिका)

दृष्टिकोण	विशेषताएँ	फायदे	नुकसान	विशिष्ट उपयोग
एचटीएमएल `srcset/sizes`	आंतरिक चयन	सही शब्दार्थ; सर्वोत्तम प्रदर्शन	मार्कअप परिवर्तन आवश्यक है	सामग्री इमेजरी
सीएसएस `image-set()`	पृष्ठभूमि रिज़ॉल्यूशन सेट	प्रति ब्रेकपॉइंट आसान स्वैप	कोई आंतरिक आकार नहीं	सजावटी पृष्ठभूमि
`object-fit` / `position`	Box रोकथाम नियंत्रण	लगातार फसलping	पृष्ठभूमि छवियों के लिए नहीं	थंबनेल, अवतार

उदाहरण सहित उत्तर दें

.hero {
	background-image: image-set(url(bg-1x.jpg) 1x, url(bg-2x.jpg) 2x);
	background-size: cover;
}
.thumb { width: 240px; height: 160px; object-fit: cover; object-position: 50% 40%; }

23) क्या एक Javaस्क्रिप्ट-मुक्त डार्क मोड संभव है, और कौन से कारक इसे मजबूत बनाते हैं?

A Javaकस्टम गुणों को इसके साथ जोड़कर स्क्रिप्ट-मुक्त डार्क मोड संभव है। prefers-color-scheme मीडिया सुविधा और उपयोगकर्ता ओवरराइड के लिए एक वैकल्पिक HTML विशेषता। रूट पर सिमेंटिक टोकन परिभाषित करें, मीडिया क्वेरी के भीतर डार्क वेरिएंट प्रदान करें, और [data-theme] स्पष्ट उपयोगकर्ता विकल्प या एंटरप्राइज़ ब्रांडिंग का सम्मान करने के लिए ओवरराइड करें। यह दृष्टिकोण जटिलता को कम करता है, झिलमिलाहट को कम करता है, और कैस्केड को प्रामाणिक बनाए रखता है। जब कोई स्पष्ट ओवरराइड मौजूद नहीं होता है, तो सिस्टम प्राथमिकताओं पर निर्भरता सीमित होती है। टोकन का दस्तावेज़ीकरण करें, पर्याप्त कंट्रास्ट सुनिश्चित करें, और दोनों मोड में फ़ोकस आउटलाइन और स्थितियों का परीक्षण करें।

उदाहरण सहित उत्तर दें

:root { --bg: #ffffff; --fg: #0b0d10; --accent: #4b6fff; }
@media (prefers-color-scheme: dark) {
:root { --bg:#0b0d10; --fg:#e7edf3; --accent:#8aa4ff; }
}
[data-theme="light"] { --bg:#ffffff; --fg:#0b0d10; }
[data-theme="dark"] { --bg:#0b0d10; --fg:#e7edf3; }
body { background: var(--bg); color: var(--fg); }
a { color: var(--accent); }

24) क्या डीप सेलेक्टर नेस्टिंग और उच्च विशिष्टता के कोई नुकसान हैं, और कम विशिष्टता वाले दृष्टिकोण से क्या लाभ हैं?

डीप नेस्टिंग और उच्च विशिष्टता शैलियों को भंगुर बनाती है, रिफैक्टर को धीमा करती है, और अनजाने में ओवरराइड होने का जोखिम बढ़ाती है। ऐसे चयनकर्ता CSS को दस्तावेज़ संरचना से कसकर जोड़ते हैं, जिससे मार्कअप विकसित होने पर रखरखाव लागत बढ़ जाती है। कम-विशिष्टता वाला दृष्टिकोण सिंगल-क्लास हुक, फ्लैट आर्किटेक्चर और @layer ओवरराइड्स को पूर्वानुमानित रूप से प्रबंधित करने के लिए ऑर्डरिंग। इसके लाभों में स्पष्ट स्वामित्व, सरल मिलान के कारण तेज़ रेंडरिंग और टीमों के बीच आसान संयोजन शामिल हैं। नेस्टिंग गहराई पर सीमाएँ निर्धारित करें, अनावश्यक होने पर तत्वों के नामों से वर्गों को योग्य बनाने से बचें, और बचने के रास्ते प्रदान करें।

उदाहरण सहित उत्तर दें

/* Fragile: structure-dependent */
.main .sidebar .card > h3.title { ... }

/* Resilient: single-class hook, layer-controlled */
@layer components { .card-title { ... } }

25) कौन सी कार्यप्रणाली - बीईएम, आईटीसीएसएस, या उपयोगिता-प्रथम - विभिन्न टीमों के लिए उपयुक्त है, और इसके क्या फायदे और नुकसान हैं?

कार्यप्रणाली का चयन टीम के आकार, समीक्षा संस्कृति और उत्पाद की अस्थिरता पर निर्भर करता है। कार्यलय स्पष्ट, पठनीय हुक प्रदान करता है जो बड़ी टीमों में स्केल करता है। आईटीसीएसएस निम्न-स्तरीय रीसेट से लेकर ऑब्जेक्ट्स और घटकों से उपयोगिताओं तक कोडबेस को व्यवस्थित करता है, कैस्केड के साथ संरेखित करता है। उपयोगिता-प्रथम यह सीमित प्राइमिटिव्स के साथ डिलीवरी को तेज़ करता है और कस्टम सेलेक्टर्स की तुलना में कंपोज़िशन को प्राथमिकता देता है। हाइब्रिड आम हैं: क्रम के लिए ITCSS, जहाँ आवश्यक हो वहाँ नामकरण के लिए BEM, और एकमुश्त समायोजन के लिए यूटिलिटीज़। इन ट्रेड-ऑफ़ में बहुवचनता (BEM), अग्रिम योजना (ITCSS), और संभावित वर्ग प्रसार (यूटिलिटी-फर्स्ट) शामिल हैं।

अंतर (तुलना तालिका)

विधि	विशेषताएँ	फायदे	नुकसान	सबसे अच्छा फिट
कार्यलय	.block__elem–mod नामकरण	पूर्वानुमानित हुक	विस्तृत चयनकर्ता	बड़ी टीमें, डिज़ाइन प्रणालियाँ
आईटीसीएसएस	स्तरित वास्तुकला	ओवरराइड आदेश साफ़ करें	ओवरहेड योजना	बहु-टीम मोनोरेपो
उपयोगिता-प्रथम	Atomआईसी कक्षाएं	गति, स्थिरता	वर्ग परिवर्तन का जोखिम	तीव्र प्रोटोटाइपpingऐप्स

26) डिज़ाइन से कोड तक स्पेसिंग और टाइपोग्राफी टोकन के जीवनचक्र को उदाहरणों के साथ समझाइए।

टोकन जीवनचक्र डिज़ाइन में स्केल विकल्पों, अनुपातों और पहुँच-योग्यता लक्ष्यों के साथ शुरू होता है। ये नामित, संस्करणित कस्टम गुण बन जाते हैं जो अर्थपूर्ण गुणों का प्रतिनिधित्व करते हैं। प्रकार (उदाहरण के लिए, --space-2, --font-scale-1 ) के बजाय, मूल मानों का उपयोग करें। टोकन मूल शैलियों में, फिर घटकों और प्रकारों में प्रवाहित होते हैं, और अंततः सिस्टम के विकसित होने के साथ-साथ अप्रचलित या उपनामों के माध्यम से पुनर्निर्देशित हो जाते हैं। लाभों में सुसंगत लय, छोटे अंतर और बेहतर क्रॉस-प्लेटफ़ॉर्म समता शामिल हैं; नुकसानों में प्रारंभिक शासन ओवरहेड और स्पष्ट दस्तावेज़ीकरण की आवश्यकता शामिल है। टोकन को सार्वजनिक API के रूप में मानें: सीमाएँ निर्धारित करें, उपयोग दिशानिर्देशों से मैप करें, और माइग्रेशन नोट्स प्रदान करें।

उदाहरण सहित उत्तर दें

:root{
	--space-1:.25rem; --space-2:.5rem; --space-3:1rem;
	--font-0:1rem; --font-1:1.125rem; --font-2:1.25rem;
}
.card{ padding: var(--space-3); }
.card h2{ font-size: var(--font-2); margin-block: var(--space-2); }

/* deprecation alias */
:root{ --space-small: var(--space-2); }

27) कैसे करें `:focus-visible`, `:focus-within`, तथा `:target` क्या ये भिन्न हैं, और प्रत्येक क्या लाभ प्रदान करता है?

ये चयनकर्ता विशिष्ट अंतःक्रिया और नेविगेशन विशेषताओं को संबोधित करते हैं। :focus-visible यह केवल तभी फोकस प्रदर्शित करता है जब इनपुट मोडैलिटी कीबोर्ड नेविगेशन का सुझाव देती है, जिससे विसंगति कम हो जाती है।tracमाउस उपयोगकर्ताओं के लिए रिंग बजती है और साथ ही एक्सेसिबिलिटी को भी सपोर्ट करती है। :focus-within जब किसी वंशज पर फोकस होता है, तो यह कंटेनर से मेल खाता है, जिससे फॉर्म फ़ील्ड जैसे कंपोजिट के लिए समूहीकृत हाइलाइटिंग सक्षम होती है। :target URL फ़्रैगमेंट द्वारा संदर्भित तत्व से मेल खाता है, जिससे स्किप लिंक और बिना स्क्रिप्ट के पृष्ठ-अंदर नेविगेशन की सुविधा मिलती है। सोच-समझकर संयोजित होने पर, ये ओरिएंटेशन में सुधार करते हैं, संज्ञानात्मक भार कम करते हैं, और कुशल कीबोर्ड वर्कफ़्लो का समर्थन करते हैं।

उदाहरण सहित उत्तर दें

:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
.field:focus-within { box-shadow: 0 0 0 3px color-mix(in oklab, currentColor 30%, transparent); }
:target { scroll-margin-top: 6rem; }

28) इसके क्या लाभ और हानियाँ हैं? `content-visibility` और बड़े दस्तावेज़ों पर सी.एस.एस. नियंत्रण?

content-visibility: auto ऑफ-स्क्रीन तत्वों के लिए रेंडरिंग कार्य को तब तक के लिए टाल देता है जब तक कि वे व्यूपोर्ट के पास न आ जाएँ, जिससे लंबी फ़ीड पर प्रारंभिक रेंडरिंग लागत में नाटकीय रूप से कमी आती है। अतिरिक्त नियंत्रण ( contain: layout paint style ) पृष्ठ के शेष भाग पर उपवृक्ष के प्रभाव को सीमित करता है, पुनर्प्रवाह क्षेत्र को छोटा करता है और बार-बार होने वाले अद्यतनों की गति को बढ़ाता है। इसके लाभ बेहतर प्रतिक्रियाशीलता और कम मेमोरी उपयोग हैं; नुकसानों में संभावित पॉप-इन प्रभाव शामिल हैं यदि आंतरिक आकार अज्ञात हैं और जटिलताएँ हैं जब Javaस्क्रिप्ट का आकार मापना ज़रूरी है। प्रदान करके कम करें contain-intrinsic-size और केवल आवश्यक होने पर ही माप करें।

उदाहरण सहित उत्तर दें

.feed-item{
	content-visibility: auto;
	contain-intrinsic-size: 600px 400px; /* reserve space to prevent layout shift */
	contain: layout paint style;
}

29) आप न्यूनतम ब्रेकपॉइंट के साथ एक उत्तरदायी ग्रिड कैसे बनाते हैं? `minmax()` और `auto-fit/auto-fill`?

लचीले लेआउट को परिभाषित करके एक मजबूत लेआउट प्राप्त किया जा सकता है। tracऐसे ks जो अधिकतम चौड़ाई तक फैलते हैं और फिर स्वचालित रूप से रैप हो जाते हैं। repeat(auto-fit, minmax(min, 1fr)) यह जितनी जगह में फिट हो सके उतने कॉलम बनाता है, खाली कॉलम को बंद कर देता है। tracअसुविधाजनक अंतरालों से बचने के लिए ks का उपयोग करें। इससे स्पष्ट ब्रेकपॉइंट पर निर्भरता कम हो जाती है, साथ ही स्क्रीन के विभिन्न आकारों में सामंजस्यपूर्ण घनत्व बना रहता है। यह दृष्टिकोण गैलरी, कार्ड और उत्पाद सूचियों के लिए आदर्श है। आरामदायक न्यूनतम मान प्रदान करें (उदाहरण के लिए, 16rem ) और लय बनाए रखने के लिए अंतराल पर निर्भर करते हैं।

उदाहरण सहित उत्तर दें

.gallery{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
}

30) कौन से कारक यह निर्धारित करते हैं कि कब चुनना है `gap` बनाम आइटमों के बीच अंतर के लिए मार्जिन?

gap यह प्रवाह-जागरूक स्पेसिंग है जो फ्लेक्सबॉक्स और ग्रिड के साथ मूल रूप से काम करती है, और मार्जिन-संकुचित एज केस के बिना सममित पृथक्करण लागू करती है। यह इसके लिए आदर्श है घटक में स्पेसिंग इसलिए ज़रूरी है क्योंकि इससे पहले/आखिरी चाइल्ड अलाइनमेंट पर असर नहीं पड़ता या दाएँ-से-बाएँ लेआउट में दिशात्मक हैक्स की ज़रूरत नहीं पड़ती। मार्जिन बेहतर होते हैं बाहरी स्पेसिंग जो किसी घटक के सार्वजनिक API का हिस्सा हो या जब स्पेसिंग को गैर-Flex/Grid संदर्भों के साथ इंटरैक्ट करना आवश्यक हो। अप्रत्याशित ओवरलैप से बचने और ओवरराइड नियमों को न्यूनतम रखने के लिए, स्कोप, स्वामित्व और लेआउट सिमेंटिक्स के आधार पर चुनें।

अंतर (तुलना तालिका)

कसौटी	`gap`	हाशिये
विस्तार	लेआउट कंटेनर के आंतरिक	भाई-बहनों और पड़ोसियों के बीच बाहरी
दिशात्मकता	तार्किक और सममित	RTL समायोजन की आवश्यकता हो सकती है
ढहता हुआ व्यवहार	लागू नहीं होता	मार्जिन के पतन के अधीन
सबसे अच्छा उपयोग	फ्लेक्स/ग्रिड चाइल्ड स्पेसिंग	घटक बाहरी रिक्ति और लेआउट contracts

उदाहरण सहित उत्तर दें

.toolbar{ display:flex; gap:.5rem; } /* internal spacing */
.card{ margin-block: 1rem; } /* external spacing contract */

31) किसी पर निर्भर रहने से क्या नुकसान होते हैं? `!important`, और सुरक्षित विकल्प क्या हैं?

अति प्रयोग !important यह कैस्केड के प्राकृतिक जीवनचक्र को दरकिनार कर देता है, जिससे आशय अस्पष्ट हो जाता है, वैध ओवरराइड अवरुद्ध हो जाते हैं, और भविष्य के योगदानकर्ताओं को विशिष्टता को और भी आगे बढ़ाने के लिए बाध्य होना पड़ता है। यह परीक्षणीयता को भी कमज़ोर करता है क्योंकि नियम क्रमबद्धता और @layer रणनीतियाँ। पेशेवर विकल्प पूर्वानुमानित ओवरराइड पथ डिज़ाइन करना है: चयनकर्ता विशिष्टता को कम करना, नीतियों को एक समर्पित उपयोगिता परत में रखना, या स्रोतों को पुनर्व्यवस्थित करना @layer घोषणाओं को हथियार बनाने के बजाय। !important जानबूझकर उपयोगकर्ता द्वारा संचालित मामलों के लिए जैसे कि उच्च-विपरीत या मजबूर-दृश्यता उपयोगिताएँ जो एक प्रलेखित एस्केप हैच के रूप में कार्य करती हैं।

उदाहरण सहित उत्तर दें

/* Deliberate, documented utility only */
@layer utilities {
	.sr-only { position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; }
}

/* Prefer layer order instead of !important */
@layer base, components, utilities;
@layer utilities { .hidden { display:none; } }

32) प्रदर्शन या रखरखाव के लिए किस प्रकार के चयनकर्ताओं से बचना चाहिए और क्यों?

पूरे DOM में दस्तावेज़ की गहराई या विशेषताओं से कसकर जुड़े चयनकर्ता जोखिम भरे होते हैं। लंबी वंशज श्रृंखलाएँ मिलान लागत बढ़ाती हैं और मार्कअप पर कमज़ोर निर्भरताएँ पैदा करती हैं। व्यापक विशेषता चयनकर्ता, जैसे [class*="btn"] or [data-*] बिना स्कोping बड़े सबट्री को स्कैन कर सकता है। ओवरक्वालिफाइड सेलेक्टर जैसे ul.nav > li > a.link इससे पुन: प्रयोज्यता कम हो जाती है और ओवरराइड जटिल हो जाते हैं। एक रखरखाव योग्य दृष्टिकोण सिंगल-क्लास हुक्स, स्पष्ट नियंत्रण वाले स्टेट एट्रिब्यूट्स को प्राथमिकता देता है।tracटीएस (उदाहरण के लिए, [data-state="open"] ), और छोटे रिश्ते ( > , + ) घटक सीमाओं के अंदर। इससे पठनीयता में सुधार होता है, कैस्केड संघर्ष कम होते हैं, और रिफैक्टरिंग में तेज़ी आती है।

उदाहरण सहित उत्तर दें

/* Fragile and slow */
.main .sidebar .list .item > a[href*="/products"] { ... }

/* Resilient */
.nav { display:flex; gap:.5rem; }
.nav__link { ... }
[data-state="open"] .nav__link--active { text-decoration: underline; }

33) आपको कब चुनना चाहिए `@layer` उपयोगिता बनाम घटक वेरिएंट, और लाभ क्या हैं?

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

उदाहरण सहित उत्तर दें

@layer reset, base, components, utilities;

/* Variant: part of the API */
@layer components {
	.btn[data-variant="primary"] { background: var(--brand-600); color: #fff; }
}

/* Utility: composition escape hatch */
@layer utilities {
	.mt-4 { margin-block-start: 1rem; }
	.inline { display:inline; }
}

34) क्या ग्रिड सभी फ्लेक्सबॉक्स उपयोग को प्रतिस्थापित कर सकता है, या दोनों को रखने के लिए अंतर-संचालित कारण हैं?

ग्रिड और फ्लेक्सबॉक्स ऑर्थोगोनल समस्याओं को हल करते हैं। ग्रिड स्पष्ट नियंत्रण के साथ द्वि-आयामी नियंत्रण प्रदान करता है। tracफ्लेक्सबॉक्स जटिल पेज फ्रेम, डैशबोर्ड और कार्ड गैलरी को सरल बनाने के लिए k परिभाषाओं का उपयोग करता है। फ्लेक्सबॉक्स सिंगल-एक्सिस डिस्ट्रीब्यूशन, मुख्य अक्ष के साथ आंतरिक साइजिंग और पंक्तियों या स्तंभों के भीतर अलाइनमेंट में उत्कृष्ट है, जो टूलबार, मेनू और चिप्स के लिए आदर्श है। हर जगह ग्रिड को लागू करने से एर्गोनॉमिक अलाइनमेंट व्यवहार प्रभावित होता है, जबकि मैक्रो लेआउट के लिए फ्लेक्सबॉक्स को लागू करने से कमजोर रैपर बन जाते हैं। परिपक्व सिस्टम जानबूझकर दोनों को मिलाते हैं, कभी-कभी एक ही कंपोनेंट के भीतर, उस इंजन का चयन करते हैं जिसकी विशेषताएं समस्या के अनुरूप हों।

अंतर (तुलना तालिका)

कसौटी	ग्रिड	flexbox
आयाम	दो आयामी tracks	एक-आयामी प्रवाह
शक्ति	स्पष्ट क्षेत्र, अंतराल, सबग्रिड	वितरण, संरेखण, पुनर्व्यवस्था
सबसे अच्छा उपयोग	पृष्ठ फ़्रेम, डैशबोर्ड	टूलबार, नेविगेशन, चिप सूचियाँ

उदाहरण सहित उत्तर दें

.frame { display:grid; grid-template-columns: 1fr 3fr; gap: 1rem; }
.toolbar { display:flex; align-items:center; gap:.5rem; }

35) उपयोग करने के क्या लाभ और नुकसान हैं? `aspect-ratio` बनाम पैडिंग हैक्स?

aspect-ratio रैपर एलिमेंट्स या छद्म-एलिमेंट हैक्स के बिना कार्ड, मीडिया और थंबनेल के आकार बनाए रखने का एक घोषणात्मक, स्व-दस्तावेजीकरण तरीका प्रदान करता है। यह ऑब्जेक्ट फ़िटिंग के साथ आसानी से एकीकृत हो जाता है और ग्रिड और फ्लेक्स लेआउट में पूर्वानुमानित रूप से काम करता है। इसके मुख्य नुकसान पुराने वातावरणों में विरासत ब्राउज़र अंतराल और पिछले हैक-आधारित CSS पर पुनर्विचार करने की आवश्यकता है। पैडिंग-टॉप हैक्स बहुत पुराने इंजनों के लिए एक विकल्प बने हुए हैं, लेकिन DOM जटिलता को बढ़ाते हैं और स्पष्टता को कम करते हैं। प्राथमिकता दें aspect-ratio रखरखाव के लिए, और इसे गेट के साथ @supports केवल तभी जब लेगेसी कवरेज उपलब्ध होtracवास्तव में आवश्यक।

उदाहरण सहित उत्तर दें

.thumb { aspect-ratio: 16 / 9; object-fit: cover; }
@supports not (aspect-ratio: 1) {
    .thumb-wrap { position: relative; }
    .thumb-wrap::before { content:""; display:block; padding-top:56.25%; }
    .thumb { position:absolute; inset:0; }
}

36) आप एक लचीला स्टिकी हेडर कैसे बनाएंगे जो सुरक्षित क्षेत्रों और मोबाइल व्यूपोर्ट्स का सम्मान करता हो?

एक लचीला हेडर संतुलन position: sticky अनुभाग-स्तरीय एंकरों के लिए position: fixed केवल तभी जब डिज़ाइन वैश्विक स्थायित्व की माँग करता हो। सुरक्षित-क्षेत्र इनसेट, नॉच्ड डिवाइस और आधुनिक व्यूपोर्ट इकाइयों जैसे सिस्टम UI के साथ ओवरलैप को रोकते हैं। dvh ब्राउज़र क्रोम के दिखाई देने या छिपने पर ढहने से बचें। इस रणनीति में एक स्पष्ट स्टैकिंग संदर्भ निर्दिष्ट करना, लेआउट में बदलाव को रोकने के लिए स्थान आरक्षित करना और प्रवेश प्रभावों के लिए गति प्राथमिकताएँ प्रदान करना शामिल है। कीबोर्ड और लैंडस्केप ओरिएंटेशन में परीक्षण करना महत्वपूर्ण है, क्योंकि वर्चुअल कीबोर्ड, यदि ठीक से नियंत्रित नहीं किए गए तो स्थिर तत्वों को अवरुद्ध कर सकते हैं।

उदाहरण सहित उत्तर दें

.header {
	position: sticky;
	top: 0;
	padding-top: env(safe-area-inset-top);
	background: var(--bg);
	z-index: 100;
	box-shadow: 0 1px 0 rgba(0,0,0,.08);
}
main { min-height: 100dvh; scroll-padding-top: 4rem; }

विचारणीय बातें (त्वरित तालिका)

फ़ैक्टर	सिफारिश
सुरक्षित क्षेत्र	उपयोग `env(safe-area-inset-*)`
व्यूपोर्ट	पसंद करते हैं `dvh` पूर्ण-ऊंचाई वाले क्षेत्रों के लिए
Z- इंडेक्स	एक ओवरले स्केल बनाएं और उसका दस्तावेजीकरण करें

37) घटकों में घनत्व स्केलिंग और आकार स्केलिंग के बीच क्या अंतर है, और प्रत्येक का उपयोग कब किया जाना चाहिए?

घनत्व स्केलिंग संशोधित करता है रिक्ति, अंतराल और रेखा-ऊंचाई जबकि कीping फ़ॉन्ट आकार स्थिर रहते हैं, जिससे टाइपोग्राफिक पदानुक्रम को बदले बिना कॉम्पैक्ट, आरामदायक या विशाल वेरिएंट तैयार होते हैं। आकार स्केलिंग से परिवर्तन होता है। मुद्रण पैमाना हीशीर्षकों, मुख्य पाठ और नियंत्रणों को बड़े या छोटे चरणों में स्थानांतरित करना। एंटरप्राइज़ UI के लिए घनत्व स्केलिंग का उपयोग करें जहाँ सूचना घनत्व कार्य के अनुसार भिन्न होता है; डिवाइस की दूरी, पहुँच आवश्यकताओं या ब्रांड आवश्यकताओं के अनुसार आकार स्केलिंग का उपयोग करें। सतहों में एकरूपता सुनिश्चित करने के लिए दोनों को प्रलेखित श्रेणियों वाले टोकन के रूप में मानें।

उदाहरण सहित उत्तर दें

/* Density */
[data-density="compact"] .btn { padding-block: .25rem; gap: .25rem; }
/* Size (type) */
:root { --font-0: 1rem; --font-1: 1.125rem; }
[data-size="lg"] { --font-0: 1.125rem; --font-1: 1.25rem; }

38) भारी वैश्विक रीसेट से कौन से नुकसान उत्पन्न होते हैं, और सुरक्षित विकल्प क्या हैं?

आक्रामक रीसेट अनजाने में फ़ोकस आउटलाइन, सूची सिमेंटिक्स और फ़ॉर्म नियंत्रण क्षमता जैसे लाभकारी डिफ़ॉल्ट को हटा सकते हैं। यह पहुँच को नुकसान पहुँचाता है और मूल व्यवहारों के अनावश्यक पुनर्क्रियान्वयन को मजबूर करता है। सुरक्षित विकल्पों में शामिल हैं आधुनिक सामान्यीकरण जो अर्थगतता को संरक्षित करते हुए विसंगतियों को नियंत्रित करता है, और स्कोप्ड रीसेट के माध्यम से लागू किया गया @layer उन घटकों के लिए जिन्हें वास्तव में एक खाली स्लेट की आवश्यकता है। रीसेट नीति का दस्तावेज़ीकरण करें, जैसे महत्वपूर्ण सुविधाओं को स्पष्ट रूप से पुनर्स्थापित करें :focus-visible, और उन तत्वों को शून्य करने से बचें जिनके डिफ़ॉल्ट अर्थ संप्रेषित करते हैं, जैसे b, strong, तथा em.

उदाहरण सहित उत्तर दें

@layer reset {
	*,*::before,*::after { box-sizing: border-box; }
	:where(:focus-visible) { outline: 2px solid Highlight; outline-offset: 2px; }
}
/* Do not remove list semantics unless intentionally restyled */

39) आप डेवटूल्स और आधुनिक सीएसएस सुविधाओं का उपयोग करके जटिल कैस्केड समस्याओं को प्रभावी ढंग से कैसे डिबग करते हैं?

प्रभावी डिबगिंग DevTools में तत्व को अलग करने और निरीक्षण करने से शुरू होती है अभिकलन अंतिम प्रॉपर्टी मान और उनके स्रोत देखने के लिए पैन पर जाएँ। इसके बाद, जाँच करें शैलियाँ यह समझने के लिए कि कोई नियम क्यों जीता, पैन के नियम क्रम और विशिष्टता पर ध्यान दें @layer आदेश और क्या एक नया स्टैकिंग या संदर्भ युक्त हस्तक्षेप करता है। Togglपरिकल्पनाओं को सत्यापित करने के लिए e नियम बनाएँ, और परत वरीयता को देखने के लिए कैस्केड परत दृश्य (जहाँ उपलब्ध हो) का उपयोग करें। अस्थायी डीबग रूपरेखाएँ जोड़ें, और फ़ीचर फ़्लैग पर विचार करें @supports उन्नत पथों को चुनिंदा रूप से अक्षम करके समस्याओं को विभाजित करना।

उदाहरण सहित उत्तर दें

/* Debug helper */
*{ outline: 1px solid rgba(0,128,255,.15); outline-offset:-1px; }

/* Bisect: disable advanced path */
@supports (container-name: card) {
/* move experimental styles here; toggle block in DevTools */
}

40) प्रिंट शैलियाँ और मीडिया क्वेरीज़ एक पेशेवर CSS पाइपलाइन में कहाँ फिट होती हैं, और उनके फायदे और नुकसान क्या हैं?

दस्तावेज़-भारी उत्पादों, चालानों और कानूनी कलाकृतियों के लिए प्रिंट शैलियाँ आवश्यक रहती हैं। एक पेशेवर पाइपलाइन में न्यूनतम @media print यह अनुभाग अनावश्यक क्रोम को हटाता है, एक पठनीय माप निर्धारित करता है, और यह सुनिश्चित करता है कि रंग का उपयोग ग्रेस्केल उपकरणों पर सुपाठ्य हो। इसके लाभों में बेहतर अभिलेखीय गुणवत्ता और उपयोगकर्ता विश्वास शामिल हैं; नुकसानों में अतिरिक्त रखरखाव और सामान्य रूप से इंटरैक्टिव सामग्री के ऑडिट की आवश्यकता शामिल है। प्रिंट नियमों को टोकन-संचालित रखें, शीर्षलेखों और पादलेखों को छोड़कर पूर्ण स्थिति निर्धारण से बचें, और पृष्ठांकन विसंगतियों को रोकने के लिए सामान्य ब्राउज़रों और पीडीएफ जनरेटर का परीक्षण करें।

उदाहरण सहित उत्तर दें

@media print {
	nav, .ads, .controls { display: none !important; }
	article { max-width: 80ch; margin: 0 auto; font-size: 11pt; line-height: 1.4; }
	a[href]::after { content: " (" attr(href) ")"; }
	img { break-inside: avoid; }
}

41) कौन सी रणनीति एक पूर्वानुमानित ओवरले प्रणाली का उत्पादन करती है, और आपको इसका प्रबंधन कैसे करना चाहिए? `z-index` पैमाना?

एक पूर्वानुमानित ओवरले सिस्टम लेयरिंग को एक प्रलेखित प्रक्रिया के रूप में मानता है।tracतदर्थ संख्याओं के बजाय t का प्रयोग करें। एक छोटा, नामित पैमाना परिभाषित करें (उदाहरण के लिए, बेस, रेज़्ड, ओवरले, मोडल, टोस्ट) और चर या उपयोगिता वर्गों के माध्यम से घटकों को स्तरों में असाइन करें। प्रत्येक ओवरले को उसके अपने स्टैकिंग संदर्भ में केवल तभी रखें जब अलगाव की आवश्यकता हो, और आकस्मिक संदर्भों से बचें। transform or filter जब तक कि जानबूझकर न किया गया हो। मुख्य लाभ यह है कि इंजीनियर बिना किसी परीक्षण-और-त्रुटि के संघर्षों के बारे में तर्क कर सकते हैं; नुकसान यह है कि इसमें मामूली प्रारंभिक वर्गीकरण होता है। विचलन को रोकने के लिए, स्केल को डिज़ाइन टोकन और लिंट के साथ सीमा से बाहर के मानों के लिए जोड़ें।

ओवरले स्केल (तुलना तालिका)

टीयर	उद्देश्य	ठेठ `z-index`	नोट्स
आधार	नियमित सामग्री	0	नए संदर्भ बनाने से बचें
उठाया	चिपचिपे हेडर, दराज	10 - 100	खोल के भीतर सुसंगत रहें
उपरिशायी	पृष्ठभूमि, स्क्रिम्स	900	पूर्ण-पृष्ठ क्लिक शील्ड
मॉडल	संवाद, चयनकर्ता	1000	पद `fixed`; ट्रैप फोकस
टोस्ट	सूचनाएं	1100	गैर-अवरुद्ध; समयबद्ध निष्कासन

उदाहरण सहित उत्तर दें

:root{
	--z-base: 0; --z-raised: 20; --z-overlay: 900; --z-modal: 1000; --z-toast: 1100;
}
.header{ position: sticky; top: 0; z-index: var(--z-raised); }
.modal{ position: fixed; inset: 0; z-index: var(--z-modal); }
.scrim{ position: fixed; inset: 0; z-index: var(--z-overlay); }

42) मूल फॉर्म नियंत्रणों को जिम्मेदारी से कैसे स्टाइल किया जाना चाहिए, और सामान्य तकनीकों के लाभ और नुकसान क्या हैं?

ज़िम्मेदार फ़ॉर्म स्टाइलिंग, सामर्थ्य में सुधार करते हुए, अर्थगतता का सम्मान करती है। कीबोर्ड और स्क्रीन-रीडर व्यवहार को संरक्षित करके शुरुआत करें, फिर परतों में सुधार करें: उपयोग करें accent-color नियंत्रणों को बदले बिना ब्रांड के साथ संरेखित करने के लिए जांच योग्य इनपुट के लिए; लागू करें appearance असंगत UI को सामान्य बनाने के लिए संयम से; और अपलोड नियंत्रणों को लक्षित करें ::file-selector-buttonइसका लाभ यह है कि न्यूनतम नियंत्रण के साथ सुलभ, सुसंगत नियंत्रण है। Javaस्क्रिप्ट; नुकसानों में क्रॉस-ब्राउज़र बारीकियाँ और नियंत्रणों को पूरी तरह से बदलने का प्रलोभन शामिल है। एड-हॉक ओवरराइड से बचने के लिए, घटक API के भाग के रूप में फ़ोकस स्थितियाँ, त्रुटि स्थितियाँ और अक्षम स्थितियाँ दर्ज करें।

उदाहरण सहित उत्तर दें

/* Brand the native checkbox/radio without replacing it */
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand, #4b6fff); }

/* Normalize look only when truly necessary */
select, input, textarea { appearance: none; }

/* File input affordance */
input[type="file"]::file-selector-button{
padding: .5rem .75rem; border-radius: .375rem; background: var(--brand);
color: #fff; border: 0; cursor: pointer;
}

43) महत्वपूर्ण सीएसएस और कोड-विभाजन के लिए क्या रणनीतियाँ मौजूद हैं, और उनके क्या फायदे और नुकसान हैं?

क्रिटिकल सीएसएस, अबव-द-फोल्ड कंटेंट के लिए आवश्यक नियमों को इनलाइन करके और बाकी को स्थगित करके लार्जेस्ट कंटेंटफुल पेंट में सुधार करता है। Code-स्प्लिटिंग रूट, फ़ीचर या कंपोनेंट के आधार पर स्टाइलशीट को विभाजित करती है। एक सुनियोजित दृष्टिकोण रखरखाव में आसानी के लिए एक छोटे क्रिटिकल स्लाइस को लेयर्ड एक्सटर्नल बंडलों के साथ जोड़ता है। इसके लाभ हैं तेज़ लोड और छोटा प्रारंभिक पेलोड; हानियों में बिल्ड की जटिलता और संकलन समय पर डुप्लिकेशन न होने पर डुप्लिकेशन का जोखिम शामिल है। नियतात्मक लेयरिंग को प्राथमिकता दें। @layer ) और नामकरण परंपराएं, ताकि ओवरराइड को खंडों में स्थिर रखा जा सके।

लोडिंग रणनीतियाँ (तुलना तालिका)

रणनीति	फ़ायदे	नुकसान	विशिष्ट उपयोग
इनलाइन महत्वपूर्ण `<style>`	तेज़ LCP; कोई अनुरोध नहीं	रखरखाव कठिन	तह के ऊपर का खोल
एसिंक्रोनस बाह्य CSS	कैश करने योग्य; मॉड्यूलर	बिना स्टाइल वाली सामग्री का जोखिम	ऐप रूट
मीडिया-विभाजित बंडल	सशर्त लोडिंग	जटिलता; परीक्षण ओवरहेड	प्रिंट, उच्च-डीपीआई, डार्क मोड

उदाहरण सहित उत्तर दें

<link rel="preload" href="/hi/css/app.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/hi/css/app.css"></noscript>
<style>@layer base{ /* small critical rules */ }</style>

44) आधुनिक सीएसएस रंग विकल्प क्या हैं? `color-mix`, सापेक्ष रंग वाक्यविन्यास, अवधारणात्मक स्थान), और उनका उपयोग कब किया जाना चाहिए?

आधुनिक CSS रनटाइम पर रंगों की रचना का समर्थन करता है color-mix() और सापेक्ष रंग सिंटैक्स के माध्यम से घटकों को समायोजित करना, जिससे पूर्व-संकलन के बिना गतिशील थीमिंग संभव हो जाती है। OKLCH या लैब जैसे अवधारणात्मक रंग स्थान, sRGB की तुलना में अधिक एकरूप हल्कापन और क्रोमा समायोजन प्रदान करते हैं, जिससे रैंप और स्थितियाँ (होवर, अक्षम) अधिक सुसंगत हो जाती हैं। इसका मुख्य लाभ थीम में पूर्वानुमानित कंट्रास्ट और रंग परिवर्तन है; नुकसानों में पुराने इंजनों में आंशिक समर्थन और ब्रांड अनुपालन की पुष्टि की आवश्यकता शामिल है। होवर या एंफेसिस स्थितियों के लिए रनटाइम मिक्सिंग का उपयोग करें, और जहाँ संभव हो, कैननिकल टोकन को एक अवधारणात्मक स्थान में संग्रहीत करें, और आवश्यकता पड़ने पर sRGB पर वापस जाएँ।

उदाहरण सहित उत्तर दें

:root{
	--brand: oklch(60% .15 260);
	--brand-hover: color-mix(in oklch, var(--brand), black 12%);
	--muted: color-mix(in oklch, var(--brand), white 70%);
}
a{ color: var(--brand); }
a:hover{ color: var(--brand-hover); }
.badge{ background: var(--muted); }

45) कौन सी तकनीकें लचीली, संवेदनशील टाइपोग्राफी और ऊर्ध्वाधर लय बनाती हैं?

लचीली टाइपोग्राफी पठनीय पंक्ति लंबाई, मापनीय आकार और सुसंगत रिक्ति का संतुलन बनाती है। उपयोगकर्ता की प्राथमिकताओं का सम्मान करते हुए एक आधार फ़ॉन्ट आकार से शुरुआत करें, फिर उपयोग करें clamp() समझदार सीमाओं से घिरे तरल चरणों को परिभाषित करने के लिए। ऊर्ध्वाधर लय स्थापित करें lh या एक निश्चित रूट लाइन ऊंचाई, और पैराग्राफ को बाध्य करें ch-आधारित उपाय। text-wrap: balance ब्रेक को अधिक समान रूप से वितरित करके शीर्षकों में सुधार किया जा सकता है, जबकि hyphens: auto और भाषा मेटाडेटा कटे-फटे किनारों को कम करता है। इसके फ़ायदे हैं पठनीयता और व्यूपोर्ट्स में पहुँच; नुकसानों में लिगचर की जाँच और ब्रांड टाइपफेस के साथ व्यवहार को संतुलित करने की ज़रूरत शामिल है।

उदाहरण सहित उत्तर दें

:root{ --step-0: clamp(1rem, 1.2vw + .9rem, 1.125rem); line-height: 1.5; }
h1{ font-size: clamp(1.75rem, 4vw + 1rem, 2.5rem); text-wrap: balance; }
.prose{ max-width: 65ch; }
p{ margin-block: 1lh; hyphens: auto; }

46) स्क्रॉल स्नैप कैसे काम करता है?ping क्या स्क्रॉल पैडिंग/मार्जिन नेविगेशन को बेहतर बनाने में सहयोग करते हैं?

स्क्रॉल स्नैपping यह कैरोसेल और खंडित लेआउट के लिए नियतात्मक विश्राम स्थिति बनाता है, जबकि scroll-padding और scroll-margin सुनिश्चित करें कि लक्ष्य स्टिकी हेडर के नीचे सही ढंग से संरेखित हों। scroll-snap-type कंटेनर पर और scroll-snap-align व्यवहार को निर्देशित करने के लिए आइटम पर। इसके लाभों में एकरूप अनुभव और बेहतर कीबोर्ड नेविगेशन शामिल हैं tabindex और एंकर; नुकसान यह है कि अगर स्नैप पॉइंट बहुत ज़्यादा आक्रामक हों या टच डिवाइस पर गति के लिए ट्यून न किए गए हों, तो संभावित निराशा हो सकती है। स्टिकी UI के नीचे छिपी सामग्री से बचने के लिए व्यूपोर्ट के शीर्ष पर तार्किक पैडिंग प्रदान करें, और कीबोर्ड और पॉइंटर इंटरैक्शन के साथ मान्य करें।

उदाहरण सहित उत्तर दें

.carousel{ display:flex; overflow:auto; scroll-snap-type: x mandatory; scroll-padding-inline: 1rem; }
.slide{ flex: 0 0 80%; scroll-snap-align: start; margin-inline: .5rem; }
:target{ scroll-margin-top: 5rem; } /* sticky header offset */

47) कौन से CSS पैटर्न टूलटिप्स और पॉपओवर को लचीला बनाते हैं, और कब? Javaक्या स्क्रिप्ट अभी भी आवश्यक है?

CSS सरल, दिशात्मक टूलटिप्स का उपयोग करके उन्हें संभाल सकता है position, तार्किक ऑफसेट, और ::after तीर, द्वारा ट्रिगर :hover और :focus-visible. उपयोग inset और सटीक प्लेसमेंट के लिए रूपांतरित करता है और @layer ज़ेड-ऑर्डरिंग के लिए उपयोगिताएँ। जटिल पॉपओवर के लिए - टकराव का पता लगाना, तीर की स्थिति बदलना, या फ़ोकस ट्रैप।ping-Javaस्क्रिप्ट ज़रूरी तो है, लेकिन CSS अभी भी प्रेजेंटेशन टोकन परिभाषित करता है। CSS-फर्स्ट पैटर्न का फ़ायदा कम ओवरहेड और सुंदर डिग्रेडेशन है; नुकसान बिना तर्क के व्यूपोर्ट किनारों के लिए सीमित अनुकूलनशीलता है। हमेशा सुनिश्चित करें कि टूलटिप्स कीबोर्ड द्वारा पहुँच योग्य हों और ज़रूरी नियंत्रणों को अस्पष्ट न करें।

उदाहरण सहित उत्तर दें

.tip{ position: relative; }
.tip:hover .tip__bubble, .tip:focus-within .tip__bubble { opacity:1; transform: translateY(-4px); }
.tip__bubble{
	position:absolute; inset-block-end: 100%; inset-inline-start: 0;
	opacity:0; transform: translateY(0); transition: transform .15s, opacity .15s;
	z-index: var(--z-raised);
}

48) आप जटिल पुनर्लेखन का सहारा लिए बिना उत्तरदायी, पठनीय डेटा तालिकाओं को कैसे डिज़ाइन करते हैं?

रिस्पॉन्सिव टेबल संकीर्ण स्क्रीन पर उपयोगी दृश्य प्रदान करते हुए अर्थगतता को संरक्षित रखती हैं। हेडर और संबंधों के पुनर्प्रवाह से बचने के लिए एक सीमित आवरण के अंदर क्षैतिज स्क्रॉलिंग से शुरुआत करें। कुंजी-मान डेटा के लिए, स्टैक्ड लेआउट पर स्विच करें display: grid नामित क्षेत्रों के साथ, या क्रमिक प्रकटीकरण के लिए स्तंभ-दृश्यता नियंत्रण जोड़ें। इसके लाभों में संरक्षित पहुँच और सरल रखरखाव शामिल हैं; नुकसान सीमित स्क्रीन क्षेत्र और सावधानीपूर्वक ओवरफ़्लो स्टाइलिंग की आवश्यकता है। प्रत्येक ब्रेकपॉइंट पर कौन से स्तंभ आवश्यक हैं और कौन से पसंद किए जाते हैं, इसका दस्तावेज़ीकरण करें। text-overflow लंबे मानों के लिए टूलटिप्स के साथ.

दृष्टिकोण (तुलना तालिका)

तकनीक	फ़ायदे	नुकसान	सबसे अच्छा है
क्षैतिज स्क्रॉल आवरण	शब्दार्थ को संरक्षित करता है	ओवरफ़्लो स्टाइलिंग की आवश्यकता है	चौड़ी, घनी मेजें
स्टैक्ड कुंजी-मान लेआउट	अत्यधिक पठनीय	मूल तालिका सुविधाएँ खो देता है	मोबाइल विवरण, चालान
कॉलम टॉगल	अनुरूप घनत्व	JS वायरिंग की आवश्यकता है	व्यवस्थापक डैशबोर्ड

उदाहरण सहित उत्तर दें

.table-wrap{ overflow:auto; max-inline-size:100%; }
.table{ min-inline-size: 52rem; border-collapse: collapse; }
.table th, .table td{ padding:.5rem; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

49) ब्लेंड मोड, फिल्टर और मास्क कब व्यावहारिक मूल्य प्रदान करते हैं, और इनके क्या फायदे हैं?

मिश्रण मोड ( mix-blend-mode, background-blend-mode ), फ़िल्टर ( blur, grayscale, drop-shadow ), और मास्क ( mask-image, mask-composite ) बिना रैस्टर एडिटिंग के ग्लासमॉर्फिज़्म, डुओटोन्स और नॉन-रेक्टैंगुलर रिवील्स जैसे प्रभाव सक्षम करते हैं। ये मार्केटिंग सतहों और डेटा-विज़ एक्सेंट में चमकते हैं जहाँ कला निर्देशन महत्वपूर्ण है। इसके फायदे हैं कम संपत्ति प्रसार और गतिशील थीमिंग; नुकसानों में कम-शक्ति वाले उपकरणों पर प्रदर्शन लागत और कंट्रास्ट कम होने पर संभावित पहुँच संबंधी समस्याएँ शामिल हैं। गैर-महत्वपूर्ण सतहों के लिए भारी प्रभावों को आरक्षित रखें, GPU प्रभाव का परीक्षण करें, और प्राथमिकता-कम फ़ॉलबैक प्रदान करें।

उदाहरण सहित उत्तर दें

.hero::before{
	content:""; position:absolute; inset:0;
	background: radial-gradient(circle at 30% 20%, #fff3, transparent 60%);
	mix-blend-mode: screen; filter: blur(20px);
}

50) आपकी क्या भूमिका है? `color-scheme` और सिस्टम यूआई थीमिंग ब्राउज़रों में सुसंगत स्टाइलिंग में भूमिका निभाती है?

RSI color-scheme प्रॉपर्टी इच्छित हल्के और गहरे रंग के पैलेट घोषित करती है ताकि उपयोगकर्ता-एजेंट घटक (फ़ॉर्म नियंत्रण, कुछ इंजनों में स्क्रॉलबार) मेल खाते बैकग्राउंड और टेक्स्ट रंगों के साथ रेंडर हों। इससे कस्टम कंट्रोल स्किन की ज़रूरत कम हो जाती है और डार्क मोड के सक्रिय होने पर बेमेल होने से बचा जा सकता है। इसका फ़ायदा न्यूनतम कोड के साथ सुसंगतता है; नुकसान यह है कि क्रॉस-इंजन समता विकसित हो रही है, और कस्टम ब्रांडिंग के लिए अभी भी ओवरराइड की आवश्यकता हो सकती है। कंबाइन color-scheme टोकन के लिए कस्टम प्रॉपर्टीज़ के साथ और ट्रैप से बचने के लिए स्पष्ट उपयोगकर्ता ओवरराइड की अनुमति देंping उपयोगकर्ता ऐसी सिस्टम प्राथमिकता में हैं जिसे उन्होंने नहीं चुना था।

उदाहरण सहित उत्तर दें

:root{ color-scheme: light dark; }
body{ background: var(--bg); color: var(--fg); }
/* Controls inherit appropriate UA styling under the declared schemes */

🔍 वास्तविक दुनिया के परिदृश्यों और रणनीतिक प्रतिक्रियाओं के साथ शीर्ष CSS साक्षात्कार प्रश्न

1) इनमें क्या अंतर है `inline`, `inline-block`, तथा `block` सीएसएस में तत्व?

उम्मीदवार से अपेक्षित: साक्षात्कारकर्ता तत्व प्रदर्शन गुणों के बारे में आपकी समझ का परीक्षण करना चाहता है तथा यह भी कि वे लेआउट और बॉक्स मॉडल को किस प्रकार प्रभावित करते हैं।

उदाहरण उत्तर:
“अपनी पिछली भूमिका में, मुझे अक्सर डिस्प्ले प्रकारों की ग़लतफ़हमी के कारण लेआउट की असंगतियों से निपटना पड़ता था। block तत्व उपलब्ध पूरी चौड़ाई ले लेता है और एक नई पंक्ति से शुरू होता है। inline तत्व केवल अपनी सामग्री जितनी चौड़ाई लेता है और एक नई पंक्ति पर शुरू नहीं होता है। inline-block एलिमेंट ब्लॉक एलिमेंट की तरह चौड़ाई और ऊँचाई सेट करने की सुविधा देता है, लेकिन टेक्स्ट की तरह इनलाइन प्रवाहित होता है। इन अंतरों को समझने से मुझे रिस्पॉन्सिव डिज़ाइनों को बेहतर बनाने और एकसमान संरेखण बनाए रखने में मदद मिली।

2) आप जटिल लेआउट में CSS समस्याओं को डीबग करने का तरीका कैसे अपनाते हैं?

उम्मीदवार से अपेक्षित: साक्षात्कारकर्ता लेआउट त्रुटियों की पहचान करने और उन्हें ठीक करने के लिए आपके व्यवस्थित दृष्टिकोण को जानना चाहता है।

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

3) क्या आप बता सकते हैं कि CSS कैस्केड और विशिष्टता कैसे काम करती है?

उम्मीदवार से अपेक्षित: साक्षात्कारकर्ता यह जानना चाहता है कि ब्राउज़र किस प्रकार यह निर्धारित करते हैं कि कौन से CSS नियमों को प्राथमिकता दी जाए।

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

4) बताएं कि आप फ्रेमवर्क पर बहुत अधिक निर्भर हुए बिना रिस्पॉन्सिव डिज़ाइन को कैसे संभालते हैं।

उम्मीदवार से अपेक्षित: साक्षात्कारकर्ता सीएसएस लचीलेपन और मीडिया क्वेरी उपयोग के बारे में आपकी समझ की जाँच कर रहा है।

उदाहरण उत्तर:
“अपनी पिछली भूमिका में, मैंने तरल ग्रिड, सापेक्ष इकाइयों जैसे का उपयोग करके उत्तरदायी लेआउट डिज़ाइन किए थे em और remमैंने लेआउट को अलग-अलग स्क्रीन की चौड़ाई के अनुसार ढालने के लिए CSS ग्रिड और फ्लेक्सबॉक्स का उपयोग किया। लचीले लेआउट के लिए मैंने CSS ग्रिड और फ्लेक्सबॉक्स का भी इस्तेमाल किया। इस तरीके से फ्रेमवर्क पर अनावश्यक निर्भरता से बचा जा सका और साथ ही लेआउट को सरल रखा जा सका।ping यह डिजाइन स्केलेबल और रखरखाव योग्य है।"

5) आप प्रदर्शन और रखरखाव के लिए CSS को कैसे अनुकूलित करेंगे?

उम्मीदवार से अपेक्षित: साक्षात्कारकर्ता मापनीयता और प्रदर्शन के लिए सर्वोत्तम प्रथाओं के बारे में आपकी जागरूकता का मूल्यांकन कर रहा है।

उदाहरण उत्तर:
"अपनी पिछली नौकरी में, मैंने अप्रयुक्त शैलियों को हटाकर, HTTP अनुरोधों को कम करने के लिए फ़ाइलों को संयोजित करके, और रखरखाव के लिए CSS वैरिएबल्स को लागू करके CSS को अनुकूलित किया। मैंने कोड को व्यवस्थित और स्केल करने में आसान बनाए रखने के लिए BEM नामकरण पद्धतियों को भी अपनाया। इसके अतिरिक्त, मैंने प्रदर्शन को बेहतर बनाने के लिए PostCSS और मिनिमाइज़ेशन जैसे आधुनिक टूल का उपयोग किया।"

6) मुझे उस समय के बारे में बताइए जब आपको स्टाइलिंग संबंधी विवाद को सुलझाने के लिए डेवलपर्स या डिजाइनरों के साथ सहयोग करना पड़ा हो।

उम्मीदवार से अपेक्षित: साक्षात्कारकर्ता विभिन्न कार्यों वाले वातावरण में टीमवर्क और संचार कौशल देखना चाहता है।

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

7) सीएसएस एनिमेशन या ट्रांजिशन को लागू करते समय आपको किन चुनौतियों का सामना करना पड़ा और आपने उन पर कैसे काबू पाया?

उम्मीदवार से अपेक्षित: साक्षात्कारकर्ता प्रदर्शन अनुकूलन और ब्राउज़र रेंडरिंग के बारे में आपकी समझ का आकलन करना चाहता है।

उदाहरण उत्तर:
"एक प्रोजेक्ट में, रीफ़्लो समस्याओं के कारण एनिमेशन में अनियमितता आ गई। मैंने पाया कि कुछ CSS गुण, जैसे top और left लेआउट पुनर्गणना को ट्रिगर कर रहे थे। मैंने इसका उपयोग करना शुरू कर दिया transform और opacity, जो GPU-त्वरित हैं, जिससे सहज संक्रमण प्राप्त होते हैं। मैंने प्राकृतिक अनुभव के लिए एनीमेशन अवधि को भी अनुकूलित किया है।”

8) आप बड़े पैमाने के अनुप्रयोग के लिए CSS की संरचना कैसे करेंगे?

उम्मीदवार से अपेक्षित: साक्षात्कारकर्ता संगठन, मापनीयता और रखरखाव के प्रति आपके दृष्टिकोण को समझना चाहता है।

उदाहरण उत्तर:
"मैं शैलियों को तार्किक रूप से संरचित करने के लिए BEM, SMACSS, या CSS मॉड्यूल जैसे मॉड्यूलर आर्किटेक्चर का उपयोग करूँगा। टकराव से बचने के लिए प्रत्येक घटक की अपनी विशिष्ट शैलियाँ होंगी। मैं टीमों में एकरूपता बनाए रखने और परियोजना के बढ़ने के साथ CSS के अनावश्यक विस्तार को रोकने के लिए एक शैली मार्गदर्शिका और नामकरण परंपराएँ भी लागू करूँगा।"

9) मान लीजिए कि कोई ग्राहक शिकायत करता है कि इंटरनेट एक्सप्लोरर 11 में पेज लेआउट टूट जाता है। आप इसे हल करने के लिए क्या कदम उठाएंगे?

उम्मीदवार से अपेक्षित: साक्षात्कारकर्ता विरासत ब्राउज़र समस्याओं के प्रति आपकी अनुकूलन क्षमता का परीक्षण करना चाहता है।

उदाहरण उत्तर:
"मैं पहले उसी ब्राउज़र संस्करण का उपयोग करके समस्या को पुनः उत्पन्न करूँगा। फिर, मैं ब्राउज़र डेवलपमेंट टूल्स के माध्यम से असमर्थित CSS सुविधाओं की पहचान करूँगा और MDN या Can I Use जैसे संसाधनों का उपयोग करके संगतता की जाँच करूँगा। उसके बाद, मैं आवश्यकतानुसार फ़ॉलबैक या पॉलीफ़िल लागू करूँगा। मैं भविष्य के रखरखाव के लिए समाधान का दस्तावेज़ीकरण भी करूँगा।"

10) आप अपनी CSS परियोजनाओं में क्रॉस-ब्राउज़र संगतता कैसे सुनिश्चित करते हैं?

उम्मीदवार से अपेक्षित: साक्षात्कारकर्ता यह पुष्टि करना चाहता है कि आप परीक्षण और अनुकूलता मानकों के बारे में जानते हैं।

उदाहरण उत्तर:
"मैं ब्राउज़रस्टैक जैसे टूल का उपयोग करके प्रमुख ब्राउज़रों पर जल्दी और अक्सर परीक्षण करके क्रॉस-ब्राउज़र संगतता सुनिश्चित करता हूँ। मैं CSS मानकों का पालन करता हूँ और गैर-मानक गुणों से बचता हूँ। मैं विक्रेता उपसर्गों को स्वचालित रूप से प्रबंधित करने के लिए Autoprefixer के साथ PostCSS का भी उपयोग करता हूँ। विकास के दौरान निरंतर सत्यापन और परीक्षण, लॉन्च के बाद बड़ी समस्याओं को रोकते हैं।"

शीर्ष CSS साक्षात्कार प्रश्न और उत्तर

1) आधुनिक CSS कैस्केड की व्याख्या करें, जिसमें शामिल हैं @layer, विशिष्टता, और स्रोत क्रम।

2) कंटेनर क्वेरीज़ मीडिया क्वेरीज़ से किस प्रकार भिन्न हैं, तथा आप प्रत्येक का उपयोग कहां करेंगे?

3) इसकी विशेषताएँ और लाभ क्या हैं? :has(), और इसकी तुलना किस प्रकार की जाती है :is() और :where() ?

4) थीमिंग के लिए आप CSS कस्टम प्रॉपर्टीज़ को कहां लागू करेंगे, और उनके क्या फायदे और नुकसान हैं?

5) कौन सी लेआउट प्रणाली किस समस्या के लिए उपयुक्त है: फ्लेक्सबॉक्स, ग्रिड या सबग्रिड?

6) क्या तार्किक गुण अंतर्राष्ट्रीयकरण को बेहतर बनाते हैं? इसके लाभ और नुकसान बताइए।

7) आप इसका उपयोग कब करेंगे? clamp() और आधुनिक व्यूपोर्ट इकाइयाँ ( svh, lvh, dvh ) द्रव प्रकार और अंतर के लिए?

8) स्टैकिंग संदर्भ क्या है, और z-इंडेक्स और पोजिशनिंग कारक इसे कैसे बनाते या अलग करते हैं?

संबंधित आलेख

9) क्या मूल CSS नेस्टिंग उत्पादन के लिए तैयार है, और आप प्रीप्रोसेसर्स से कैसे माइग्रेट करेंगे?

10) क्या आप कंटेनर शैली क्वेरी का उपयोग कर सकते हैं, और उनके व्यावहारिक लाभ क्या हैं?

11) CSS के लिए कौन से प्रदर्शन कारक मायने रखते हैं, और आप लेआउट थ्रैशिंग से कैसे बचते हैं?

12) कौन-सी CSS सुविधाएँ बिना किसी अतिरिक्त प्रयास के पहुँच क्षमता का समर्थन करती हैं? लाभ और उदाहरण बताएँ।

13) सीएसएस को शामिल करने के विभिन्न तरीके और प्रत्येक दृष्टिकोण के फायदे या नुकसान।

14) इनमें क्या अंतर है relative, absolute, fixed, तथा sticky उपयोग-मामले का मार्गदर्शन प्रदान करें।

16) शैडो DOM CSS स्कोर को कैसे प्रभावित करता है?pingऔर, पार्ट्स को स्टाइल करने के अलग-अलग तरीके क्या हैं?

17) सीएसएस बॉक्स मॉडल की विशेषताएं क्या हैं, और ऐसा क्यों होता है? box-sizing: border-box मामला?

18) आप इसका उपयोग कहां करेंगे? @supports प्रगतिशील वृद्धि के लिए क्या किया जा सकता है, और इसके क्या लाभ हैं?

19) आपको कौन सी सीएसएस इकाइयाँ चुननी चाहिए, और उनके बीच क्या अंतर है?

20) क्या सीएसएस काउंटर संरचित सामग्री में मदद करते हैं, और उनके लाभ और नुकसान क्या हैं?

21) आपको CSS के साथ कब एनिमेट करना चाहिए, और प्रदर्शन के लिए कौन से गुण सबसे सुरक्षित हैं?

22) क्या CSS उत्तरदायी छवियों की सहायता कर सकता है, और इसके लिए विभिन्न तरीके क्या हैं?

23) क्या एक Javaस्क्रिप्ट-मुक्त डार्क मोड संभव है, और कौन से कारक इसे मजबूत बनाते हैं?

24) क्या डीप सेलेक्टर नेस्टिंग और उच्च विशिष्टता के कोई नुकसान हैं, और कम विशिष्टता वाले दृष्टिकोण से क्या लाभ हैं?

26) डिज़ाइन से कोड तक स्पेसिंग और टाइपोग्राफी टोकन के जीवनचक्र को उदाहरणों के साथ समझाइए।

27) कैसे करें :focus-visible, :focus-within, तथा :target क्या ये भिन्न हैं, और प्रत्येक क्या लाभ प्रदान करता है?

28) इसके क्या लाभ और हानियाँ हैं? content-visibility और बड़े दस्तावेज़ों पर सी.एस.एस. नियंत्रण?

29) आप न्यूनतम ब्रेकपॉइंट के साथ एक उत्तरदायी ग्रिड कैसे बनाते हैं? minmax() और auto-fit/auto-fill?

30) कौन से कारक यह निर्धारित करते हैं कि कब चुनना है gap बनाम आइटमों के बीच अंतर के लिए मार्जिन?

31) किसी पर निर्भर रहने से क्या नुकसान होते हैं? !important, और सुरक्षित विकल्प क्या हैं?

32) प्रदर्शन या रखरखाव के लिए किस प्रकार के चयनकर्ताओं से बचना चाहिए और क्यों?

33) आपको कब चुनना चाहिए @layer उपयोगिता बनाम घटक वेरिएंट, और लाभ क्या हैं?

34) क्या ग्रिड सभी फ्लेक्सबॉक्स उपयोग को प्रतिस्थापित कर सकता है, या दोनों को रखने के लिए अंतर-संचालित कारण हैं?

35) उपयोग करने के क्या लाभ और नुकसान हैं? aspect-ratio बनाम पैडिंग हैक्स?

36) आप एक लचीला स्टिकी हेडर कैसे बनाएंगे जो सुरक्षित क्षेत्रों और मोबाइल व्यूपोर्ट्स का सम्मान करता हो?

37) घटकों में घनत्व स्केलिंग और आकार स्केलिंग के बीच क्या अंतर है, और प्रत्येक का उपयोग कब किया जाना चाहिए?

38) भारी वैश्विक रीसेट से कौन से नुकसान उत्पन्न होते हैं, और सुरक्षित विकल्प क्या हैं?

39) आप डेवटूल्स और आधुनिक सीएसएस सुविधाओं का उपयोग करके जटिल कैस्केड समस्याओं को प्रभावी ढंग से कैसे डिबग करते हैं?

40) प्रिंट शैलियाँ और मीडिया क्वेरीज़ एक पेशेवर CSS पाइपलाइन में कहाँ फिट होती हैं, और उनके फायदे और नुकसान क्या हैं?

42) मूल फॉर्म नियंत्रणों को जिम्मेदारी से कैसे स्टाइल किया जाना चाहिए, और सामान्य तकनीकों के लाभ और नुकसान क्या हैं?

43) महत्वपूर्ण सीएसएस और कोड-विभाजन के लिए क्या रणनीतियाँ मौजूद हैं, और उनके क्या फायदे और नुकसान हैं?

45) कौन सी तकनीकें लचीली, संवेदनशील टाइपोग्राफी और ऊर्ध्वाधर लय बनाती हैं?

46) स्क्रॉल स्नैप कैसे काम करता है?ping क्या स्क्रॉल पैडिंग/मार्जिन नेविगेशन को बेहतर बनाने में सहयोग करते हैं?

47) कौन से CSS पैटर्न टूलटिप्स और पॉपओवर को लचीला बनाते हैं, और कब? Javaक्या स्क्रिप्ट अभी भी आवश्यक है?

48) आप जटिल पुनर्लेखन का सहारा लिए बिना उत्तरदायी, पठनीय डेटा तालिकाओं को कैसे डिज़ाइन करते हैं?

49) ब्लेंड मोड, फिल्टर और मास्क कब व्यावहारिक मूल्य प्रदान करते हैं, और इनके क्या फायदे हैं?

50) आपकी क्या भूमिका है? color-scheme और सिस्टम यूआई थीमिंग ब्राउज़रों में सुसंगत स्टाइलिंग में भूमिका निभाती है?

🔍 वास्तविक दुनिया के परिदृश्यों और रणनीतिक प्रतिक्रियाओं के साथ शीर्ष CSS साक्षात्कार प्रश्न

1) इनमें क्या अंतर है inline, inline-block, तथा block सीएसएस में तत्व?

2) आप जटिल लेआउट में CSS समस्याओं को डीबग करने का तरीका कैसे अपनाते हैं?

3) क्या आप बता सकते हैं कि CSS कैस्केड और विशिष्टता कैसे काम करती है?

4) बताएं कि आप फ्रेमवर्क पर बहुत अधिक निर्भर हुए बिना रिस्पॉन्सिव डिज़ाइन को कैसे संभालते हैं।

5) आप प्रदर्शन और रखरखाव के लिए CSS को कैसे अनुकूलित करेंगे?

7) सीएसएस एनिमेशन या ट्रांजिशन को लागू करते समय आपको किन चुनौतियों का सामना करना पड़ा और आपने उन पर कैसे काबू पाया?

8) आप बड़े पैमाने के अनुप्रयोग के लिए CSS की संरचना कैसे करेंगे?

10) आप अपनी CSS परियोजनाओं में क्रॉस-ब्राउज़र संगतता कैसे सुनिश्चित करते हैं?

इस पोस्ट को संक्षेप में इस प्रकार लिखें:

न्यूज़लैटर के लिए साइन अप करें

1) आधुनिक CSS कैस्केड की व्याख्या करें, जिसमें शामिल हैं `@layer`, विशिष्टता, और स्रोत क्रम।

3) इसकी विशेषताएँ और लाभ क्या हैं? `:has()`, और इसकी तुलना किस प्रकार की जाती है `:is()` और `:where()` ?

7) आप इसका उपयोग कब करेंगे? `clamp()` और आधुनिक व्यूपोर्ट इकाइयाँ ( `svh`, `lvh`, `dvh` ) द्रव प्रकार और अंतर के लिए?

14) इनमें क्या अंतर है `relative`, `absolute`, `fixed`, तथा `sticky` उपयोग-मामले का मार्गदर्शन प्रदान करें।

17) सीएसएस बॉक्स मॉडल की विशेषताएं क्या हैं, और ऐसा क्यों होता है? `box-sizing: border-box` मामला?

18) आप इसका उपयोग कहां करेंगे? `@supports` प्रगतिशील वृद्धि के लिए क्या किया जा सकता है, और इसके क्या लाभ हैं?

27) कैसे करें `:focus-visible`, `:focus-within`, तथा `:target` क्या ये भिन्न हैं, और प्रत्येक क्या लाभ प्रदान करता है?

28) इसके क्या लाभ और हानियाँ हैं? `content-visibility` और बड़े दस्तावेज़ों पर सी.एस.एस. नियंत्रण?

29) आप न्यूनतम ब्रेकपॉइंट के साथ एक उत्तरदायी ग्रिड कैसे बनाते हैं? `minmax()` और `auto-fit/auto-fill`?

30) कौन से कारक यह निर्धारित करते हैं कि कब चुनना है `gap` बनाम आइटमों के बीच अंतर के लिए मार्जिन?

31) किसी पर निर्भर रहने से क्या नुकसान होते हैं? `!important`, और सुरक्षित विकल्प क्या हैं?

33) आपको कब चुनना चाहिए `@layer` उपयोगिता बनाम घटक वेरिएंट, और लाभ क्या हैं?

35) उपयोग करने के क्या लाभ और नुकसान हैं? `aspect-ratio` बनाम पैडिंग हैक्स?

50) आपकी क्या भूमिका है? `color-scheme` और सिस्टम यूआई थीमिंग ब्राउज़रों में सुसंगत स्टाइलिंग में भूमिका निभाती है?

1) इनमें क्या अंतर है `inline`, `inline-block`, तथा `block` सीएसएस में तत्व?