सीएसएस मुद्दों। भाग २

"सीएसएस मुद्दे" लेख का निरंतर अनुवाद । भाग 1 ” ।

100% के बराबर चौड़ाई / ऊंचाई का उपयोग कब करें?

ऊँचाई: 100%

आइए सरलता से शुरू करें। ऊँचाई का उपयोग कब करें : 100% ? वास्तव में, सवाल अक्सर थोड़ा अलग लगता है: "मैं अपने पृष्ठ को स्क्रीन की पूरी ऊंचाई कैसे कवर कर सकता हूं?" क्या यह सच है?

इसका उत्तर देने के लिए, आपको उस ऊंचाई को समझने की आवश्यकता है : 100% मूल तत्व की ऊंचाई के बराबर है। यह एक जादुई "खिड़की की ऊंचाई" नहीं है। इसलिए यदि आप चाहते हैं कि आपका तत्व खिड़की की ऊंचाई के सभी 100% पर कब्जा कर ले, तो ऊंचाई सेट करना : 100% पर्याप्त नहीं होगा।

क्यों? लेकिन क्योंकि आपके कंटेनर के माता-पिता शरीर तत्व हैं, और इसकी ऊंचाई संपत्ति डिफ़ॉल्ट रूप से ऑटो पर सेट है; जिसका अर्थ है कि इसकी ऊंचाई सामग्री की ऊंचाई के बराबर है। बेशक, आप ऊंचाई जोड़ने की कोशिश कर सकते हैं: शरीर में 100%, लेकिन यह पर्याप्त भी नहीं होगा।

क्यों? और सभी क्योंकि, शरीर तत्व का जनक html तत्व है, जिसमें संपत्ति की ऊंचाई भी ऑटो के बराबर है और यह सामग्री के आकार तक फैला है। और अब, यदि आप ऊंचाई जोड़ते हैं: html तत्व में 100%, यह काम करेगा।

क्या यह स्पष्ट हो गया है? रूट html तत्व वास्तव में पृष्ठ पर उच्चतम स्तर नहीं है - यह "व्यूपोर्ट" है। सादगी के लिए, हम मानते हैं कि यह एक ब्राउज़र विंडो है। तो, अगर आप ऊंचाई निर्धारित करते हैं: 100% html तत्व के लिए, तो यह कहने के समान है - ब्राउज़र विंडो के समान ऊँचाई बनें।

एक छोटे से कोड में प्राप्त जानकारी को संक्षेप में प्रस्तुत करें:

html, body, .container { height: 100%; } 

हो गया। यदि आप व्यूपोर्ट कैसे काम करते हैं, इस विषय में रुचि रखते हैं, तो मैं पीपीके के एक लेख की अत्यधिक अनुशंसा करता हूं।

लेकिन क्या होगा अगर मूल तत्व में न्यूनतम-ऊंचाई संपत्ति निर्धारित की गई है, ऊंचाई नहीं?

हाल ही में, रोजर जोहानसन ने ऊंचाई के साथ एक समस्या का वर्णन किया : 100% जो तब होता है जब मूल तत्व ऊंचाई पर सेट नहीं होता है, लेकिन न्यूनतम ऊंचाई निर्दिष्ट की जाती है। मैं लेख में कही गई बातों पर ध्यान नहीं देना चाहता, लेकिन मैं सीधे निष्कर्ष पर जाऊंगा। आपको ऊंचाई निर्धारित करने की आवश्यकता है : माता-पिता के लिए 1px ताकि बच्चा न्यूनतम ऊंचाई में निर्दिष्ट पूरी ऊंचाई पर कब्जा कर सके।

 .parent { min-height: 300px; height: 1px; /* Required to make the child 100% of the min-height */ } .child { height: 100%; } 

JsFiddle पर उदाहरण।

अधिक विस्तार से, इस प्रश्न के साथ, आप रोजर जोहानसन के एक लेख से खुद को परिचित कर सकते हैं।

चौड़ाई: 100%

अब चौड़ाई के साथ सौदा करते हैं : 100% । शुरुआत करने के लिए, एक छोटा स्पष्टीकरण: चौड़ाई सेट करके : 100% संपत्ति, हम चाहते हैं कि हमारा तत्व मूल तत्व की पूरी चौड़ाई पर कब्जा कर ले। सब कुछ मानक है।

आपको थोड़ा रहस्य बताता हूं। चौड़ाई, इस संपत्ति के लिए एक बहुत उपयुक्त नाम नहीं है। चौड़ाई गुण तत्व का पूर्ण आकार नहीं है, लेकिन तत्व की सामग्री का आकार, और यह एक बड़ा अंतर है।

