TL;DR: यह ब्लॉग वेब विकास के लिए पांच सर्वश्रेष्ठ सीएसएस शैलियों और सुविधाओं का पता लगाने के लिए कोड उदाहरणों का उपयोग करता है: कंटेनर क्वेरीज़, सबग्रिड, छद्म-वर्ग, तार्किक गुण और लैब कलर स्पेस। वे प्रतिक्रियाशीलता बढ़ाते हैं, लेआउट को सरल बनाते हैं, और डिज़ाइन की स्थिरता में सुधार करते हैं।

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

तो, यह लेख पांच नवीन सीएसएस सुविधाओं पर चर्चा करेगा जिनका उपयोग आप अपने अगले प्रोजेक्ट में कर सकते हैं।

1. कंटेनर क्वेरीज़

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

कंटेनर क्वेरीज़ डेवलपर्स को उनके मूल कंटेनर आकार के आधार पर तत्वों को अनुकूलित करने की अनुमति देकर इन समस्याओं का समाधान करती हैं। चूँकि यह विधि व्यूपोर्ट आकार पर निर्भर नहीं करती है, यह HTML घटकों को पूरी तरह से मॉड्यूलर और स्व-निहित बनाती है।

कंटेनर क्वेरीज़ कैसे काम करती हैं इसका एक सरल उदाहरण निम्नलिखित है।

.wrapper {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}
@container (min-width: 500px) {
  .profile-card {
    grid-template-columns: 150px 1fr;
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: 20px;
  }

  .profile-card header,
  .profile-card .bio {
    grid-column: 2;
  }

  .profile-card .profile-image {
    grid-row: 1 / 3;
    grid-column: 1;
  }
}

यह कंटेनर क्वेरी प्रोफ़ाइल-कार्ड के लेआउट को समायोजित करती है जब इसकी चौड़ाई 500px या अधिक तक पहुंच जाती है। यह कार्ड को एक स्टैक्ड लेआउट (शीर्ष पर छवि के साथ) से दो-कॉलम लेआउट में बदल देता है जहां छवि बाईं ओर दिखाई देती है और टेक्स्ट सामग्री दाईं ओर संरेखित होती है।

निम्नलिखित छवियों का संदर्भ लें।

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

नोट: सीएसएस कंटेनर प्रश्नों के लिए इस कार्यशील डेमो पर एक नज़र डालें।

2. सबग्रिड

सबग्रिड सीएसएस ग्रिड लेआउट मॉडल का एक रोमांचक अतिरिक्त है जो आपको चाइल्ड ग्रिड आइटम में पैरेंट ग्रिड कंटेनर की ग्रिड संरचना को प्राप्त करने की अनुमति देता है। सरल शब्दों में, एक सबग्रिड आपको मूल ग्रिड की पंक्तियों या स्तंभों के अनुसार बाल तत्वों को संरेखित करने की अनुमति देता है। इस पद्धति से, आप नेस्टेड ग्रिड ओवरराइड का उपयोग किए बिना आसानी से जटिल नेस्टेड ग्रिड बना सकते हैं।

निम्नलिखित कोड उदाहरण में, लेआउट एक सूची के भीतर एक सबग्रिड दृष्टिकोण का उपयोग करता है।

.product-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.product-card {
  display: grid;
  grid-template-rows: subgrid; /* Allows the nested grid to align directly with the parent grid */
}

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

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

निम्नलिखित छवियों का संदर्भ लें।

नोट: सीएसएस सबग्रिड के लिए कार्यशील डेमो देखें।

3. छद्म वर्ग

छद्म वर्ग जैसे कि :hover, :focus, और :first-child ऐसे विकल्प हैं जो HTML तत्वों का चयन उनकी स्थिति के बजाय उनकी स्थिति के आधार पर करते हैं दस्तावेज़ में पदानुक्रम या क्रम. ये चयनकर्ता डेवलपर्स को जावास्क्रिप्ट का उपयोग किए बिना अधिक इंटरैक्टिव और उत्तरदायी यूआई बनाने की अनुमति देते हैं।

निम्नलिखित कोड उदाहरण कार्रवाई में कई छद्म वर्गों को प्रदर्शित करता है।

// HTML
...
.hover-section:hover {
  background-color: rgb(82, 11, 145); /* Changes the background color on hover */
  color: white;
}
.input-section input[type="text"]:focus {
  border-color: orange; /* Highlights the input field when focused */
  background-color: lightyellow;
}
.list-section li:first-child {
  color: green; /* Styles the first item in a list */
}
.list-section li:last-child {
  color: red; /* Styles the last item in a list */
}

यह सीएसएस कोड उदाहरण दिखाता है कि उपयोगकर्ता क्रियाओं के आधार पर शैलियों को बदलकर उपयोगकर्ता इंटरैक्शन को कैसे बढ़ाया जाए, जैसे कि तत्वों पर होवर करना या ध्यान केंद्रित करना, और किसी कंटेनर के विशिष्ट बच्चों को कैसे स्टाइल करना है।

फ़ॉर्म, नेविगेशन मेनू और इंटरैक्टिव सामग्री विकसित करते समय ये छद्म वर्ग बहुत उपयोगी होते हैं, जिन्हें उपयोगकर्ता इंटरैक्शन को निर्देशित करने के लिए दृश्य संकेतों की आवश्यकता होती है।

निम्नलिखित छवि देखें।

नोट: छद्म कक्षाओं के लिए इस कार्यशील डेमो को देखें।

4. तार्किक गुण

