सीएसएस अतिप्रवाह और डेटा हानि

इस लेख में, राहेल एंड्रयू उन स्थितियों पर चर्चा करते हैं, जिनमें आप साइट लेआउट में अतिप्रवाह कर सकते हैं और बताते हैं कि कैसे सीएसएस उन स्थितियों में अधिक कुशल लेआउट विधियों का निर्माण करने के लिए विकसित हुआ, जहां सामग्री की मात्रा अग्रिम में ज्ञात नहीं है।

---

सीएसएस को सामग्री को पठनीय बनाने के लिए डिज़ाइन किया गया है। यदि आप एक HTML दस्तावेज़ देख रहे हैं जो शीर्षकों और पैराग्राफ (सीएसएस के बिना) के साथ चिह्नित है, तो इसे ब्राउज़र में आसानी से पढ़े जाने वाले रूप में प्रदर्शित किया जाता है। शीर्षक बड़े और बोल्ड हैं, और पैराग्राफ के बीच वह स्थान है जो ब्राउज़र में एम्बेडेड स्टाइल शीट द्वारा नियंत्रित किया जाता है। हालाँकि, जैसे ही आपको पृष्ठ का लेआउट बदलने की आवश्यकता होगी, आप अपने हाथों में डिज़ाइन का नियंत्रण रखना शुरू कर देंगे। कुछ स्थितियों में, इसका मतलब यह होगा कि आप अतिप्रवाहित तत्वों के साथ काम संभालेंगे।

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

ओवरफ्लो से हमारा क्या मतलब है?

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



फ्लोट का उपयोग करना, ऐसा प्रतीत होता है कि सरल कार्य असंभव था। जब कोई ब्लॉक सुव्यवस्थित (फ्लोट) हो जाता है, तो वह अपने पड़ोसियों के साथ बातचीत नहीं करता है; इसका मतलब यह है कि यह पता लगाने का कोई तरीका नहीं है कि अगला तत्व क्या है और वर्तमान को उसी ऊंचाई तक बढ़ाएं।



कभी-कभी तत्वों को एक पंक्ति में रखने की कोशिश करते हुए, डेवलपर्स ने एक निश्चित ब्लॉक ऊंचाई निर्धारित की, ऊंचाई को समान बनाने के लिए संभावित सामग्री की मात्रा का अनुमान लगाने की कोशिश की। बेशक, वेब इतना सरल नहीं है, और जब सामग्री की मात्रा अलग थी, या पाठ का आकार बड़ा हो गया, तो पाठ ब्लॉक के नीचे से आगे बढ़ने लगा। यह एक अतिप्रवाह था।



कभी-कभी लोग पूछते हैं कि वे सामग्री को साइट तक पहुंचने से कैसे रोक सकते हैं। मेरे सीएमएस के तकनीकी समर्थन को उन उपयोगकर्ताओं से संपर्क किया गया जिन्होंने पूछा कि इस कारण से सामग्री को कैसे सीमित किया जाए। उन्होंने कहा कि यह अतिरिक्त सामग्री "लेआउट को तोड़ती है"। हम में से जो लोग समझते थे कि तत्वों की ऊंचाई जानने की असंभवता लेआउट की मौलिक प्रकृति थी, उन्होंने हमें ऐसे लेआउट बनाने के लिए मजबूर किया जो समान ऊंचाई के ब्लॉकों की अनुपस्थिति को छिपाते थे। एक सामान्य समाधान सामग्री के गायब होने के प्रभाव के साथ एक ढाल जोड़ना था जो सीमाओं से परे जाता है। हम पृष्ठभूमि के रंगों और ब्लॉक फ्रेम का उपयोग करने से बचेंगे। या हम तत्वों की ऊंचाई समान करने के लिए कृत्रिम स्तंभ तकनीकों का उपयोग करेंगे।

यह दूसरों के सापेक्ष एक तत्व की ऊंचाई को नियंत्रित करने में असमर्थता है, इसलिए, वेब डिज़ाइन को प्रभावित किया - एक तकनीकी सीमा ने वेबसाइटों को डिजाइन करने के तरीके को बदल दिया। मुझे खुशी है कि फ्लेक्सबॉक्स और ग्रिड के आगमन के साथ, यह समस्या न केवल गायब हो गई, बल्कि डिफ़ॉल्ट रूप से, इन नए लेआउट तरीकों का व्यवहार ब्लॉकों को समान ऊंचाई तक खींचता है। align-items - stretch संपत्ति align-items - stretch प्रारंभिक मूल्य align-items - stretch , जिसके कारण ब्लॉक को ग्रिड-क्षेत्र या फ्लेक्स-कंटेनर की ऊंचाई तक बढ़ाया जाता है।