यदि आप चौड़ाई वाले तत्व में गद्दी और / या सीमा जोड़ते हैं : 100% , तो यह अब मूल तत्व में फिट नहीं होगा। क्योंकि गद्दी और सीमा दिखाई देते थे, और इसीलिए चौड़ाई को सामग्री-चौड़ाई कहा जाना चाहिए था। अब, कृपया ऊपर दिखाए गए एक उदाहरण को देखें।

JsFiddle पर उदाहरण।

मान लीजिए कि माता-पिता की चौड़ाई 25em है, और बच्चे की 100% (माता-पिता की चौड़ाई की) है और इसमें 1em (दाईं ओर 1em और बाईं ओर 1em, कम से कम 2em क्षैतिज रूप से) के बराबर पैडिंग है और आकार में 0.5em (दाईं ओर 0.5 em) और बाईं ओर 0.5em की सीमा पूरी तरह से 1em क्षैतिज है। ), जो अंत में हमें 25em (100%) + 2em + 1em = 28em देता है।

इस समस्या के 4 संभावित समाधान हैं। चौड़ाई से बचने के लिए पहला और शायद सबसे अच्छा तरीका है : 100% संपत्ति, विशेष रूप से इस मामले में यह बिल्कुल बेकार है। यदि बच्चा एक ब्लॉक तत्व है, तो यह पहले से ही माता-पिता की पूरी चौड़ाई पर स्वचालित रूप से कब्जा कर लेगा (बिना पैडिंग और सीमाओं के साथ समस्याएं)। लेकिन अगर हम एक इनलाइन-ब्लॉक तत्व के साथ काम करते हैं, तो हम इस समस्या को इतनी आसानी से हल नहीं कर पाएंगे।

हम चौड़ाई को बदल सकते हैं : एक स्थिर आकार के साथ 100% । हमारे मामले में, 25 - (2 + 1) = 22em। बेशक, यह एक बुरा निर्णय है, क्योंकि हमें मैन्युअल रूप से चौड़ाई की गणना करने की आवश्यकता है। दूसरे रास्ते चलते हैं!

तीसरा तरीका है कि चौड़ाई की गणना करने के लिए कैल्क () का उपयोग करें: चौड़ाई: कैल्क (100% - 3 मी) । लेकिन यह भी फिट नहीं है। सबसे पहले, हमें अभी भी पैडिंग + बॉर्डर आकारों की गणना करने की आवश्यकता है। दूसरे, कैल्क () ब्राउज़रों द्वारा खराब रूप से समर्थित है (आईई 8, सफारी 5, ओपेरा 12, मूल एंड्रॉइड ब्राउज़र में काम नहीं करता है)।

आइडिया नंबर चार को बॉक्स-साइजिंग: बॉर्डर-बॉक्स प्रॉपर्टी का उपयोग करना है। यह तत्व की चौड़ाई और ऊंचाई की गणना के लिए एल्गोरिथ्म को बदलता है ताकि वे गद्दी और सीमा के गुणों को ध्यान में रखें। बड़ी खबर यह है कि बॉक्स-साइज़िंग में अच्छा ब्राउज़र समर्थन (IE8 +, ओपेरा 7+) है। और अन्य सभी ब्राउज़रों के लिए, आप पॉलीफिल का उपयोग कर सकते हैं।

निष्कर्ष: चौड़ाई का उपयोग न करें : बॉक्स-आकार के बिना 100% : बॉर्डर-बॉक्स ।

जेड-इंडेक्स के साथ पेंच कसने के लिए कैसे नहीं।

पृष्ठ पर सभी तत्व तीन विमानों में स्थित हैं: ऊर्ध्वाधर और क्षैतिज अक्ष के अलावा, एक अतिरिक्त जेड अक्ष (गहराई) है। सबसे पहले, सब कुछ बहुत सरल दिखता है - एक बड़े जेड-इंडेक्स वाले तत्व एक छोटे जेड-इंडेक्स वाले तत्वों की तुलना में अधिक हैं। दुर्भाग्य से, सब कुछ बहुत अधिक जटिल है। मुझे यकीन है कि जेड-इंडेक्स अपने इतिहास में सबसे जटिल सीएसएस संपत्ति है। और मुझे यकीन है कि सीएसएस के साथ काम करते समय जेड-इंडेक्स से जुड़ी समस्याएं दूसरों की तुलना में अधिक सामान्य हैं। मुझे उम्मीद है कि हम संभावित समाधानों का ज्ञान देंगे।

