Articles
CSS का परिचय
`overflow` और `contain` गुण

`overflow` और `contain` गुण

यह लेख overflow और contain गुणों की व्याख्या करता है।

आप overflow गुण का उपयोग करके स्क्रॉलबार प्रदर्शित करने और सामग्री को क्लिप करने जैसे पहलुओं को समझ सकते हैं।

YouTube Video

प्रीव्यू के लिए HTML

css-overflow-contain.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-overflow-contain.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Overflow Content</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Overflow And Contain Properties</h2>
 20        </header>
 21        <article>
 22            <h3>overflow</h3>
 23            <section>
 24                <header><h4>overflow: visible</h4></header>
 25                <section class="sample-view">
 26                    <section class="overflow-visible">
 27                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 28                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 29                    </section>
 30                </section>
 31                <header><h4>overflow: hidden</h4></header>
 32                <section class="sample-view">
 33                    <section class="overflow-hidden">
 34                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 35                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 36                    </section>
 37                </section>
 38                <header><h4>overflow: scroll</h4></header>
 39                <section class="sample-view">
 40                    <section class="overflow-scroll">
 41                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 42                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 43                    </section>
 44                </section>
 45                <header><h4>overflow: auto</h4></header>
 46                <section class="sample-view">
 47                    <section class="overflow-auto">
 48                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 49                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 50                    </section>
 51                </section>
 52                <header><h4>overflow-x: scroll; overflow-y: hidden;</h4></header>
 53                <section class="sample-view">
 54                    <section class="overflow-xy">
 55                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 56                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 57                    </section>
 58                </section>
 59                <header><h4>overflow: clip</h4></header>
 60                <section class="sample-view">
 61                    <section class="overflow-clip">
 62                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 63                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 64                    </section>
 65                </section>
 66            </section>
 67        </article>
 68        <article>
 69            <h3>contain</h3>
 70            <section>
 71                <header><h4>contain: layout</h4></header>
 72                <section class="sample-view">
 73                    <section class="contain-layout">
 74                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 75                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 76                    </section>
 77                </section>
 78                <header><h4>contain: paint</h4></header>
 79                <section class="sample-view">
 80                    <section class="contain-paint">
 81                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 82                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 83                    </section>
 84                </section>
 85                <header><h4>contain: size</h4></header>
 86                <section class="sample-view">
 87                    <section class="contain-size">
 88                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 89                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 90                    </section>
 91                </section>
 92                <header><h4>contain: style</h4></header>
 93                <section class="sample-view">
 94                    <section class="contain-style">
 95                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 96                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 97                    </section>
 98                </section>
 99                <header><h4>contain: content</h4></header>
100                <section class="sample-view">
101                    <section class="contain-content">
102                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
103                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
104                    </section>
105                </section>
106            </section>
107        </article>
108    </main>
109</body>
110</html>

overflow और contain गुण

overflow

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

overflow गुण का मूलभूत परिचय

overflow गुण के चार मुख्य मान हैं: visible, hidden, scroll, और auto।

visible 
1section.overflow-visible {
2    width: 400px;
3    height: 100px;
4    overflow: visible;
5}

visible डिफ़ॉल्ट मान है, जिसमें तत्व की सामग्री बॉक्स के आकार से बाहर निकल जाती है, लेकिन फिर भी दिखाई देती है। बॉक्स से बाहर निकले भाग अन्य तत्वों के ऊपर आ सकते हैं, लेकिन विशेष रूप से स्क्रॉलबार प्रदर्शित नहीं किया जाता।

विशेषताएँ:

  • सामग्री बिना किसी सीमा के प्रदर्शित होती है।
  • स्क्रॉलबार प्रदर्शित नहीं किए जाते।
hidden 
1section.overflow-hidden {
2    width: 400px;
3    height: 100px;
4    overflow: hidden;
5}

hidden ऐसी सेटिंग है जिसमें यदि तत्व की सामग्री बॉक्स के आकार से बड़ी हो जाए, तो बाहर निकलने वाले भाग प्रदर्शित नहीं किए जाते। स्क्रॉलबार प्रदर्शित नहीं होते, और बाहर निकलने वाली सामग्री अदृश्य रहती है।

विशेषताएँ:

  • जब सामग्री तत्व की सीमा से बाहर चली जाती है, तो अतिरिक्त भाग छिपा दिया जाता है।
  • स्क्रॉलबार प्रदर्शित नहीं किए जाते।
scroll 
1section.overflow-scroll {
2    width: 400px;
3    height: 100px;
4    overflow: scroll;
5}

जब scroll का उपयोग किया जाता है, तो यदि तत्व की सामग्री बॉक्स से बाहर जाती है, तो स्क्रॉलबार जबरदस्ती प्रदर्शित किए जाते हैं। भले ही सामग्री बाहर न निकले, फिर भी स्क्रॉलबार हमेशा प्रदर्शित होते हैं।

विशेषताएँ:

  • भले ही सामग्री तत्व की सीमा के अंदर फिट हो, फिर भी स्क्रॉलबार प्रदर्शित किए जाते हैं।
  • क्षैतिज और लंबवत दिशाओं में स्क्रॉल करना संभव है।