इसके अलावा, सीएसएस ग्रिड हमें तत्वों को एक निश्चित आकार देने का एक अच्छा तरीका देता है, लेकिन अगर उन्हें ज़रूरत हो तो उन्हें बढ़ने की अनुमति दें। यदि आप माइनमैक्स () फ़ंक्शन का उपयोग करके ट्रैक (कॉलम या लाइन) का आकार निर्धारित करते हैं, तो आप इसका न्यूनतम और अधिकतम आकार देख सकते हैं। minmax(200px, auto) लिए लाइनें सेट करने का मतलब है कि ट्रैक हमेशा कम से कम 200px होगा, भले ही ग्रिड तत्व खाली हों। हालांकि, यदि ग्रिड तत्व की सामग्री 200px से अधिक है, तो auto के मूल्य के लिए धन्यवाद auto यह तत्व बढ़ सकता है। आप इसे नीचे दिए गए उदाहरण में देख सकते हैं। पहली पंक्ति 200px है, क्योंकि इसे बढ़ाने के लिए कोई तत्व नहीं हैं। दूसरी पंक्ति में एक ग्रिड-तत्व होता है, जिसकी सामग्री फिट नहीं होती है और auto मान काम करना शुरू कर देता है, जिसके कारण यह रेखा 200px से बड़ी हो जाती है।


minmax() फ़ंक्शन आपको इंटरफेस बनाने की क्षमता देता है जैसे कि वे एक निश्चित निश्चित आकार थे। एक आदर्श दुनिया में (जब सामग्री की मात्रा अपेक्षाओं को पूरा करती है), तो आपको ये सुंदर, समान लाइनें मिलती हैं। हालाँकि, यदि आप अतिरिक्त सामग्री जोड़ते हैं, तो कोई अतिप्रवाह नहीं होगा, जैसे कि आपने 200x तय की गई लाइन की ऊँचाई निर्धारित की है। स्ट्रिंग का विस्तार होगा; यह बिल्कुल नहीं हो सकता है कि आप एक डेवलपर के रूप में क्या पसंद करेंगे, लेकिन यह अपठनीय नहीं होगा।

लाइन ओवरफ्लो

जब भी हम तत्वों के आकार को सीमित करते हैं तो अतिप्रवाह का जोखिम होता है। ऊपर दिए गए उदाहरण में, मैं एक ब्लॉक आयाम में एक बाधा का वर्णन करता हूं जो क्षैतिज भाषा वाले उपयोगकर्ताओं को ऊंचाई के रूप में दिखाई देगा। हालांकि, यदि हम ब्लॉक की चौड़ाई को सीमित करते हैं, तो हम ओवरफ्लो भी कर सकते हैं। यह वही है जो हम सीएसएस में देखते हैं वह बहुत बढ़िया है।



इस मेम के लेखक ने सीएसएस-ट्रिक पोस्ट पर इस बारे में टिप्पणी करते हुए कहा:

अब मैं अतिप्रवाह की अवधारणा को थोड़ा बेहतर समझ रहा हूं, लेकिन उस समय मेरा दिमाग केवल इस बात की नासमझी से उड़ा दिया गया था कि किसी ने यह क्यों सोचा कि डिफ़ॉल्ट व्यवहार को ब्लॉक को बड़ा बनाने के बजाय ब्लॉक के दाईं ओर पाठ को धक्का देना चाहिए, जैसा कि तालिकाओं ने हमेशा किया था। ।

तो सीएसएस ब्लॉक के आकार को बढ़ाने के बजाय बॉक्स के बाहर पाठ को क्यों धक्का देता है?

मेम में, लाइन दिशा में एक अतिप्रवाह प्राप्त किया जाता है। शब्द "कमाल" ब्लॉक पर लागू चौड़ाई से अधिक है, यही वजह है कि यह ओवरफ्लो होता है। सीएसएस यथोचित रूप से मानता है कि यदि आप किसी ब्लॉक को एक निश्चित चौड़ाई देते हैं, तो आपको उस चौड़ाई के ब्लॉक की आवश्यकता है। शायद उसे एक लेआउट में रखना चाहिए जो टूट जाता है अगर ब्लॉक अचानक सेट होने से बड़ा हो जाता है।

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

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



