DanLevy.net

प्रश्नोत्तरी: क्या आप आधुनिक CSS जानते हैं? (2025 के लिए)

क्या आप फ्रंट‑एंड के काबिल हैं?

क्विज़: क्या आप CSS जानते हैं?

1. 

वार्म‑अप

--main-color नामक CSS वेरिएबल का उपयोग करके किसी तत्व की पृष्ठभूमि रंग सेट करने का सही तरीका क्या है?

:root {
  --main-color: blue;
}
div {
  /* How do we use --main-color here? */
}

CSS वेरिएबल्स को var फ़ंक्शन के साथ उपयोग किया जाता है, इसलिए सही उत्तर है background-color: var(--main-color);। यह सिंटैक्स --main-color का मान प्राप्त करता है और लागू करता है।

अन्य विकल्प अन्य भाषाओं या प्री‑प्रोसेसर सिंटैक्स, जैसे Sass या Less, से परिचित हो सकते हैं।

2. 

CSS फ़ंक्शन

यदि पैरेंट/कंटेनर की चौड़ाई 400px है, तो नीचे दिए गए तत्व की गणना की गई चौड़ाई क्या होगी?

div {
  width: min(250px, 50%);
}

min() फ़ंक्शन 250px और पैरेंट की चौड़ाई के 50% में से सबसे छोटा मान चुनेगा।

गणना किए गए मान को समझने के लिए हमें सापेक्ष इकाइयों को पिक्सल में बदलना होगा:

  • 400px का 50% 200px है
  • 250px पहले से ही पिक्सल में है
/* This gets computed to */
width: min(250px, 200px);
/* -> 200px wins */

min() फ़ंक्शन रिस्पॉन्सिव डिज़ाइन में विशेष रूप से उपयोगी है, जहाँ आप सुनिश्चित कर सकते हैं कि कोई घटक (या फ़ॉन्ट आकार) किसी निश्चित सीमा से अधिक न हो।

3. 

CSS फ़ंक्शन

यदि कंटेनर की चौड़ाई 200px है, तो <div> की गणना की गई चौड़ाई क्या होगी?

div {
  width: max(50px, 10%, 6rem);
}

max() फ़ंक्शन 2 या अधिक इनपुट लेता है, और स्वचालित रूप से सबसे बड़ा मान उपयोग करता है। मान लेते हैं कि रूट फ़ॉन्ट आकार ब्राउज़र का डिफ़ॉल्ट 16px है, तो चौड़ाई 96px निकलती है।

गणना किए गए मान को समझने के लिए हमें सापेक्ष इकाइयों को पिक्सेल में बदलना होगा:

  • 50px पहले से ही पिक्सेल में है
  • 200px का 10% 20px है
  • 6rem 6 * 16px (डिफ़ॉल्ट फ़ॉन्ट आकार) है, जो 96px है
/* This gets computed to */
width: max(50px, 20px, 96px);
/* -> 96px wins */

4. 

CSS ग्रिड फ़ंक्शन

CSS ग्रिड ट्रैक के लिए minmax(100px, 200px) उपयोग करने का प्रभाव क्या है?

grid-template-columns: minmax(100px, 200px);

minmax(100px, 200px) का उपयोग करके ग्रिड ट्रैक को 100px से 200px के बीच रिसाइज़ किया जा सकता है, उपलब्ध स्थान के अनुसार ढलता है लेकिन कभी भी 100px से नीचे या 200px से ऊपर नहीं जाता।

आप ऑटो‑एडजस्टिंग लेआउट बना सकते हैं जहाँ कंटेनर और चाइल्ड दोनों लेआउट गणना में भूमिका निभाते हैं। यह repeat() और auto-fill या auto-fit के साथ मिलाकर बहुत शक्तिशाली बन जाता है, जो प्रतिबंधों के भीतर जितने संभव हो ट्रैक बनाता है।

5. 

CSS वेरिएबल्स

निम्नलिखित CSS के लिए बैकग्राउंड का रंग क्या होगा?

div {
  background: var(--primary, olivedrab);
}