auto 
1section.overflow-auto {
2    width: 400px;
3    height: 100px;
4    overflow: auto;
5}

auto केवल तब स्क्रॉलबार दिखाता है जब सामग्री बाहर निकलती है; यदि सामग्री तत्व के बॉक्स में फिट हो जाती है, तो स्क्रॉलबार प्रदर्शित नहीं होते।

विशेषताएँ:

  • स्क्रॉलबार केवल तभी प्रदर्शित होते हैं जब सामग्री बॉक्स से बाहर निकल जाती है।
  • स्वतः एक स्क्रॉल करने योग्य क्षेत्र बनाता है।
overflow-x और overflow-y 
1section.overflow-xy {
2    width: 400px;
3    height: 100px;
4    overflow-x: scroll;
5    overflow-y: hidden;
6}

overflow प्रॉपर्टी को क्षैतिज (x अक्ष) और लंबवत (y अक्ष) दिशा के लिए व्यक्तिगत रूप से नियंत्रित किया जा सकता है।

इस तरह, आप overflow-x और overflow-y का उपयोग करके लंबवत और क्षैतिज स्क्रॉलबार को व्यक्तिगत रूप से सेट कर सकते हैं।

ओवरफ्लो के लिए विचार

overflow प्रॉपर्टी का उपयोग करते समय, कुछ बिंदु ऐसे हैं जिनका आपको ध्यान रखना चाहिए।

स्क्रॉलबार के प्रदर्शन के कारण डिज़ाइन पर प्रभाव

स्क्रॉलबार प्रदर्शित करने के लिए scroll या auto का उपयोग पेज के कुल डिज़ाइन को बाधित कर सकता है। विशेष रूप से, यदि तत्व दाएं या नीचे के किनारे पर रखे गए हैं, तो स्क्रॉलबार उन्हें कम दृश्यमान बना सकते हैं।

डिफ़ॉल्ट ब्राउज़र व्यवहार

स्क्रॉलबार कैसे प्रदर्शित होते हैं और कार्य करते हैं, यह ब्राउज़रों के बीच भिन्न हो सकता है। विशेष रूप से Windows और macOS के बीच, स्क्रॉलबार प्रदर्शन शैलियों में अंतर होता है, जिससे डिज़ाइन इच्छित रूप से प्रदर्शित नहीं हो सकते हैं। क्रॉस-ब्राउज़र परीक्षण करना आवश्यक है।

चाइल्ड तत्वों का ओवरफ्लो

पैरेंट तत्व पर overflow: hidden सेट करना उन चाइल्ड तत्वों को छुपा देता है जो पैरेंट के बॉक्स से बाहर हो जाते हैं। यह पॉप-अप्स और मोडल विंडो को सही तरीके से प्रदर्शित होने से रोक सकता है।

overflow: clip (CSS Level 3) 

1section.overflow-clip {
2    width: 400px;
3    height: 100px;
4    overflow: clip;
5}

नई CSS विनिर्देश में, एक वैल्यू overflow: clip भी पेश की गई है। यह hidden के समान है, लेकिन यह स्क्रॉलिंग की अनुमति नहीं देता और केवल सामग्री को क्लिप करता है। वर्तमान में, इसे केवल कुछ ब्राउज़रों द्वारा समर्थित किया गया है।

विशेषताएँ:

  • यदि सामग्री ओवरफ्लो करती है, तो वह भाग पूरी तरह से छिप जाएगा।
  • स्क्रॉलबार प्रदर्शित नहीं किए जाते।

निष्कर्ष

CSS overflow प्रॉपर्टी वेब डिज़ाइन में सामग्री के प्रदर्शन को नियंत्रित करने के लिए एक आवश्यक उपकरण है। जब सामग्री तत्व के बॉक्स से अधिक हो जाती है, तो उचित स्क्रॉलबार या क्लिपिंग का उपयोग करके इसे प्रबंधित करना उपयोगकर्ताओं को एक अधिक उपयोगकर्ता-अनुकूल इंटरफ़ेस प्रदान करता है। इसके अलावा, overflow-x और overflow-y का उपयोग करके सटीक नियंत्रण की अनुमति मिलती है। इस मान के साथ, जब तत्व की सामग्री बॉक्स से अधिक हो जाती है, तो स्क्रॉलबार जबरन प्रदर्शित किए जाते हैं। भले ही सामग्री बाहर न निकले, फिर भी स्क्रॉलबार हमेशा प्रदर्शित होते हैं।

contain

contain प्रॉपर्टी का अवलोकन

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

यह वेब पेज की प्रदर्शन क्षमता के लिए महत्वपूर्ण है और विशेष रूप से जटिल लेआउट्स या बड़ी मात्रा में सामग्री वाली वेबसाइट्स के लिए प्रभावी है।

contain के मान

contain प्रॉपर्टी के निम्नलिखित मान होते हैं:।

layout 
1section.contain-layout {
2    width: 300px;
3    height: 300px;
4    contain: layout;
5}

