ओवरफ़्लो

सीएसएस पॉडकास्ट - 034: ओवरफ़्लो

जब कॉन्टेंट, पैरंट से ज़्यादा बड़ा हो जाता है, तो उसे मैनेज करने के कई विकल्प होते हैं. अतिरिक्त स्पेस जोड़ने के लिए स्क्रोल किया जा सकता है, ओवरफ़्लो होने वाले किनारों को क्लिप किया जा सकता है, एलिप्सिस के साथ कट-ऑफ़ को दिखाया जा सकता है, और बहुत कुछ किया जा सकता है. फ़ोन ऐप्लिकेशन और एक से ज़्यादा स्क्रीन साइज़ के लिए डेवलप करते समय, ओवरफ़्लो का ध्यान रखना खास तौर पर अहम है.

सीएसएस में क्लिप करने के दो अलग-अलग विकल्प होते हैं; text-overflow से टेक्स्ट की अलग-अलग लाइनों को क्लिप करने में मदद मिलेगी. वहीं, overflow प्रॉपर्टी से बॉक्स मॉडल में ओवरफ़्लो को कंट्रोल करने में मदद मिलेगी.

text-overflow के साथ सिंगल लाइन ओवरफ़्लो

text-overflow प्रॉपर्टी का इस्तेमाल, ऐसे किसी भी एलिमेंट के लिए करें जिसमें टेक्स्ट नोड शामिल हों. उदाहरण के लिए, पैराग्राफ़, <p>. इससे यह तय होता है कि टेक्स्ट, एलिमेंट की उपलब्ध जगह में फ़िट नहीं होने पर कैसा दिखेगा. किसी पेज पर दिखने वाला पूरा एचटीएमएल टेक्स्ट, टेक्स्ट नोड में होता है. text-overflow का इस्तेमाल करने के लिए, आपको टेक्स्ट की एक ऐसी लाइन चाहिए जिसे रैप न किया गया हो. इसलिए, आपको overflow को hidden पर सेट करना होगा. साथ ही, white-space की ऐसी वैल्यू भी होनी चाहिए जिससे टेक्स्ट रैप न हो.

