ओवरफ़्लो क्लिपिंग कंट्रोल

overflow: hidden एक "ब्लंट इंस्ट्रुमेंट" है, जो कॉन्टेंट को हमेशा पैडिंग-बॉक्स पर क्लिप करता है. वहीं, overflow: clip और overflow-clip-margin को मिलाकर, ब्लॉक कंटेनर में लेआउट को बेहतर तरीके से कंट्रोल करने के लिए "स्कैल्पेल" मिलता है.

overflow: clip और overflow-clip-margin का इस्तेमाल करके, यह बताएं कि क्लिपिंग कहां होती है. बाउंड्री को इनर बॉक्स-मॉडल के किनारों के साथ सटीक रूप से अलाइन किया जा सकता है. इसके अलावा, क्लिपिंग बाउंड्री को एलिमेंट के बॉक्स से आगे तक बढ़ाया जा सकता है. इसके लिए, आपको ऑफ़सेट (सेफ़्टी मार्जिन) तय करना होगा. यह आधुनिक तरीका काफ़ी असरदार है. इसमें कस्टम पैडिंग और नेगेटिव मार्जिन वाले अतिरिक्त रैपर कंटेनर जोड़ने की ज़रूरत नहीं पड़ती. ऐसा सिर्फ़ इसलिए किया जाता है, ताकि विज़ुअल इफ़ेक्ट (जैसे, चाइल्ड एलिमेंट की शैडो) बिना कटे रेंडर हो सकें.

बदले गए एलिमेंट (<img>, <video>, <canvas> वगैरह) डिफ़ॉल्ट रूप से overflow: clip और overflow-clip-margin: content-box पर सेट होते हैं. इससे आपको object-fit या border-radius का इस्तेमाल करने वाली इमेज को साफ़ तौर पर शामिल करने का कंट्रोल मिलता है.

इन्हें कैसे लागू करें

1. overflow: clip लागू करें: पक्का करें कि टारगेट एलिमेंट में overflow: clip चालू हो. overflow-clip-margin को लागू करने के लिए, ब्लॉक लेआउट कंटेनर पर overflow: clip को सेट करना ज़रूरी है. अगर overflow को hidden, auto या scroll पर सेट किया जाता है, तो ब्राउज़र overflow-clip-margin प्रॉपर्टी को अनदेखा कर देता है. overflow: clip, सभी तरह की स्क्रोलिंग को रोकता है. इसमें उपयोगकर्ता की ओर से की जाने वाली स्क्रोलिंग और JavaScript की मदद से प्रोग्राम के हिसाब से की जाने वाली स्क्रोलिंग, दोनों शामिल हैं.
2. बॉक्स-एज के हिसाब से अलाइन करना: क्लिपिंग बाउंड्री को इनर बॉक्स-मॉडल एज के हिसाब से सटीक तरीके से अलाइन करने के लिए, कीवर्ड का इस्तेमाल करें:
   • content-box: यह कॉन्टेंट को ठीक वहीं से क्लिप करता है जहां से कॉन्टेंट एरिया शुरू होता है. इससे पैडिंग एरिया पूरी तरह से खाली रहता है. कॉन्टेंट, पैडिंग के किनारे पर खत्म हो जाता है. नेस्ट किए गए लेआउट मॉड्यूल के लिए बेहतरीन.
   • padding-box (डिफ़ॉल्ट): बॉर्डर के अंदरूनी किनारे पर कॉन्टेंट को क्लिप करता है.
   • border-box: यह बॉर्डर के बाहरी किनारे पर कॉन्टेंट को क्लिप करता है. इससे कॉन्टेंट, पारदर्शी बॉर्डर के नीचे या उसके ऊपर आंशिक रूप से ओवरलैप हो सकता है.