हालाँकि, यदि हम Flexbox का उपयोग करते हैं, तो हम ब्राउज़र को गणना कर सकते हैं कि प्रत्येक तत्व को कितनी जगह दी जाए। फ्लेक्सबॉक्स अधिक स्थान के साथ बड़ा आइटम प्रदान करेगा, जबकि छोटे वाले कम मिलेंगे। इस लचीले आकार के वितरण का मतलब है कि जिस ब्लॉक में "भयानक" शब्द है वह सभी सामग्री को समायोजित करेगा और पाठ इसके आगे नहीं जाएगा। अतिप्रवाह समस्या हल; यह व्यवहार वैसा ही है जैसा फ्लेक्सबॉक्स के लिए बनाया गया था। फ्लेक्सबॉक्स विभिन्न आकारों के तत्वों के साथ एक शानदार काम करता है और उन्हें उनके लिए सबसे उपयुक्त लेआउट में व्यवस्थित करता है।



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

डेटा हानि की रोकथाम

कारण ब्लॉक ओवरफ्लो (उदाहरण के लिए ब्लॉक सीमा से परे फैले हुए शब्द के साथ) क्योंकि overflow संपत्ति में visible का डिफ़ॉल्ट मान है। आप (यदि आप चाहते हैं) एक अलग तरीके से ओवरफ्लो को नियंत्रित कर सकते हैं। उदाहरण के लिए, overflow: auto का उपयोग करना overflow: auto या overflow: scroll आपके ब्लॉक को एक स्क्रॉल बार दे सकता है। यह वह नहीं हो सकता है जो आप इस स्थिति में चाहते हैं, लेकिन ऐसी परिस्थितियां हो सकती हैं जहां एक स्क्रॉल पट्टी वाला ब्लॉक उचित होगा।

आप यह भी मान सकते हैं कि आप अतिप्रवाह का उपयोग करके overflow: hidden को ट्रिम करने के लिए तैयार थे overflow: hidden । आप सोच सकते हैं कि ओवरफ्लो को छुपाना डिफ़ॉल्ट रूप से बेहतर होगा, हालांकि, सीएसएस ने डिफ़ॉल्ट रूप से दिखाई देने के बजाय (छिपे के बजाय) अतिप्रवाह बनाने के लिए चुना, सीएसएस विकास के मुख्य मूल्य की कुंजी है। CSS (कई अन्य तकनीकों के रूप में) में, हम डेटा हानि से बचने की कोशिश करते हैं। जब हम CSS में डेटा हानि के बारे में बात करते हैं, तो हम आम तौर पर उस सामग्री के हिस्से के बारे में बात करते हैं जो दिखाई नहीं देगा। overflow: hidden के मामले में overflow: hidden सामग्री, जो मूल ब्लॉक को ओवरफ्लो करती है, गायब हो जाती है। इसका मतलब यह है कि हमारे पास इसे पाने का कोई रास्ता नहीं है, ताकि यह पता लगाया जा सके कि हमने क्या हिस्सा खो दिया।

कुछ स्थितियों में, यह एक गंभीर समस्या हो सकती है। यदि आप लेआउट को इतना नाजुक बनाने में कामयाब रहे कि आपके फॉर्म का बटन दृश्य क्षेत्र से परे चला गया, तो आपके उपयोगकर्ता फॉर्म सबमिट नहीं कर पाएंगे। यदि पाठ का अंतिम पैराग्राफ काट दिया जाता है, तो हम कभी नहीं जान पाएंगे कि कहानी कैसे समाप्त हुई। इसके अलावा, गायब तत्वों के साथ समस्या यह है कि यह हमेशा स्पष्ट नहीं होता है कि वे चले गए हैं। एक डेवलपर के रूप में, आप समस्या को नोटिस नहीं कर सकते हैं, खासकर अगर यह केवल एक उत्तरदायी डिजाइन में कुछ निश्चित क्षेत्र आकार के साथ होता है। आपके उपयोगकर्ता समस्या को नोटिस नहीं कर सकते - वे बस कॉल टू एक्शन नहीं देखेंगे, या वे सोचेंगे कि जिस समस्या पर वे ऑर्डर नहीं दे सकते हैं वह उनके डिवाइस में है और वे बस छोड़ देते हैं। हालाँकि, यदि वे तत्व ओवरफ़्लो करते हैं जहाँ उन्हें नहीं करना चाहिए, तो आप इसकी सबसे अधिक संभावना करेंगे। या, सबसे खराब स्थिति में, साइट पर जाने वाला कोई व्यक्ति इसे नोटिस करेगा और आपको बताएगा।

