साइज़ अवेयर स्टाइलिंग

खास जानकारी

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

हमारा सुझाव है कि आप कंटेनर क्वेरी का इस्तेमाल करें, क्योंकि इससे कॉम्पोनेंट पूरी तरह से मॉड्यूलर बन जाते हैं. आपको यह जानने की ज़रूरत नहीं है कि कॉम्पोनेंट कहां रहेगा. इसके अलावा, हर संभावित लेआउट को मैनेज करने के लिए, जटिल मीडिया क्वेरी लिखने की भी ज़रूरत नहीं है.

लागू करना

1. कंटेनर तय करना

ज़रूरी: आपको सबसे पहले ब्राउज़र को यह बताना होगा कि किस एलिमेंट को मेज़र करना है.

.card-container {
  /* Define the container type. Use 'inline-size' for width-based queries. */
  /* You can also use 'size' for both width and height, but it requires explicit sizing. */
  container-type: inline-size;
}

2. कंटेनर के साइज़ के आधार पर स्टाइल लागू करना

जब कंटेनर का साइज़ तय साइज़ तक पहुंच जाए, तब स्टाइल लागू करने के लिए @container नियम का इस्तेमाल करें.

/* Default styles for small containers (stacked layout) */
.card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Styles for larger containers (side-by-side layout) */
/* This triggers when the container is wider than 400px */
@container (min-width: 400px) {
  .card {
    flex-direction: row;
    align-items: center;
  }
  
  .card-image {
    width: 150px;
    height: 150px;
  }
}

3. शर्तों के मुताबिक कॉन्टेंट दिखाना

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

.card-details {
  /* Hide extra details by default in small spaces */
  display: none;
}

@container (min-width: 600px) {
  .card-details {
    /* Show details when there is plenty of room */
    display: block;
  }
}

फ़ॉलबैक रणनीतियां

कंटेनर क्वेरी के साथ काम न करने वाले ब्राउज़र के लिए, सबसे सही तरीका यह है कि डिफ़ॉल्ट तौर पर सुरक्षित लेआउट (जैसे, स्टैक किया गया वर्टिकल लेआउट) का इस्तेमाल किया जाए. साथ ही, अगर स्क्रीन का सामान्य साइज़ इसकी अनुमति देता है, तो मीडिया क्वेरी का इस्तेमाल करके इसे बेहतर बनाया जाए.

/* Default safe stacked layout */
.card {
  display: flex;
  flex-direction: column;
}

/* Fallback using media queries for older browsers */
@media (min-width: 600px) {
  .card {
    flex-direction: row;
  }
}

/* Overwrite with container queries where supported */
@supports (container-type: inline-size) {
  @media (min-width: 600px) {
    .card {
      /* Reset media query fallback if needed, or let container query handle it */
      flex-direction: column;
    }
  }
  
  @container (min-width: 400px) {
    .card {
      flex-direction: row;
    }
  }
}

इससे यह पक्का होता है कि पुराने ब्राउज़र इस्तेमाल करने वाले उपयोगकर्ताओं को भी इस्तेमाल करने लायक लेआउट मिले. भले ही, वह हर कंटेनर की चौड़ाई के हिसाब से पूरी तरह से अडजस्ट न हो.