CSS कंटेनर क्वेरी युनिट्स: घटक-सापेक्ष मापन प्रणालीमध्ये प्राविण्य मिळवणे

वेब डेव्हलपमेंटच्या सतत बदलणाऱ्या जगात, रिस्पॉन्सिव्हनेस (प्रतिसादक्षमता) आता एक चैनीची गोष्ट राहिलेली नाही; ती एक गरज बनली आहे. जगभरात डिव्हाइसेस आणि स्क्रीन साईझेस वाढत असताना, विविध वातावरणात सहजपणे जुळवून घेणाऱ्या वेबसाइट्स तयार करण्याची क्षमता अत्यंत महत्त्वाची आहे. मीडिया क्वेरीज (media queries) बऱ्याच काळापासून रिस्पॉन्सिव्ह डिझाइनसाठी एक विश्वासार्ह उपाय आहेत, परंतु त्या प्रामुख्याने व्ह्यूपोर्ट (viewport)—म्हणजे ब्राउझर विंडो किंवा स्क्रीनचाच विचार करतात. तथापि, CSS ची नवीन वैशिष्ट्ये डेव्हलपर्सना खऱ्या अर्थाने जुळवून घेणारे लेआउट्स तयार करण्यास सक्षम करत आहेत, आणि या क्रांतीमध्ये सर्वात पुढे आहेत कंटेनर क्वेरी युनिट्स (Container Query Units). हा ब्लॉग पोस्ट या युनिट्सचा सखोल अभ्यास करतो, त्यांच्या शक्ती आणि व्यावहारिक अनुप्रयोगांची सर्वसमावेशक माहिती देतो.

मीडिया क्वेरीजच्या मर्यादा समजून घेणे

कंटेनर क्वेरीजबद्दल जाणून घेण्यापूर्वी, मीडिया क्वेरीजच्या मर्यादा ओळखणे आवश्यक आहे. मीडिया क्वेरीज डेव्हलपर्सना *व्ह्यूपोर्टच्या* वैशिष्ट्यांवर आधारित स्टाइल्स लागू करण्याची परवानगी देतात. उदाहरणार्थ, जेव्हा स्क्रीनची रुंदी एका विशिष्ट मर्यादेपेक्षा जास्त होते, तेव्हा तुम्ही लेआउट बदलू शकता. हा दृष्टिकोन मूलभूत रिस्पॉन्सिव्हनेससाठी चांगला काम करतो, परंतु जेव्हा गुंतागुंतीचे लेआउट्स आणि नेस्टेड कंपोनंट्स हाताळायचे असतात तेव्हा तो अनेकदा अपुरा पडतो. खालील परिस्थितींचा विचार करा:

• कंपोनंट-स्तरीय रिस्पॉन्सिव्हनेस: तुमच्याकडे टेक्स्ट आणि इमेज असलेला एक कार्ड कंपोनंट असू शकतो. मीडिया क्वेरीज वापरून, जेव्हा *व्ह्यूपोर्ट* अरुंद होतो, तेव्हा तुम्ही कार्डचा लेआउट बदलू शकता. पण जर तुमच्या पेजवर अनेक कार्ड्स असतील आणि त्यांना धारण करणाऱ्या कंटेनरची रुंदी निश्चित किंवा डायनॅमिक असेल तर काय? ते कार्ड्स त्यांच्या पालक घटकाच्या संदर्भात योग्यरित्या जुळवून घेऊ शकणार नाहीत.
• नेस्टेड घटक (Nested Elements): एका गुंतागुंतीच्या नेव्हिगेशन मेन्यूची कल्पना करा जिथे सबमेन्युजना *मुख्य मेन्यूच्या कंटेनरमध्ये* उपलब्ध असलेल्या जागेनुसार त्यांचा लेआउट बदलण्याची आवश्यकता आहे. मीडिया क्वेरीज येथे एक स्थूल साधन पुरवतात, ज्यामध्ये या स्तरावरील जुळवून घेण्यासाठी आवश्यक असलेल्या सूक्ष्म नियंत्रणाचा अभाव असतो.
• पुन्हा वापरण्यायोग्यता आणि देखरेख (Reusability and Maintainability): जेव्हा लेआउट्स व्ह्यूपोर्ट-आधारित मीडिया क्वेरीजवर जास्त अवलंबून असतात, तेव्हा कोड गुंतागुंतीचा आणि देखरेखीसाठी कठीण होऊ शकतो. यामुळे नियमांचा एक असा क्रम तयार होऊ शकतो जो डीबग करणे आणि बदलणे कठीण असते.