var() फ़ंक्शन आपको वैरिएबल न परिभाषित होने पर फ़ॉलबैक वैल्यू सेट करने देता है। इस मामले में, बैकग्राउंड olivedrab (#6b8e23) होगा क्योंकि --primary परिभाषित नहीं है।

यह एक शानदार तरीका है यह सुनिश्चित करने का कि यदि वैरिएबल गायब या असमर्थित हो तो आपके स्टाइल टूटें नहीं।

6. 

CSS फ़ंक्शन

clamp() क्या करता है?

.card {
  width: clamp(200px, 50vw, 500px);
}

clamp() फ़ंक्शन चौड़ाई को 50vw के आधार पर स्केल करने देता है, लेकिन इसे 200px से 500px की सीमा में रखता है.

इसका मतलब है कि जब 50vw 200px से कम होगा तो चौड़ाई 200px होगी, जब 50vw 500px से अधिक होगा तो 500px होगी, और इन सीमाओं के बीच रैखिक रहेगा.

यह आपको ऑटो‑मैजिकली रिस्पॉन्सिव बनाता है! clamp के बारे में जानने वाली बात यह है कि यह स्थिर इकाइयों को रिस्पॉन्सिव या गणना की गई इकाइयों के साथ मिलाता है.

सामान्यतः आप फ़ॉन्ट साइज के लिए viewport इकाइयों का उपयोग नहीं करना चाहेंगे, लेकिन clamp() के साथ हम सुनिश्चित कर सकते हैं कि फ़ॉन्ट साइज बहुत छोटा या बहुत बड़ा न हो.

7. 

CSS नेस्टिंग

क्या CSS नेस्टिंग को नेटिव रूप से सपोर्ट करता है?

हाँ! आखिरकार हमारे पास नेटिव CSS नेस्टिंग है! CSS ने हाल के वर्षों (2023) में नेटिव नेस्टिंग सिंटैक्स पेश किया, जिससे सीधे CSS में पदानुक्रमित स्टाइलिंग संभव हो गई।

8. 

CSS नेस्टिंग

क्या यह मूल CSS नेस्टिंग का सही उपयोग है?

.container {
  color: black;
  .title {
    color: white;
    background: black;
  }
}

.title क्लास .container क्लास के भीतर नेस्टेड है, और प्रॉपर्टीज़ अपेक्षित रूप से लागू होती हैं।

यह संबंधित स्टाइल्स को साथ रखने और लंबे सेलेक्टर्स से बचने का शानदार तरीका है।

9. 

CSS नेस्टिंग

.container के डायरेक्ट चाइल्ड div पर कौन सा बैकग्राउंड रंग लागू होगा?

.container {
  background-color: red;
  > div {
    background-color: white;
  }
  background-color: blue !important;
}

नेस्टेड नियम में > सेलेक्टर केवल .container के भीतर के डायरेक्ट चाइल्ड div तत्वों पर background-color: white लागू करता है।

आखिरी नियम, background-color: blue !important;, थोड़ा ध्यान भटकाने वाला है। यह नेस्टेड नियम के बाहर है और सभी .container तत्वों पर लागू होगा।

10. 

CSS वेरिएबल्स

रनटाइम पर CSS वेरिएबल का मान कैसे बदल सकते हैं?

CSS वेरिएबल्स को क्लासेज़ और जावास्क्रिप्ट का उपयोग करके सेट किया जा सकता है। इन्हें यहाँ तक कि तकनीकी रूप से उपयोग होने के बाद भी परिभाषित किया जा सकता है।

document.documentElement.style.setProperty('--main-color', 'blue');

यह पूरे दस्तावेज़ के लिए --main-color का मान blue में बदल देगा.

CSS वेरिएबल्स परिवर्तनीय हैं, और रनटाइम पर जावास्क्रिप्ट का उपयोग करके बदले जा सकते हैं.

इन्हें क्लासेज़ जोड़कर या हटाकर भी बदला जा सकता है, जो थीमिंग के लिए एक सामान्य पैटर्न है.

11. 

CSS वेरिएबल्स

इस तत्व की गणना की गई चौड़ाई क्या होगी?

:root {
  --base-width: 100px;
}
div {
  width: calc(var(--base-width) + 10px);
}

calc() फ़ंक्शन --base-width (100px) के मान को अतिरिक्त 10px के साथ जोड़ता है, जिससे चौड़ाई 110px हो जाती है।

Loading comments...