सीएसएस पॉडकास्ट - 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-index हो. रूट स्क्रोलर बनाम नेस्ट किए गए इंप्लिसिट स्क्रोलर के बारे में यहां जानें.
scroll-behavior
scroll-behavior
की मदद से, एलिमेंट पर ब्राउज़र से कंट्रोल किए जाने वाले स्क्रोल के लिए ऑप्ट इन किया जा सकता है. इससे यह तय किया जा सकता है कि .scrollTo()
या लिंक जैसे इन-पेज नेविगेशन को कैसे मैनेज किया जाए.
यह खास तौर पर तब काम आता है, जब उपयोगकर्ता की प्राथमिकता के आधार पर स्क्रोल करने के व्यवहार की जानकारी देने के लिए, prefers-reduced-motion के साथ इसका इस्तेमाल किया जाता है.
@media (prefers-reduced-motion: no-preference) {
.scroll-view {
scroll-behavior: auto;
}
}
overscroll-behavior
अगर आपने कभी किसी मॉडल ओवरले के आखिर तक स्क्रोल किया है और फिर स्क्रोल करना जारी रखा है, तो ओवरले के पीछे मौजूद पेज भी आगे बढ़ गया होगा. इसे स्क्रोल चेनिंग या पैरंट स्क्रोल कंटेनर में बबल अप करना कहते हैं. overscroll-behavior
प्रॉपर्टी की मदद से, पैरंट कंटेनर में ओवरफ़्लो स्क्रोलिंग को रोका जा सकता है. इसे स्क्रोल चेनिंग कहा जाता है.
देखें कि आपको क्या समझ आया
ओवरफ़्लो के बारे में अपनी जानकारी की जांच करना
क्या टेक्स्ट ओवरफ़्लो और एलिमेंट ओवरफ़्लो एक ही हैं?
overflow
प्रॉपर्टी में दो कीवर्ड डाले जा सकते हैं. पहला कीवर्ड किस ऐक्सिस के लिए है?
बॉक्स मॉडल में, इनलाइन और दिखाने के दौरान स्क्रोलबार किस जगह का इस्तेमाल करते हैं?
नेस्ट किए गए इंप्लिसिट स्क्रोलर में स्क्रोल करने से मिलने वाले अतिरिक्त मोमेंटम को ट्रैप करने के लिए, किस प्रॉपर्टी का इस्तेमाल किया जाएगा?
overscroll-behavior
overscroll-effect
scroll-padding
scroll-behavior
scroll-hint