कंटेनर क्वेरीजची ओळख: घटक-केंद्रित डिझाइन

कंटेनर क्वेरीज या मर्यादांवर मात करतात कारण त्या तुम्हाला एका *घटकाच्या कंटेनरच्या* परिमाणांवर (dimensions) आणि स्टाइल्सवर क्वेरी करण्याची परवानगी देतात. व्ह्यूपोर्टला प्रतिसाद देण्याऐवजी, कंटेनर क्वेरीज त्या *जवळच्या पूर्वज कंटेनरला* प्रतिसाद देतात ज्यावर `container` प्रॉपर्टी लागू केली आहे. हे कंपोनंट-स्तरीय रिस्पॉन्सिव्हनेस सक्षम करते, ज्यामुळे जुळवून घेणारे डिझाइन तयार होतात जे त्यांच्या सभोवतालच्या वातावरणाला हुशारीने प्रतिसाद देतात.

मुख्य फरक व्ह्यूपोर्ट-आधारित नियंत्रणातून *घटक-केंद्रित* डिझाइनकडे जाण्यात आहे. कंटेनर क्वेरीजमुळे, तुम्ही घटकांना त्यांच्या कंटेनिंग घटकात उपलब्ध असलेल्या जागेनुसार जुळवून घेण्यास लावू शकता.

कंटेनर क्वेरी युनिट्स: जुळवून घेण्याच्या क्षमतेचे बिल्डिंग ब्लॉक्स

कंटेनर क्वेरी युनिट्स हे मापन युनिट्स आहेत जे कंटेनर क्वेरीजच्या *आत* काम करतात. ते व्ह्यूपोर्ट युनिट्स (`vw`, `vh`) प्रमाणेच कार्य करतात परंतु व्ह्यूपोर्टऐवजी कंटेनरच्या आकाराशी संबंधित असतात. अनेक कंटेनर क्वेरी युनिट्स उपलब्ध आहेत, प्रत्येक घटक मोजण्यासाठी आणि जुळवून घेण्यासाठी एक विशिष्ट मार्ग प्रदान करतो.

cqw: कंटेनर क्वेरी रुंदी (Container Query Width)

cqw युनिट कंटेनरच्या रुंदीच्या 1% दर्शवते. याला `vw` चे कंटेनर-सापेक्ष व्हर्जन समजा. जर एखादा कंटेनर 500px रुंद असेल, तर `1cqw` म्हणजे 5px.

उदाहरण: समजा तुम्हाला कंटेनरच्या रुंदीवर आधारित हेडिंगच्या टेक्स्टचा आकार बदलायचा आहे:

            
.container {
  width: 500px;
  padding: 20px;
  border: 1px solid #ccc;
  container: inline-size; /* or container: size; */
}

h1 {
  font-size: calc(3cqw + 1rem);
}

            

              
                Copy
              
            
          

या उदाहरणात, कंटेनरची रुंदी बदलल्यास हेडिंगचा फॉन्ट आकार डायनॅमिकली समायोजित होईल. जर कंटेनरची रुंदी 500px असेल, तर हेडिंगचा फॉन्ट आकार `calc(15px + 1rem)` असेल. `container: inline-size;` किंवा `container: size;` हे डिक्लरेशन `.container` घटकावर कंटेनर क्वेरीज सक्षम करते. `inline-size` व्हॅल्यू कंटेनरच्या रुंदीला संदर्भित करते.

cqh: कंटेनर क्वेरी उंची (Container Query Height)

cqh युनिट कंटेनरच्या उंचीच्या 1% दर्शवते, हे `cqw` प्रमाणेच आहे, परंतु कंटेनरच्या उंचीवर आधारित आहे. जर कंटेनर 300px उंच असेल, तर `1cqh` म्हणजे 3px.

उदाहरण: एका कंटेनरमध्ये एक इमेज आहे अशी कल्पना करा. तुम्ही कंटेनरच्या उंचीच्या सापेक्ष इमेजची उंची समायोजित करण्यासाठी `cqh` वापरू शकता.

            
.image-container {
  height: 200px;
  container: size;
}

