ओवरफ़्लो

सीएसएस पॉडकास्ट - 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;
}

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

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

रूट-स्क्रोलर बनाम इंप्लिसिट-स्क्रोलर

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

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

स्क्रोल-व्यवहार

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

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

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

ओवरस्क्रोल-व्यवहार

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

आपने जो सीखा है उसकी जांच करें

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

संसाधन

Smashing Journal ऐप्लिकेशन से, सीएसएस में ओवरफ़्लो और डेटा में होने वाली कमी