नेटिव सीएसएस नेस्टिंग आपके सीएसएस कोड को सरल बना सकती है और आपके समग्र कोडिंग अनुभव को बढ़ा सकती है।
ऐतिहासिक रूप से, सीएसएस के साथ काम करना एक कठिन भाषा रही है। सीएसएस प्रीप्रोसेसरों ने सीएसएस के साथ काम करना आसान बना दिया और लूप, मिक्सिन और बहुत कुछ जैसी अतिरिक्त सुविधाएँ भी प्रदान कीं। पिछले कुछ वर्षों में, सीएसएस अधिक सक्षम हो गया है और उसने मूल रूप से सीएसएस प्रीप्रोसेसरों द्वारा शुरू की गई कुछ सुविधाओं को अपनाया है। ऐसी ही एक सुविधा है "नेस्टेड स्टाइलिंग"।
नेस्टेड स्टाइलिंग डेवलपर्स को HTML संरचना को प्रतिबिंबित करते हुए सीएसएस नियमों को एक दूसरे के भीतर जोड़ने की अनुमति देती है। इसके परिणामस्वरूप अधिक व्यवस्थित और पठनीय कोड प्राप्त होता है, क्योंकि HTML तत्वों और उनकी संबंधित शैलियों के बीच संबंध स्पष्ट रूप से स्पष्ट होता है।
नेस्टेड स्टाइलिंग: पुराना तरीका
नेस्टेड स्टाइलिंग एक सुविधा है जो कई में उपलब्ध है Sass जैसे CSS प्रीप्रोसेसर, स्टाइलस, और कम सीएसएस। हालाँकि इन प्रीप्रोसेसरों के बीच वाक्यविन्यास भिन्न हो सकता है, अंतर्निहित अवधारणा सुसंगत रहती है। यदि आप सभी को स्टाइल करना चाहते हैं एच 1 ए में तत्व डिव के वर्ग नाम के साथ CONTAINER, नियमित सीएसएस में, आप लिखेंगे:
.container {
background-color: #f2f2f2;
}
.containerh1 {
font-size: 44px;
}
लेस सीएसएस जैसे सीएसएस प्रीप्रोसेसर में, आप नेस्टेड स्टाइल को इस तरह लागू करते हैं:
.container{
background-color: #f2f2f2;
h1 {
font-size:44px;
}
}
उपरोक्त कोड ब्लॉक नियमित सीएसएस कार्यान्वयन के समान परिणाम प्राप्त करता है लेकिन कोड पढ़ने वाले किसी भी डेवलपर के लिए यह समझना आसान बनाता है कि क्या हो रहा है। "पदानुक्रम" की यह भावना सीएसएस प्रीप्रोसेसरों के सबसे बड़े विक्रय बिंदुओं में से एक थी।
घोंसला बनाने वाले पेड़ को बिना किसी सीमा के किसी भी गहराई तक घोंसला बनाया जा सकता है, लेकिन सावधान रहना आवश्यक है, क्योंकि अत्यधिक गहराई तक घोंसला बनाने से कोड में गड़बड़ी हो सकती है।
सीएसएस में नेटिव नेस्टेड स्टाइलिंग
सभी ब्राउज़रों में नेटिव नेस्टेड स्टाइलिंग के लिए समर्थन शामिल नहीं है। क्या मैं उपयोग कर सकता हूँ... वेबसाइट यह जांचने में आपकी सहायता कर सकती है कि आपका लक्षित ब्राउज़र इस सुविधा का समर्थन करता है या नहीं।
सीएसएस में नेटिव नेस्टेड स्टाइलिंग सीएसएस प्रीप्रोसेसर के समान ही काम करती है, जिसका अर्थ है कि किसी भी चयनकर्ता को दूसरे के अंदर नेस्ट करना संभव है। लेकिन एक महत्वपूर्ण अंतर है जिस पर आपको ध्यान देना चाहिए। नीचे दिए गए कोड ब्लॉक पर एक नज़र डालें:
html>
<htmllang="en">
<head>
<metacharset="UTF-8" />
<metaname="viewport"content="width=device-width, initial-scale=1.0" />
<title>Nested Styling in CSStitle>
head>
<body>
<divclass="container">
<h1>Hello from the children of planet Earth!h1>
div>
<style>
.container {
background-color: red;
h1 {
color: yellow;
}
}
style>
body>
html>
उपरोक्त कोड ब्लॉक में, क्लास नाम वाला div CONTAINER इसका पृष्ठभूमि रंग लाल है. के लिए स्टाइल एच 1 तत्व निहित है .कंटेनर अवरोध पैदा करना। यह एच 1 तत्व का रंग पीला है. जब आप इस कोड को ब्राउज़र में चलाएंगे, तो आपको कुछ गलत दिखाई दे सकता है। ब्राउज़र लाल पृष्ठभूमि रंग को सही ढंग से लागू करता है CONTAINER div, लेकिन एच 1 उपयुक्त स्टाइल नहीं है.
ऐसा इसलिए है क्योंकि लेस जैसे सीएसएस प्रीप्रोसेसर की तुलना में नेस्टेड स्टाइलिंग सीएसएस में थोड़ा अलग तरीके से काम करती है। आप नेस्टेड ट्री में किसी HTML तत्व को सीधे संदर्भित नहीं कर सकते। इसे ठीक करने के लिए, आपको एक एम्परसेंड का उपयोग करना होगा (&) जैसा कि नीचे दिखाया गया है:
.container {
background-color: red;
& h1 {
color: yellow;
}
}
उपरोक्त कोड ब्लॉक में, & मूल चयनकर्ता के संदर्भ के रूप में कार्य करता है। एम्परसेंड को पहले रखना एच 1 तत्व को ब्राउज़र को यह बताना चाहिए कि आप सभी बच्चों को लक्षित कर रहे हैं एच 1 पर तत्व CONTAINER div. जब आप ब्राउज़र में कोड चलाते हैं, तो आपको निम्नलिखित देखना चाहिए:
तब से & मूल तत्व को संदर्भित करने के लिए उपयोग किया जाने वाला प्रतीक है, किसी तत्व के छद्म वर्गों और छद्म तत्वों को इस तरह लक्षित करना काफी संभव है:
.parent1{
&:hover{
background-color: red;
}
&::before{
content:"Hereisapseudoelement.";
}
}
सीएसएस नेस्टेड स्टाइलिंग के कार्यान्वयन से पहले, यदि आपका लक्ष्य ब्राउज़र की चौड़ाई के आधार पर शैलियों को सशर्त रूप से लागू करना था, तो आपको निम्नलिखित विधि का सहारा लेना होगा:
p {
color:black;
}
@media (min-width:750px) {
p {
color:gray;
}
}
जब ब्राउज़र पेज प्रस्तुत करता है, तो यह उसका रंग निर्धारित करता है पी ब्राउज़र की चौड़ाई के आधार पर तत्व। यदि ब्राउज़र की चौड़ाई 750px से अधिक है, तो यह ग्रे रंग का उपयोग करता है; अन्यथा, यह डिफ़ॉल्ट रंग (काला) लागू करता है।
यह कार्यान्वयन ठीक से काम करता है, लेकिन जैसा कि आप कल्पना कर सकते हैं, चीजें बहुत तेजी से बहुत जटिल हो सकती हैं, खासकर जब आपको कुछ नियमों के आधार पर विभिन्न शैलियों को लागू करने की आवश्यकता होती है। अब घोंसला बनाना संभव है मीडिया के प्रश्नों सीधे किसी तत्व के स्टाइल ब्लॉक में।
p {
color:black;
@media (min-width:750px) {
color:gray;
}
}
यह कोड ब्लॉक मूल रूप से पिछले वाले जैसा ही काम करता है, लेकिन यह समझने में आसान होने के लाभ के साथ आता है। केवल मीडिया क्वेरी और नेस्टिंग पैरेंट तत्व को देखकर, आप बता सकते हैं कि परिभाषित शर्तें पूरी होने पर ब्राउज़र उपयुक्त शैलियों को कैसे लागू करेगा।
सीएसएस नेस्टेड शैलियों के साथ एक वेबसाइट को स्टाइल करना
अब तक आपने जो कुछ भी सीखा है उसे अभ्यास में लाने का समय आ गया है एक साधारण वेबसाइट बनाना और सीएसएस में नेस्टेड स्टाइलिंग सुविधा का लाभ उठाना। एक फ़ोल्डर बनाएं और उसे जो चाहें नाम दें। उस फ़ोल्डर में, एक बनाएं Index.htm और ए स्टाइल.सीएसएस फ़ाइल।
में Index.htm फ़ाइल में निम्नलिखित बॉयलरप्लेट कोड जोड़ें:
html>
<htmllang="en">
<head>
<metacharset="UTF-8" />
<metaname="viewport"content="width=device-width, initial-scale=1.0" />
<linkrel="stylesheet"href="style.css" />
<title>Simple Websitetitle>
head>
<body>
<divclass="container">
<divclass="article">
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit.h1>
<divclass="meta-data">
<spanclass="author">David Uzonduspan>
<spanclass="time">3 hours agospan>
div>
<div>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo ut
quasi hic sint dolorum sapiente magni ratione? Suscipit commodi ad,
asperiores nostrum natus aperiam et alias, officiis dolorum ipsa vero
minima consequatur recusandae quasi aliquid quibusdam ducimus eaque!
Excepturi voluptas eveniet nemo, earum doloribus, soluta architecto
iste repellat autem aspernatur beatae ut quis odio est voluptates sunt
qui rerum blanditiis minus! Rerum labore nobis, odit quod amet dolorum
quae laudantium.
div>
div>
<divclass="sidebar">
<h2>Trending Articlesh2>
<h4>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit, iusto ipsum!h4>
div>
div>
body>
html>
उपरोक्त कोड ब्लॉक एक नकली समाचार वेबसाइट के लिए मार्कअप को परिभाषित करता है। अगला, खोलें स्टाइल.सीएसएस फ़ाइल करें और निम्नलिखित कोड जोड़ें:
.container {
display: flex;
gap: 25px;@media(max-width: 750px) {
flex-direction: column;
}.article{
width:90%;
}& div:nth-child(3) {
text-align: justify;
}& span {
color: rgb(67, 66, 66);&:nth-child(1)::before {
font-style: italic;
content: "Writtenby ";
}&:nth-child(2) {
font-style: italic;
&::before {
content: " ~ ";
}
}
}.meta-data {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: solid 1px;
}
}
उपरोक्त कोड ब्लॉक वेबसाइट को पूरी तरह से सीएसएस नेस्टेड स्टाइल के साथ स्टाइल करता है। .कंटेनर चयनकर्ता मूल गहराई के रूप में कार्य करता है। आप इसका उपयोग करके इस चयनकर्ता का संदर्भ दे सकते हैं & प्रतीक। जब आप ब्राउज़र में कोड चलाते हैं, तो आपको निम्नलिखित देखना चाहिए:
क्या आपको अभी भी CSS प्रीप्रोसेसर की आवश्यकता है?
देशी सीएसएस में नेस्टेड शैलियों की शुरूआत के साथ, सीएसएस प्रीप्रोसेसर अनावश्यक प्रतीत हो सकते हैं। हालाँकि, यह ध्यान रखना महत्वपूर्ण है कि सीएसएस प्रीप्रोसेसर केवल नेस्टेड स्टाइलिंग के अलावा और भी बहुत कुछ प्रदान करते हैं। वे लूप, मिक्सिन, फ़ंक्शंस और बहुत कुछ जैसी सुविधाएँ प्रदान करते हैं। अंततः, सीएसएस प्रीप्रोसेसर का उपयोग करना है या नहीं यह आपके विशिष्ट उपयोग के मामले और व्यक्तिगत प्राथमिकताओं पर निर्भर करता है।