p {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

ओवरफ़्लो प्रॉपर्टी का इस्तेमाल करना

ओवरफ़्लो प्रॉपर्टी किसी एलिमेंट पर सेट की जाती हैं, ताकि यह कंट्रोल किया जा सके कि जब उसके बच्चों को ज़रूरत से ज़्यादा जगह की ज़रूरत हो, तो क्या हो. ऐसा जान-बूझकर भी किया जा सकता है. जैसे, Google Maps जैसे इंटरैक्टिव मैप में, जहां उपयोगकर्ता किसी खास साइज़ में काटी गई बड़ी इमेज को पैन करता है. यह अनजाने में भी हो सकता है. जैसे, चैट ऐप्लिकेशन में उपयोगकर्ता ने लंबा मैसेज टाइप किया हो, जो टेक्स्ट बबल में न फ़िट हो.

ओवरफ़्लो को दो हिस्सों में बांटा जा सकता है. पैरंट एलिमेंट के लिए, स्पेस की तय सीमा होती है, जो नहीं बदलेगी. आप इसे एक खिड़की की तरह मान सकते हैं. चाइल्ड एलिमेंट ऐसे कॉन्टेंट होते हैं जिन्हें माता-पिता के लिए ज़्यादा स्टोरेज चाहिए. इसे इस तरह से समझें कि आपने खिड़की से बाहर क्या देखा. ओवरफ़्लो को मैनेज करने से, यह तय करने में मदद मिलेगी कि विंडो इस कॉन्टेंट को कैसे फ़्रेम करेगी.

वर्टिकल और हॉरिज़ॉन्टल ऐक्सिस पर स्क्रोल करना

overflow-y प्रॉपर्टी, डिवाइस व्यूपोर्ट के वर्टिकल ऐक्सिस के साथ फ़िज़िकल ओवरफ़्लो को कंट्रोल करती है. इसलिए, इसे ऊपर और नीचे स्क्रोल किया जा सकता है.

overflow-x प्रॉपर्टी, डिवाइस व्यूपोर्ट के हॉरिज़ॉन्टल ऐक्सिस पर ओवरफ़्लो को कंट्रोल करती है. इसलिए, इसे बाईं और दाईं ओर स्क्रोल किया जा सकता है.

स्क्रोल की दिशा के लिए लॉजिकल प्रॉपर्टी

overflow-inline और overflow-block प्रॉपर्टी, दस्तावेज़ की दिशा और लिखने के मोड के आधार पर ओवरफ़्लो सेट करती हैं.

overflow का शॉर्टहैंड

overflow शॉर्टहैंड, एक लाइन में overflow-x और overflow-y, दोनों स्टाइल सेट करता है:

overflow: hidden scroll;

अगर दो कीवर्ड दिए गए हैं, तो पहला overflow-x पर और दूसरा overflow-y पर लागू होगा. ऐसा न होने पर, overflow-x और overflow-y, दोनों एक ही वैल्यू का इस्तेमाल करते हैं.

वैल्यू

आइए, overflow प्रॉपर्टी के लिए उपलब्ध वैल्यू और कीवर्ड पर नज़र डालते हैं.

overflow: visible (डिफ़ॉल्ट)

प्रॉपर्टी को सेट किए बिना, overflow: visible वेब के लिए डिफ़ॉल्ट मान है. इससे यह पक्का हो जाता है कि कॉन्टेंट अनजाने में छिपा हुआ नहीं है. साथ ही, यह "कभी कॉन्टेंट न छिपाएं" या "सटीक लेआउट के सुरक्षित लेआउट" के मुख्य नियमों का पालन करता है.

overflow: hidden

overflow: hidden का इस्तेमाल करने पर, कॉन्टेंट को तय की गई दिशा में क्लिप किया जाता है. साथ ही, उसे दिखाने के लिए स्क्रोलबार नहीं दिए जाते.

overflow: scroll

overflow: scroll, स्क्रोलबार की सुविधा चालू करता है, ताकि उपयोगकर्ता कॉन्टेंट को स्क्रोल कर सकें. भले ही, फ़िलहाल कॉन्टेंट ओवरफ़्लो न हो रहा हो, लेकिन स्क्रोलबार मौजूद होंगे. अगर आने वाले समय में किसी कंटेनर को स्क्रोल किया जा सकता है, तो लेआउट में होने वाले बदलाव को कम करने के लिए यह एक बेहतरीन तरीका है. उदाहरण के लिए, साइज़ बदलने पर. साथ ही, यह उपयोगकर्ता को स्क्रोल किए जा सकने वाले हिस्सों के लिए, विज़ुअल तौर पर तैयार करता है.

overflow: clip

overflow: hidden की तरह, overflow: clip वाले कॉन्टेंट को एलिमेंट के पैडिंग बॉक्स में क्लिप किया जाता है. clip और hidden के बीच अंतर यह है कि clip कीवर्ड, प्रोग्रैम्ड तरीके से स्क्रोल करने के साथ-साथ, किसी भी तरह की स्क्रोल करने की अनुमति नहीं देता.

overflow: auto

आखिर में, सबसे ज़्यादा इस्तेमाल की जाने वाली वैल्यू, overflow: auto. यह उपयोगकर्ता की प्राथमिकताओं का ध्यान रखता है और ज़रूरत पड़ने पर स्क्रोलबार दिखाता है. हालांकि, यह डिफ़ॉल्ट रूप से छिप जाता है. साथ ही, उपयोगकर्ता और ब्राउज़र को स्क्रोल करने की ज़िम्मेदारी भी इससे मिलती है.

स्क्रोल करना और ओवरफ़्लो

इनमें से कई overflow व्यवहार एक स्क्रोलबार से शुरू करते हैं, लेकिन कुछ खास स्क्रोल व्यवहार और प्रॉपर्टी हैं जिनकी मदद से आप अपने ओवरफ़्लो कंटेनर पर स्क्रोलिंग को कंट्रोल कर सकते हैं.

स्क्रोल करना और सुलभता

यह पक्का करना ज़रूरी है कि स्क्रोल किया जा सकने वाला हिस्सा फ़ोकस स्वीकार कर सके, ताकि कीबोर्ड इस्तेमाल करने वाला व्यक्ति टैब पर जाकर बॉक्स पर जा सके. इसके बाद, स्क्रोल करने के लिए ऐरो बटन का इस्तेमाल करें.

स्क्रोलिंग बॉक्स को फ़ोकस करने की अनुमति देने के लिए, tabindex="0" जोड़ें. साथ ही, aria-labelledby एट्रिब्यूट के साथ कोई नाम और सही role एट्रिब्यूट जोड़ें. उदाहरण के लिए:

<div tabindex="0" role="region" aria-labelledby="id-of-descriptive-text">
    content
</div>

इसके बाद, सीएसएस का इस्तेमाल करके यह दिखाया जा सकता है कि बॉक्स पर फ़ोकस है. इसके लिए, outline प्रॉपर्टी का इस्तेमाल करके यह विज़ुअल क्लू दिया जा सकता है कि अब इसे स्क्रोल किया जा सकता है.

सुलभता लागू करने के लिए सीएसएस का इस्तेमाल करना सेक्शन में एड्रियन रोज़ली ने बताया कि सुलभता से जुड़े रिग्रेशन को रोकने में सीएसएस कैसे मदद कर सकती है. उदाहरण के लिए, सही एट्रिब्यूट का इस्तेमाल करने पर ही स्क्रोलिंग चालू करने और फ़ोकस इंडिकेटर जोड़ने के लिए. नीचे दिए गए नियमों के मुताबिक, बॉक्स को सिर्फ़ तब स्क्रोल किया जा सकेगा, जब उसमें tabindex, aria-labelledby, और role एट्रिब्यूट मौजूद हों.

[role][aria-labelledby][tabindex] {
  overflow: auto;
}

[role][aria-labelledby][tabindex]:focus {
  outline: .1em solid blue;
}

बॉक्स मॉडल में स्क्रोलबार की पोज़िशन

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

root-scroller बनाम implicit-scroller

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

रूट स्क्रोलर बनाने के लिए, स्क्रोलर प्रमोशन नाम का इस्तेमाल किया जा सकता है. इसके लिए, कंटेनर को ठीक करके, पक्का करें कि यह पूरे व्यूपोर्ट को कवर करता हो और स्क्रोलर की मदद से सबसे ऊपर z-इंडेक्स हो. रूट स्क्रोलर बनाम नेस्ट किए गए इंप्लिसिट स्क्रोलर के बारे में यहां जानें.

scroll-behavior

scroll-behavior की मदद से, एलिमेंट पर ब्राउज़र से कंट्रोल किए जाने वाले स्क्रोल के लिए ऑप्ट इन किया जा सकता है. इससे यह तय किया जा सकता है कि .scrollTo() या लिंक जैसे इन-पेज नेविगेशन को कैसे मैनेज किया जाए.

यह खास तौर पर तब काम आता है, जब उपयोगकर्ता की प्राथमिकता के आधार पर स्क्रोल करने के व्यवहार की जानकारी देने के लिए, prefers-reduced-motion के साथ इसका इस्तेमाल किया जाता है.

@media (prefers-reduced-motion: no-preference) {
  .scroll-view {
    scroll-behavior: auto;
  }
}

overscroll-behavior

अगर आपने कभी किसी मॉडल ओवरले के आखिर तक स्क्रोल किया है और फिर स्क्रोल करना जारी रखा है, तो ओवरले के पीछे मौजूद पेज भी आगे बढ़ गया होगा. इसे स्क्रोल चेनिंग या पैरंट स्क्रोल कंटेनर में बबल अप करना कहते हैं. overscroll-behavior प्रॉपर्टी की मदद से, पैरंट कंटेनर (जिसे स्क्रोल चेन कहा जाता है) में ओवरफ़्लो स्क्रोलिंग को लीक होने से रोका जा सकता है.

देखें कि आपको कितना समझ आया है

ओवरफ़्लो के बारे में अपनी जानकारी की जांच करें

संसाधन

Smashing Magazine से सीएसएस में ओवरफ़्लो और डेटा लॉस