एक शुरुआत के लिए। Z-index संपत्ति का स्थैतिक तत्वों पर कोई प्रभाव नहीं है। Z अक्ष के साथ तत्व को स्थानांतरित करने में सक्षम होने के लिए, हमें इसकी स्थिति को सापेक्ष, पूर्ण या निश्चित में बदलने की आवश्यकता है।

Z-index में यह समझना महत्वपूर्ण है कि DOM ट्री में सभी तत्वों को समान स्तर पर नहीं रखा गया है। इसका मतलब यह है कि किसी तत्व के z-index को बहुत बड़े मान में बदलने की गारंटी नहीं है कि इसे अग्रभूमि में रखा जाएगा। इसे ओवरले संदर्भ कहा जाता है।

सरल शब्दों में, एक ओवरले संदर्भ, एक तरह से, एक HTML तत्व पर आधारित एक समूह है, जिसमें सभी बाल तत्वों को संदर्भ में समान स्थिति और समान z- सूचकांक मिलता है। किसी तत्व के जेड-इंडेक्स में परिवर्तन से अन्य तत्वों को ओवरलैप करने का कारण बन सकता है, जैसा कि आपको आवश्यक है। यहां बताया गया है कि कैसे तत्वों को एक ओवरले संदर्भ (नीचे से ऊपर) में व्यवस्थित किया जाता है:

1. संदर्भ तत्व की पृष्ठभूमि और सीमाएँ
2. नकारात्मक z- इंडेक्स बच्चा ओवरले संदर्भ (पहले सबसे छोटा)
3. अन पोस्ट आइटम
4. ऑटो या 0 के लिए z- इंडेक्स सेट के साथ स्थिति आइटम
5. पॉजिटिव z- इंडेक्स के साथ स्थिति वाले तत्व (प्रत्येक क्रम में पिछले एक से अधिक है, अगर z- इंडेक्स बराबर है)

जब स्थिति अप्रिय हो जाती है

इसलिए, हमने z- इंडेक्स समझ की मूल बातों की जांच की जो आपको बहुत समय बचाएगी, मेरा विश्वास करो। दुर्भाग्य से, वे पर्याप्त नहीं हैं। तब सब कुछ बहुत सरल होगा।

तथ्य यह है कि प्रत्येक ओवरले संदर्भ का अपना जेड अक्ष है। उदाहरण के लिए, संदर्भ 1 में तत्व ए और संदर्भ 2 में तत्व बी, जेड-इंडेक्स के माध्यम से बातचीत नहीं कर सकता है। इसका मतलब यह है कि तत्व ए, ओवरले संदर्भ के बहुत नीचे के ओवरले संदर्भ के हिस्से के रूप में, कभी भी बहुत बड़े जेड-इंडेक्स मूल्य के साथ, स्तर से ऊपर एक और संदर्भ के तत्व बी को ओवरलैप नहीं कर सकता है।

लेकिन, इससे भी बदतर। Html तत्व रूट ओवरले संदर्भ बनाता है। फिर, प्रत्येक गैर-सांख्यिकीय रूप से z-index संपत्ति के साथ ऑटो के बराबर तत्व भी अपने स्वयं के ओवरले संदर्भ नहीं बनाता है। कोई नई बात नहीं। लेकिन यहां वह जगह है जहां सब कुछ उखड़ने लगता है: कुछ गुण जो किसी भी तरह से सीएसएस ओवरले संदर्भ से संबंधित नहीं हैं, नए संदर्भ भी बनाते हैं। उदाहरण के लिए, अस्पष्टता संपत्ति।



यह सही है, अपारदर्शिता गुण एक नया ओवरले संदर्भ बनाता है। परिवर्तन और परिप्रेक्ष्य गुण समान हैं। हालांकि इसका कोई मतलब नहीं है, यह करता है? उदाहरण के लिए, यदि आपके पास 1 से कम या किसी भी परिवर्तन के साथ अपारदर्शिता वाला कोई तत्व है, तो आपको संभवतः समस्या हो सकती है।

दुर्भाग्य से, जेड-इंडेक्स के साथ प्रत्येक समस्या का अपना संदर्भ है (एक वाक्य नहीं) एक सार्वभौमिक समाधान को असंभव बना देता है।

चलो ऊपर संक्षेप में बताएं:

• Z- इंडेक्स लागू करने से पहले, स्थिति संपत्ति को गैर-स्थिर पर सेट करना सुनिश्चित करें
• Z-index value के लिए 5 अंकों से अधिक का उपयोग न करें, यह पूरी तरह से व्यर्थ है; ज्यादातर मामलों में, लगभग 10 का एक z- इंडेक्स पर्याप्त से अधिक होगा
• सुनिश्चित करें कि जिस तत्व को आप ओवरलैप करना चाहते हैं, वही ओवरले संदर्भ में है।
• यदि कुछ अभी भी काम नहीं कर रहा है जैसा कि यह होना चाहिए, तो सुनिश्चित करें कि परिवर्तन नहीं हैं और मूल तत्वों के लिए अस्पष्टता अधिक है।