3. कोई ऑफ़सेट (ब्लीड) तय करें: पिक्सल काटने से पहले, सेफ़्टी ज़ोन बनाने के लिए लंबाई की वैल्यू दें. जैसे, 15px या 5px. इससे चाइल्ड एलिमेंट की शैडो, लेआउट की ज्यामिति को बढ़ाए बिना, बाउंड्री के किनारे से बाहर रेंडर हो पाती हैं.
4. बॉक्स-एज और ऑफ़सेट को जोड़ना: किसी खास बॉक्स एज से ऑफ़सेट करने के लिए, बॉक्स एज और लंबाई के ऑफ़सेट, दोनों को एक साथ बताएं (उदाहरण के लिए, content-box 15px).

कोड का उदाहरण

यहां दिए गए उदाहरणों में, डाइनैमिक कंटेनर लेआउट कंट्रोल दिखाए गए हैं. इनमें, अपने-आप होने वाली इनर कॉन्टेंट कर्व नेस्टेड फ़्रेमिंग और चाइल्ड एलिमेंट शैडो प्रोटेक्शन के साथ-साथ, प्रोग्रेसिव एनहैंसमेंट फ़ॉलबैक भी दिखाए गए हैं.

ब्लॉक कंटेनर: नेस्ट किए गए गोल कर्व

• overflow-clip-margin: content-box को गोल कोनों और कस्टम पैडिंग वाले पैरंट कंटेनर पर लागू करें.
• इनर चाइल्ड मीडिया और फ़ुटर कॉम्पोनेंट पर, कॉन्सेंट्रिक इनर कॉन्टेंट बॉक्स की बाउंड्री के साथ-साथ, एक जैसे राउंडेड कॉर्नर लागू करें. इससे, कस्टम calc() लॉजिक के बिना, अजीब नेस्टिंग कर्व की समस्या हल हो जाती है.

<div class="nested-curve-parent">
  <img src="avatar.jpg" alt="Nested Curve Demo">
  <div class="nested-curve-footer">Card Footer</div>
</div>

/**
 * Standard block layout container with outer corner radii and padding.
 * Keeps base level 1 fallback clipping roughly at the inner padding box.
 */
.nested-curve-parent {
  /* Level 1 Fallback: clips child roughly at the padding box */
  overflow: hidden;
}

/* Inner footer component with 12px rounded to visually demonstrate automatic concentric corner clipping */
.nested-curve-footer {
  background: #111;
  color: #fff;
}

@supports (overflow-clip-margin: content-box) {
  .nested-curve-parent {
    /* MANDATORY: overflow: clip is required on non-replaced elements */
    overflow: clip;
    /* Automatically curves clipping edge to match inner content-box radius */
    overflow-clip-margin: content-box;
  }
}

ब्लॉक कंटेनर: चाइल्ड एलिमेंट शैडो ब्लीड

• overflow: clip लागू करें और overflow-clip-margin की लंबाई के लिए ऑफ़सेट तय करें. इससे एक ऐसा सेफ़्टी ज़ोन बनेगा जिसमें चाइल्ड व्यू की शैडो, पैरंट कंटेनर के बाहर बिना कटे दिखेगी. इसके लिए, लेआउट की ज्यामिति में बदलाव करने की ज़रूरत नहीं पड़ेगी. इसके बिना, चाइल्ड व्यू की शैडो, पैरंट व्यू की सीमा पर क्लिप हो जाती है.

<div class="safety-zone-parent">
  <h4>Clipped Container</h4>
  <p>Inner content boundaries safely contained.</p>
  <!-- Child button element positioned inside with a prominent shadow -->
  <button class="demo-glowing-btn">Submit</button>
</div>

/**
 * Standard block layout container clipping inner content.
 * Base fallback uses overflow: hidden, which abruptly slices child element shadows.
 */
.safety-zone-parent {
  /* Level 1 Fallback: clips overflowing content but truncates child shadows */
  overflow: hidden;
}

/* Child button element positioned inside with an expanded shadow */
.demo-glowing-btn {
  display: block;
  box-shadow: 0 8px 13px rgba(229, 46, 113, 0.7);
}

@supports (overflow-clip-margin: 15px) {
  .safety-zone-parent {
    overflow: clip;
    /* Establishes a visible safety zone allowing child element shadows to render safely outside */
    overflow-clip-margin: 15px;
  }
}

रणनीति को लागू करने के तरीके और सबसे सही तरीके