यही कारण है कि सीएसएस तत्वों में मैला और काफी ध्यान देने योग्य हैं। ओवरफ्लो देखकर स्पष्ट रूप से, आप त्रुटि को ठीक करने की अधिक संभावना रखते हैं यदि अतिरिक्त सामग्री बस छिपी हुई है। हालाँकि, अतिप्रवाह संपत्ति की मदद से आपको अपने निर्णय लेने का अवसर मिलता है कि क्या होना चाहिए। यदि आप चाहते हैं कि अतिप्रवाह को क्लिप किया जाए (जो कुछ स्थितियों में सही समाधान हो सकता है), overflow: hidden उपयोग करें overflow: hidden ।

डेटा की हानि और संरेखण

पिछले कुछ वर्षों में हमने जो सर्वश्रेष्ठ लेवलिंग टूल प्राप्त किए हैं, वे डेटा हानि का कारण भी बन सकते हैं। फ्लेक्स तत्वों के एक स्तंभ पर विचार करें जो व्यूपोर्ट के किनारे पर हैं और विभिन्न आकार हैं। जब flex-start मूल्य के साथ गठबंधन किया जाता है, तो तत्व दाईं ओर फैल जाते हैं। हालांकि, जब केंद्र के साथ केंद्रित होता center , तो व्यापक तत्व व्यूपोर्ट की सीमा से परे चला जाएगा। इसलिए, संरेखण डेटा हानि हो सकती है।

संरेखण के कारण होने वाले आकस्मिक डेटा हानि को रोकने के लिए, सीएसएस में अब कई नए कीवर्ड हैं जो संरेखण गुणों के साथ संयोजन में उपयोग किए जा सकते हैं। उन्हें बॉक्स अलाइन्मेंट में परिभाषित किया गया है, एक विनिर्देश जो ग्रिड और फ्लेक्सबॉक्स सहित सभी डिज़ाइन विधियों में संरेखण से संबंधित है। वे वर्तमान में केवल फ़ायरफ़ॉक्स में समर्थित हैं। ऊपर हमारे उदाहरण में, यदि हम align-items: safe center सेट करते हैं align-items: safe center , अंतिम आइटम को छोड़ दिया जाएगा, न कि उचित। यह तत्व को केंद्रित करने से होने वाले डेटा हानि को रोक देगा और इसलिए इसे व्यूपोर्ट से बाहर धकेल देगा।

यदि आपको संरेखण की आवश्यकता है (भले ही यह अतिप्रवाह की ओर जाता है), तो आप unsafe center को निर्दिष्ट कर सकते हैं। इस मामले में, आपने अनुरोध किया था कि सामग्री के साथ क्या होता है, इसकी परवाह किए बिना ब्राउज़र आपकी पसंद के संरेखण का प्रदर्शन करता है। यदि आपके पास फ़ायरफ़ॉक्स है, तो आप दो उदाहरण देख सकते हैं: पहला सुरक्षित संरेखण के साथ, और दूसरा असुरक्षित के साथ।


रिपोर्ट में , जिसके आधार पर मैंने यह लेख लिखा था, मैंने लेआउट को अतिप्रवाह के साथ निरंतर संघर्ष के रूप में वर्णित किया। वेब के लिए डिजाइन सत्य में से एक यह है कि यह जानना बहुत मुश्किल है कि पाठ में कितना बड़ा तत्व होगा। हालाँकि, जैसा कि मैंने ऊपर दिखाया है, हमारे पास कभी भी ओवरफ्लो या ओवरफ्लो को नियंत्रित करने के इतने तरीके नहीं थे। इसका मतलब है कि हमारा लेआउट अधिक टिकाऊ हो सकता है और हम ऐसे टेम्पलेट बना सकते हैं जो विभिन्न मात्रा में सामग्री के साथ काम करेंगे। यह केवल छोटे बदलाव की तरह लग सकता है, लेकिन मुझे लगता है कि वे जो अवसर हमारे लिए खोलते हैं वह बहुत बड़ा है।