इस विषय पर, मैं फिलिप वाल्टन और आधिकारिक सीएसएस विनिर्देश द्वारा जेड-इंडेक्स के बारे में क्या-क्या नहीं बताता, आपको पढ़ने की सलाह देता हूं।

इंडेंटिंग पतन

यह मुझे लगता है - यह सीएसएस ग्लिच में से एक है जो इस बात का पता लगाने के लिए सबसे अधिक समय चुराता है। हम कह सकते हैं कि यह कुछ हद तक बग के साथ z- इंडेक्स के समान है। जैसा कि यह हो सकता है, इंडेंट का पतन तब होता है जब दो तत्वों के ऊपरी और निचले इंडेंट एक (दो में से सबसे बड़ा) में ढह जाते हैं।

सौभाग्य से, एक नियम के रूप में, यह व्यवहार अपेक्षित है। शायद यही कारण है कि यह उस तरह से काम करता है (जैसा कि सीएसएस कल्पना में कहा गया है)। हालांकि, कभी-कभी आप ऊर्ध्वाधर मार्जिन को नहीं गिराना चाहते हैं। इससे बचने के तरीके को समझने के लिए, हम पहले देखेंगे कि ऐसा क्यों होता है। इंडेंटेशन पतन तीन अलग-अलग मामलों में हो सकता है।

पास की वस्तुएँ

जब दो आसन्न तत्वों में ऊर्ध्वाधर मार्जिन होता है, तो वे उनमें से सबसे बड़े तक गिर जाते हैं। पतन को रोकने के कई तरीके हैं:

• स्पष्ट: छोड़ दिया; फ्लोट: बाएं; (सही काम करता है वही)
• प्रदर्शन: इनलाइन-ब्लॉक;

JsField उदाहरण दिखाता है कि फ़िक्स कैसे काम करता है।

माता-पिता और पहला / अंतिम बच्चा

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

• अतिप्रवाह: छिपा हुआ (या कोई अन्य लेकिन दृश्यमान नहीं)
• गद्दी: 1px (या 0 से अधिक दूसरा मान)
• सीमा: 1px ठोस पारदर्शी (या किसी अन्य सीमा)
• फ्लोट: बाएं (दाएं समान काम करता है)

JsField उदाहरण दिखाता है कि फ़िक्स कैसे काम करता है।

खाली ब्लॉक

जब एक खाली ब्लॉक की कोई सीमा नहीं होती है, तो पैडिंग्स, हाइट्स, इसके ऊपरी और निचले इंडेंट एक में समा जाते हैं। एक तरह से या दूसरे, खाली ब्लॉकों का उपयोग करना बुरा व्यवहार है, इसलिए यह आम नहीं है।

निष्कर्ष

दुर्भाग्य से, सीएसएस बग और हैक्स से केवल हिमशैल के टिप का वर्णन यहां किया गया है। लेकिन ये वास्तव में वे हैं जो दूसरों की तुलना में अधिक सामान्य हैं, लेकिन कई और चीजें हैं जैसे: ब्राउज़र असंगति, विक्रेता उपसर्ग, चयनकर्ता विशिष्टता, कैस्केड और विरासत, और बहुत कुछ।

मैं निम्नलिखित लेख और साइटों को पढ़ने की भी सिफारिश करूंगा:

• फिलिप वाल्टन द्वारा लिखित जेड-इंडेक्स और हब में इसके अनुवाद के बारे में आपको कोई नहीं बताता , टिप के लिए सेलेनिटाइन 2 को धन्यवाद
• प्रतिशत में ऊंचाई जब माता-पिता की न्यूनतम ऊंचाई और रोजर जोहानसन द्वारा कोई ऊंचाई नहीं है
• सीएसएस आधिकारिक विनिर्देश
• निकोलस गैलाघेर द्वारा माइक्रो क्लियर-फिक्स हैक
• इनलाइन-ब्लॉक प्रदर्शित करें, यह क्यों चट्टानों और क्यों यह रॉबर्ट Nyman द्वारा बेकार है
• टिम Pietrusky और मेरे द्वारा Browserhacks

मुझे उम्मीद है कि लेख ने कुछ चीजों को समझने में मदद की जो आपको भविष्य में समस्याओं से बचा सकती है।