• overflow-clip-margin का इस्तेमाल करते समय, टारगेट एलिमेंट पर overflow: clip लागू करें. ऐसा इसलिए, क्योंकि कस्टम या अंदर की ओर घुमावदार क्लिप मार्जिन को चालू करने के लिए, स्टैंडर्ड ब्लॉक लेआउट कंटेनर पर overflow को clip पर सेट करना ज़रूरी है.
• ज़रूर करें: गोल कोनों वाले पैडेड कंटेनर पर overflow-clip-margin: content-box सेट करें. इससे, बिना गोल किए गए इंटरनल चाइल्ड एलिमेंट, अपने-आप ही नेस्ट किए गए बॉर्डर कर्व में क्लिप हो जाते हैं. इसके लिए, मैन्युअल तरीके से पैडिंग घटाने की ज़रूरत नहीं पड़ती.
• ज़रूर करें: filter: drop-shadow() जैसे बाहरी विज़ुअल इफ़ेक्ट लागू करते समय, overflow-clip-margin को तय की गई लंबाई के ऑफ़सेट के साथ कॉन्फ़िगर करें. इससे, लेआउट की ज्यामिति में बदलाव किए बिना या उसे बड़ा किए बिना, बाउंडिंग बॉक्स को शार्प तरीके से छोटा होने से रोका जा सकता है.
• अगर कंटेनर को JavaScript के ज़रिए प्रोग्राम के हिसाब से स्क्रोल करने की ज़रूरत है या वह position: sticky एलिमेंट के लिए तुरंत लेआउट कॉन्टेक्स्ट के तौर पर काम करता है, तो overflow: clip लागू न करें. ऐसा इसलिए, क्योंकि clip स्क्रोल करने की सुविधा को पूरी तरह से बंद कर देता है.

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

जिन टारगेट एनवायरमेंट में overflow: clip या overflow-clip-margin के लिए नेटिव सपोर्ट नहीं है उनके लिए, परतदार वृद्धि फ़ॉलबैक रणनीतियां सीधे तौर पर विज़ुअल इंटेंट पर निर्भर करती हैं:

• मुख्य सीमाओं को बनाए रखने के लिए, overflow: hidden को बुनियादी अनुभव के तौर पर इस्तेमाल करें.
• उन एलिमेंट पर overflow: visible का इस्तेमाल करें जहां ड्रॉप-शैडो या बाहरी कोने वाले बैज को काटा नहीं जाना चाहिए.

परतदार वृद्धि के फ़ॉलबैक को लागू करने की प्रोसेस पूरी करना

<!-- 1. Nested rounded edges fallback -->
<div class="demo-container-fallback">
  <img src="example.jpg" alt="Nested Curve Fallback">
  <div class="demo-footer-fallback">Footer</div>
</div>

<!-- 2. Child element shadow bleed fallback -->
<div class="demo-safety-parent">
  <h4>Container</h4>
  <p>Inner boundaries contained.</p>
  <button class="demo-glowing-btn">Submit</button>
</div>

/**
 * 1. Block Container Nested Curves Fallback
 * Keeps base level 1 fallback clipping roughly at the inner padding box.
 */
.demo-container-fallback {  
  /* Level 1 Fallback: clip child roughly at padding box */
  overflow: hidden;
}

.demo-container-fallback img {
  object-fit: cover;
  display: block;
}

@supports (overflow-clip-margin: content-box) {
  .demo-container-fallback {
    overflow: clip;
    overflow-clip-margin: content-box;
  }
}

/**
 * 2. Child Element Shadow Bleed Fallback
 * Base fallback clips content using overflow: hidden, abruptly truncating child element shadows.
 */
.demo-safety-parent {  
  /* Level 1 Fallback */
  overflow: hidden;
}

.demo-glowing-btn {
  display: block;
  width: 100%;
  padding: 6px 12px;
  background: #e52e71;
  box-shadow: 0 8px 13px rgba(229, 46, 113, 0.65);
}

@supports (overflow-clip-margin: 15px) {
  .demo-safety-parent {
    overflow: clip;
    overflow-clip-margin: 15px;
  }
}