layout लेआउट से संबंधित प्रतिबंध लागू करता है। इस मान का उपयोग करके, किसी तत्व का आकार और स्थिति अन्य तत्वों को प्रभावित नहीं करती। उदाहरण के लिए, भले ही किसी तत्व का आकार आंतरिक रूप से परिवर्तन हो, वह परिवर्तन बाहरी लेआउट को प्रभावित नहीं करता।

paint 
1section.contain-paint {
2    width: 300px;
3    height: 300px;
4    contain: paint;
5}

paint पेंटिंग (ड्रॉइंग) के प्रभाव को सीमित करता है। जब यह मान निर्दिष्ट किया जाता है, तो तत्व के अंदर किया गया ड्रॉइंग बाहरी तत्वों को प्रभावित नहीं करता, इस प्रकार रिपेंट गणनाओं की सीमा को सीमित करता है।

size 
1section.contain-size {
2    width: 300px;
3    height: 300px;
4    contain: size;
5}

size यह सुनिश्चित करता है कि तत्व का आकार बाहरी तत्वों पर निर्भर नहीं है। विशेष रूप से, यह चाइल्ड तत्वों के आकार परिवर्तन को पैरेंट तत्व के आकार को प्रभावित करने से रोकता है, जिससे लेआउट स्थिरता में सुधार होता है।

style 
1section.contain-style {
2    width: 300px;
3    height: 300px;
4    contain: style;
5}

style यह सुनिश्चित करता है कि किसी तत्व की स्टाइल बाहरी तत्वों को प्रभावित नहीं करती। उदाहरण के लिए, contain: style; निर्दिष्ट करते समय यह सुनिश्चित किया जाता है कि उस तत्व में स्टाइल बदलने से अन्य तत्व प्रभावित न हों, और पुनः गणनाओं की सीमा कम हो।

content 
1section.contain-content {
2    width: 300px;
3    height: 300px;
4    contain: content;
5}

content एक समग्र मान है जो layout, paint, size और style को लागू करता है। इसका उपयोग करके, आप सुनिश्चित कर सकते हैं कि तत्व का लेआउट, ड्रॉइंग, आकार, और स्टाइल का बाहरी तत्वों पर कोई प्रभाव नहीं पड़ेगा।

प्रदर्शन के लाभ

contain प्रॉपर्टी का उपयोग करने का मुख्य कारण वेब पेज प्रदर्शन को सुधारना है। विशेष रूप से, यह निम्न स्थितियों में प्रभावी है।

  1. रिफ्लो अनुकूलन: जब किसी तत्व का आकार या लेआउट बदलता है, तो इसका प्रभाव सबसे छोटे संभव दायरे तक सीमित किया जा सकता है। यह अनावश्यक रिफ्लो (लेआउट पुनः गणना) के दायरे को कम करता है और ब्राउज़र पर भार को कम करता है।

  2. रिपेंट को कम करना: ड्रा करने वाले क्षेत्र को सीमित करके, तत्व की स्टाइल या सामग्री बदलने पर दोबारा पेंटिंग के लिए आवश्यक भाग को कम किया जा सकता है।

  3. घटक-आधारित विकास: चूंकि प्रत्येक घटक या मॉड्यूल अन्य तत्वों से स्वतंत्र रूप से काम करता है, यह बड़े पैमाने के वेब अनुप्रयोगों में भी प्रत्येक घटक के प्रदर्शन को बढ़ाता है।

नोट्स

contain प्रॉपर्टी का उपयोग करते समय, आपको निम्नलिखित बिंदुओं का ध्यान रखना चाहिए।

  1. आवेदन की सीमा को समझना: contain प्रॉपर्टी प्रदर्शन अनुकूलन के लिए उपयोगी है, लेकिन इसे हर तत्व पर लागू नहीं किया जाना चाहिए। इसे उपयुक्त स्थानों पर सही तरीके से उपयोग करना महत्वपूर्ण है। उदाहरण के लिए, इसका उपयोग अक्सर बदलने वाले तत्वों या बड़े DOM संरचना के हिस्सों पर करने से प्रदर्शन खराब हो सकता है।

  2. ब्राउज़र संगतता: contain प्रॉपर्टी एक नई CSS विशेषता है और इसे सभी ब्राउज़रों द्वारा पूरी तरह से समर्थित नहीं किया गया है। यह प्रमुख ब्राउज़रों (Chrome, Firefox, Edge, Safari) में समर्थित है, लेकिन पुराने संस्करणों में लागू नहीं हो सकता है।

निष्कर्ष

CSS contain प्रॉपर्टी वेब पेजों और एप्लिकेशन की प्रदर्शन को अनुकूलित करने के लिए एक शक्तिशाली उपकरण है। किसी विशिष्ट तत्व के प्रभाव को अन्य पर सीमित करके, यह रिफ्लो और रिपेंट की लागत को कम करता है, जिससे समग्र रेंडरिंग प्रक्रिया को सुव्यवस्थित किया जाता है। हालांकि, यह महत्वपूर्ण है कि इसका उपयोग कहां किया जाए, इसे सावधानीपूर्वक विचार करें और सही तरीके से लागू करें।

आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।

YouTube Video

फ्लेक्सबॉक्स, ग्रिड, और कॉलम लेआउट्स की तुलना