img {
  width: 100%;
  height: calc(80cqh);
  object-fit: cover; /* Prevents image distortion */
}

            

              
                Copy
              
            
          

या प्रकरणात, इमेजची उंची कंटेनरच्या उंचीच्या 80% असेल.

cqi: कंटेनर क्वेरी इनलाइन आकार (Container Query Inline Size)

cqi युनिट हे आडव्या लेखन पद्धतींमध्ये (जसे की इंग्रजी) `cqw` युनिटच्या आणि उभ्या लेखन पद्धतींमध्ये `cqh` च्या समतुल्य आहे. ते कंटेनरच्या इनलाइन आकाराच्या 1% दर्शवते, जे *इनलाइन अक्षावरील* (inline axis) परिमाण आहे (उदा. आडव्या लेआउटमध्ये रुंदी, उभ्या लेआउटमध्ये उंची). जेव्हा तुम्हाला तुमचे डिझाइन वेगवेगळ्या लेखन दिशांमध्ये जुळवून घेणारे बनवायचे असेल तेव्हा हे उपयुक्त आहे.

cqb: कंटेनर क्वेरी ब्लॉक आकार (Container Query Block Size)

दुसरीकडे, cqb युनिट कंटेनरच्या ब्लॉक आकाराच्या 1% दर्शवते. हे *ब्लॉक अक्षावरील* (block axis) परिमाण आहे (उदा. आडव्या लेआउटमध्ये उंची, उभ्या लेआउटमध्ये रुंदी). जर कंटेनर आडव्या लेखन पद्धतीत 400px उंच असेल, तर `1cqb` 4px च्या बरोबर असेल.

उदाहरण: अशा परिस्थितीचा विचार करा जिथे तुम्ही एक मॅगझिन लेआउट तयार करत आहात जिथे कंटेंट उभा किंवा आडवा असू शकतो. तुम्ही उपलब्ध ब्लॉक आकारानुसार हेडलाइनचा फॉन्ट आकार समायोजित करण्यासाठी `cqb` वापरू शकता, ज्यामुळे लेआउट पोर्ट्रेट असो वा लँडस्केप, तो योग्यरित्या जुळवून घेईल.

            
.article-container {
  width: 400px;
  height: 300px; /* Example dimensions */
  container: size;
}

h2 {
  font-size: calc(4cqb + 1rem);
}

            

              
                Copy
              
            
          

व्यावहारिक अंमलबजावणी: एक वास्तविक-जगाचे उदाहरण

चला, कंटेनर क्वेरी युनिट्स प्रत्यक्षात कसे काम करतात हे दाखवण्यासाठी एक रिस्पॉन्सिव्ह कार्ड कंपोनंट तयार करूया. हे उदाहरण बहुतेक डिझाइन फ्रेमवर्क आणि कंटेंट मॅनेजमेंट सिस्टमसाठी काम करेल.

ध्येय: एक कार्ड कंपोनंट डिझाइन करा जो त्याच्या कंटेनरच्या उपलब्ध रुंदीनुसार आपला लेआउट (उदा. इमेजची जागा, टेक्स्ट अलाइनमेंट) जुळवून घेईल.

HTML संरचना:

            
<div class="card-container">
  <div class="card">
    <img src="image.jpg" alt="Card Image">
    <div class="card-content">
      <h3>Card Title</h3>
      <p>Some descriptive text goes here. This is some example content. </p>
      <a href="#">Read More</a>
    </div>
  </div>
</div>

            

              
                Copy
              
            
          

CSS (मूलभूत स्टाइल्स):

            
.card-container {
  width: 100%;
  padding: 20px;
  /* Add styles for your container as needed.  Make sure a width is applied */
}

.card {
  display: flex;
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
  container: inline-size; /* Enable container queries */
}

img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  margin-right: 15px;
}

.card-content {
  padding: 15px;
}

            

              
                Copy
              
            
          

CSS (कंटेनर क्वेरी स्टाइल्स):

            
@container (width < 400px) {
  .card {
    flex-direction: column;
  }

  img {
    width: 100%;
    margin-right: 0;
    margin-bottom: 10px;
  }
}