सीएसएस तार्किक गुण डेवलपर्स को दिशा-अज्ञेयवादी तरीके से लेआउट और रिक्ति को प्रबंधित करने की अनुमति देते हैं। दूसरे शब्दों में, सीएसएस तार्किक गुणों के साथ, आप संरचनात्मक कोड को बदले बिना, विभिन्न लेखन मोड, जैसे बाएं से दाएं (एलटीआर) और दाएं से बाएं (आरटीएल) का उपयोग कर सकते हैं।

यहां एक उदाहरण दिया गया है जो लेआउट समायोजन के लिए तार्किक गुणों का उपयोग करता है।

.lab-gradient-generator {
  margin-inline-start: 2rem; /* Responsive margin that adjusts based on text direction */
}
.lab-gradient-display {
  background: linear-gradient(
    to right, 
    lab(var(--l-start) var(--a-start) var(--b-start)), 
    lab(var(--l-end) var(--a-end) var(--b-end))
  ); /* Creates a gradient using LAB colors */
}

इस कोड उदाहरण में, margin-inline-start यह सुनिश्चित करने के लिए तार्किक गुणों का उपयोग करता है कि मार्जिन हमेशा सामग्री starting पक्ष पर रहे, स्वचालित रूप से विभिन्न लेखन प्रणालियों के लिए अनुकूल हो। background संपत्ति एक LAB color gradient के साथ दृश्यमान सुसंगत रंग संक्रमण को परिभाषित करने में तार्किक गुणों के उपयोग को दर्शाती है।

तार्किक गुण वैश्विक ऐप्स में विशेष रूप से उपयोगी होते हैं जिन्हें दिशात्मकता की परवाह किए बिना लेआउट को समान रखते हुए कई भाषाओं के समर्थन की आवश्यकता होती है।

निम्नलिखित छवि देखें।

नोट: अंतर्राष्ट्रीयकरण के साथ सीएसएस तार्किक गुणों का उपयोग कैसे किया जा सकता है, इसका कार्यशील डेमो देखें।

5. लैब कलर स्पेस

लैब कलर स्पेस आपको मानव दृष्टि के साथ अधिक निकटता से संरेखित करने के लिए रंग निर्दिष्ट करने की अनुमति देता है। यह विधि रंगों की व्यापक और अधिक सटीक रेंज प्रदान करती है, जिससे विभिन्न डिस्प्ले में अधिक स्थिरता की सुविधा मिलती है।

यहां सीएसएस में लैब कलर स्पेस के उपयोग को दर्शाने वाला एक कोड उदाहरण दिया गया है।

.color-strip:nth-child(1) {
  --l: 90%;
  --a: -80;
  --b: 80;
  background-color: lab(var(--l) var(--a) var(--b));
}
.color-strip:nth-child(2) {
  --l: 75%;
  --a: -40;
  --b: 40;
  background-color: lab(var(--l) var(--a) var(--b));
}
.color-strip:nth-child(3) {
  --l: 60%;
  --a: 0;
  --b: 0;
  background-color: lab(var(--l) var(--a) var(--b));
}
.color-strip:nth-child(4) {
  --l: 45%;
  --a: 40;
  --b: -40;
  background-color: lab(var(--l) var(--a) var(--b));
}
.color-strip:nth-child(5) {
  --l: 30%;
  --a: 80;
  --b: -80;
  background-color: lab(var(--l) var(--a) var(--b));
}

यह कोड उदाहरण डिव (रंग-पट्टी) की एक श्रृंखला स्थापित करता है, प्रत्येक में प्रयोगशाला रंग स्थान में परिभाषित एक अद्वितीय पृष्ठभूमि रंग होता है। यह दिखाता है कि कैसे प्रयोगशाला के रंग विभिन्न प्रकार के रंग और शेड्स उत्पन्न करते हैं जो विभिन्न डिस्प्ले में सुसंगत होते हैं।

डिजिटल डिजाइन में लैब रंग अमूल्य हैं, खासकर उन उद्योगों में जहां रंग सटीकता महत्वपूर्ण है, जैसे डिजिटल कला, ऑनलाइन वाणिज्य और ब्रांड डिजाइन।

निम्नलिखित छवि देखें।

नोट: अधिक जानकारी के लिए, लैब कलर स्पेस डेमो देखें।

निष्कर्ष

पढ़ने के लिए धन्यवाद! ये सीएसएस सुविधाएं आपके ऐप की कार्यक्षमता और उपयोगकर्ता अनुभव को बेहतर बनाने के लिए अद्वितीय लाभ और नई संभावनाएं प्रदान करती हैं। वे डेवलपर अनुभव को भी बेहतर बनाते हैं, क्योंकि ये सुविधाएँ उनके लिए जटिल कार्यों को सरल बनाती हैं।

इसलिए, इन उदाहरणों को स्वयं आज़माना सुनिश्चित करें और इसे आधुनिक बनाने के लिए अपने अगले वेब ऐप में लागू करें।

संबंधित ब्लॉग

• रिएक्ट स्टाइलिंग: डिजाइनरों के लिए आवश्यक टिप्स और ट्रिक्स
• अपने रिएक्ट या नेक्स्ट.जेएस ऐप में सीएसएस लिखने के शीर्ष 7 तरीके
• उत्तरदायी वेब डिज़ाइन का विकास: सीएसएस कंटेनर क्वेरीज़ का परिचय
• सीएसएस फ्लेक्स: प्रत्येक डेवलपर को क्या जानना चाहिए