@container (width < 250px) {
  .card-content h3 {
    font-size: 1.2rem;
  }
}

            

              
                Copy
              
            
          

स्पष्टीकरण:

• आम्ही कंटेनर क्वेरीज सक्षम करण्यासाठी `.card` घटकावर `container: inline-size;` सेट केले आहे.
• पहिली `@container` क्वेरी कंटेनरची रुंदी 400px पेक्षा कमी झाल्यावर कार्डची फ्लेक्स दिशा `column` मध्ये बदलते, ज्यामुळे इमेज टेक्स्टच्या वर दिसते.
• दुसरी `@container` क्वेरी कंटेनरची रुंदी 250px च्या खाली गेल्यावर हेडिंगचा फॉन्ट आकार कमी करते, ज्यामुळे लहान स्क्रीनवर वाचनीयता सुधारते.

हे उदाहरण दाखवते की कंटेनर क्वेरीज कंपोनंट-स्तरीय रिस्पॉन्सिव्हनेस कसे सक्षम करतात, ज्यामुळे तुमचे कार्ड्स केवळ व्ह्यूपोर्ट-आधारित मीडिया क्वेरीजवर अवलंबून न राहता वेगवेगळ्या कंटेनर आकारांना सहजपणे जुळवून घेतात.

सर्वोत्तम पद्धती आणि विचार करण्यासारख्या गोष्टी

कंटेनर क्वेरी युनिट्स महत्त्वपूर्ण फायदे देतात, तरीही सर्वोत्तम अंमलबजावणीसाठी खालील सर्वोत्तम पद्धती लक्षात ठेवा:

• विशिष्टता (Specificity): CSS विशिष्टतेबद्दल जागरूक रहा. कंटेनर क्वेरी नियमांची विशिष्टता नियमित नियमांइतकीच असते, त्यामुळे तुमचे नियम योग्यरित्या लागू झाले आहेत याची खात्री करा. आवश्यक असल्यास अधिक विशिष्ट निवडक (selectors) वापरा.
• कार्यक्षमता (Performance): जास्त प्रमाणात कंटेनर क्वेरीज संभाव्यतः कार्यक्षमतेवर परिणाम करू शकतात. तथापि, आधुनिक ब्राउझर यासाठी ऑप्टिमाइझ केलेले आहेत. कंटेनर क्वेरी अभिव्यक्तींमध्ये जास्त गुंतागुंतीच्या गणितांचा वापर टाळा.
• चाचणी (Testing): वेगवेगळ्या कंटेनर आकार आणि डिव्हाइसेसवर तुमच्या डिझाइनची कसून चाचणी करा. वेगवेगळ्या परिस्थितींचे अनुकरण करण्यासाठी तुमच्या ब्राउझरच्या डेव्हलपर टूल्सचा वापर करा. स्मार्टफोनपासून डेस्कटॉपपर्यंत, विविध स्क्रीन आकारांवर तुमचे डिझाइन तपासा, जेणेकरून तुमचा लेआउट अपेक्षेप्रमाणे जुळवून घेतो याची खात्री होईल.
• नावे देण्याच्या पद्धती (Naming Conventions): तुमच्या कंटेनर क्वेरीज आणि संबंधित क्लासेससाठी एक स्पष्ट आणि सुसंगत नाव देण्याची पद्धत अवलंबवा, ज्यामुळे कोडची वाचनीयता आणि देखभाल सुधारेल.
• प्रगतीशील सुधारणा (Progressive Enhancement): तुमचे लेआउट एका रिस्पॉन्सिव्ह, बेसलाइन डिझाइनसह तयार करण्याचा विचार करा जे कंटेनर क्वेरीजशिवाय काम करते. त्यानंतर, मोठ्या किंवा अधिक जुळवून घेणाऱ्या कंटेनर आकारांवर वापरकर्त्याचा अनुभव सुधारण्यासाठी कंटेनर क्वेरी-आधारित सुधारणा जोडा.
• प्रवेशयोग्यता (Accessibility): लेआउटमधील बदलांची पर्वा न करता तुमचे डिझाइन प्रवेशयोग्य राहील याची खात्री करा. सर्व वापरकर्त्यांसाठी एक वापरण्यायोग्य अनुभव राखण्यासाठी स्क्रीन रीडर आणि कीबोर्ड नेव्हिगेशनसह चाचणी करा.
• नेस्टिंगचा विचार करा: कंटेनर क्वेरीज नेस्ट केल्या जाऊ शकतात. गुंतागुंतीचे आणि जुळवून घेणारे कंपोनंट्स तयार करण्यासाठी हे एक शक्तिशाली वैशिष्ट्य आहे. उदाहरणार्थ, एका कार्ड कंपोनंटमध्ये एक हेडिंग असू शकते जे त्याचा फॉन्ट आकार समायोजित करण्यासाठी कंटेनर क्वेरीज वापरते. नेस्टेड कंटेनर क्वेरीज लवचिकता आणि अधिक गुंतागुंतीचे, जुळवून घेणारे इंटरफेस तयार करण्याची क्षमता वाढवतात.

जागतिक प्रभाव: कंटेनर क्वेरीज आणि आंतरराष्ट्रीय वेब

जागतिक वेब अत्यंत वैविध्यपूर्ण आहे, जिथे वापरकर्ते विविध डिव्हाइसेस, स्क्रीन आकार आणि सांस्कृतिक पार्श्वभूमीतून वेबसाइट्स वापरतात. कंटेनर क्वेरीज या संदर्भात विशेषतः फायदेशीर आहेत कारण त्या डेव्हलपर्सना असे लेआउट तयार करण्यास सक्षम करतात जे:

• स्थानिक सामग्रीशी जुळवून घेतात: वेबसाइट्सना अनेकदा वेगवेगळ्या शब्द लांबीच्या आणि मजकूर दिशांच्या (उदा. अरबी किंवा हिब्रू सारख्या उजवीकडून-डावीकडे लिहिणाऱ्या भाषा) भाषांना सामावून घेण्याची आवश्यकता असते. कंटेनर क्वेरीज मजकूराचा आकार, लेआउट आणि कंपोनंटचे वर्तन डायनॅमिकरित्या समायोजित करण्यास मदत करू शकतात, जेणेकरून प्रदर्शित भाषेची पर्वा न करता वाचनीयता आणि सकारात्मक वापरकर्ता अनुभव सुनिश्चित होईल.
• विविध डिव्हाइस इकोसिस्टमला समर्थन देतात: जगभरात डिव्हाइसेस आणि स्क्रीन आकारांची संख्या वाढतच आहे. कंटेनर क्वेरीज असे कंपोनंट्स तयार करण्यास मदत करतात जे त्यांच्या उपलब्ध जागेनुसार आपोआप आकार बदलतात आणि रिफ्लो होतात, ज्यामुळे भारतातील स्मार्टफोनवर, ब्राझीलमधील टॅब्लेटवर किंवा जपानमधील मोठ्या स्क्रीन डिस्प्लेवर एकसारखा वापरकर्ता अनुभव मिळतो.
• आंतर-सांस्कृतिक उपयोगिता सुधारतात: कंटेनर क्वेरीजसह रिस्पॉन्सिव्ह डिझाइन विविध प्रेक्षकांसाठी वापरकर्ता अनुभव वाढवते. उपलब्ध जागेला हुशारीने प्रतिसाद देणारे जुळवून घेणारे लेआउट जगभरातील वेबसाइट्सची वाचनीयता आणि दृश्य आकर्षण लक्षणीयरीत्या सुधारू शकतात, ज्यामुळे वापरकर्त्याची प्रतिबद्धता आणि समाधान वाढते.
• आंतरराष्ट्रीयीकरण (i18n) सुलभ करणे: i18n साठी डिझाइन करताना कंटेनर क्वेरीज विशेषतः उपयुक्त आहेत. वेगवेगळ्या लांबीच्या उत्पादन वर्णनांसह असलेल्या उत्पादन ग्रिडचा विचार करा. कंटेनर क्वेरीजसह, तुम्ही इंग्रजी किंवा स्पॅनिशमधील लहान वर्णनांसाठी अधिक संक्षिप्त आणि रिस्पॉन्सिव्ह लेआउट तयार करू शकता, आणि जर्मन किंवा चायनीजमधील लांब वर्णनांसाठी एक विस्तृत लेआउट तयार करू शकता.

कंटेनर क्वेरीजचा स्वीकार करून, डेव्हलपर्स जगभरातील वापरकर्त्यांसाठी खऱ्या अर्थाने जुळवून घेणारे आणि समावेशक वेब अनुभव तयार करू शकतात, ज्यात अनेक स्क्रीन आकारांमधील फरक, लेखन दिशा आणि मजकूराची लांबी विचारात घेतली जाते.

सुरुवात करण्यासाठी साधने आणि संसाधने

कंटेनर क्वेरीजसह प्रयोग करण्यासाठी तुम्हाला मदत करणारी काही उपयुक्त साधने आणि संसाधने येथे आहेत:

• ब्राउझर समर्थन: कंटेनर क्वेरीज आता Chrome, Firefox, Safari आणि Edge सह प्रमुख ब्राउझरद्वारे मोठ्या प्रमाणावर समर्थित आहेत. नवीनतम ब्राउझर सुसंगतता माहितीसाठी Can I Use तपासा.
• डेव्हलपर टूल्स: तुमच्या घटकांच्या गणना केलेल्या स्टाइल्सची तपासणी करण्यासाठी आणि तुमच्या कंटेनर क्वेरीजची चाचणी घेण्यासाठी वेगवेगळ्या कंटेनर आकारांसह प्रयोग करण्यासाठी तुमच्या ब्राउझरच्या डेव्हलपर टूल्सचा वापर करा.
• ऑनलाइन ट्युटोरियल्स आणि डॉक्युमेंटेशन: CSS-Tricks, MDN Web Docs आणि YouTube ट्युटोरियल्ससह अनेक ऑनलाइन संसाधने, कंटेनर क्वेरीजचे सखोल स्पष्टीकरण आणि उदाहरणे देतात.
• CodePen आणि तत्सम प्लॅटफॉर्म: तुमच्या कंटेनर क्वेरी-आधारित डिझाइनचे त्वरीत प्रोटोटाइप आणि चाचणी करण्यासाठी CodePen किंवा JSFiddle सारख्या परस्परसंवादी वातावरणात तुमच्या कोडसह प्रयोग करा.

निष्कर्ष

CSS कंटेनर क्वेरी युनिट्स रिस्पॉन्सिव्ह वेब डिझाइनमध्ये एक महत्त्वपूर्ण झेप दर्शवतात. घटक-केंद्रित जुळवून घेण्याची क्षमता सक्षम करून, कंटेनर क्वेरीज डेव्हलपर्सना लवचिक आणि देखरेख करण्यायोग्य लेआउट तयार करण्यास सक्षम करतात जे त्यांच्या वातावरणाला हुशारीने प्रतिसाद देतात. वेब डेव्हलपमेंट जसजसे विकसित होत राहील, तसतसे आधुनिक, जुळवून घेणारे आणि वापरकर्ता-अनुकूल वेबसाइट्स तयार करण्यासाठी कंटेनर क्वेरीजचा स्वीकार करणे महत्त्वाचे ठरेल. या ब्लॉग पोस्टमध्ये वर्णन केलेली तत्त्वे समजून घेऊन आणि कंटेनर क्वेरी युनिट्ससह प्रयोग करून, तुम्ही जगभरातील वापरकर्त्यांसाठी अधिक मजबूत, देखरेख करण्यायोग्य आणि जागतिक स्तरावर प्रवेशयोग्य वेब अनुभव तयार करू शकता.

शेवटी, तुमच्या वर्कफ्लोमध्ये कंटेनर क्वेरीज समाकलित करणे एक स्पष्ट फायदा प्रदान करते. तुमच्या डिझाइन सिस्टममध्ये कंटेनर क्वेरीज समाविष्ट करण्यास सुरुवात करणे ही एक चांगली सराव आहे. यामुळे अधिक मजबूत आणि देखरेख करण्यायोग्य कोड तयार होऊ शकतो, ज्यामुळे जलद विकास चक्र आणि वाढीव डिझाइन लवचिकता शक्य होते.

तुम्ही प्रयोग करत असताना, कंटेनर क्वेरीज वापरणारा एक छोटा प्रकल्प तयार करण्याचा विचार करा आणि तुम्ही काय शिकलात ते दस्तऐवजीकरण करा. तुमचा अनुभव शेअर करा आणि या महत्त्वाच्या डिझाइन संकल्पनांना तुमच्या नेटवर्कमध्ये प्रोत्साहन द्या.