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

पहली सीएसएस को 1995 के आसपास शुरू किया गया था, और इसे सरल पाठ दस्तावेजों को स्टाइल करने के लिए डिज़ाइन किया गया था। कोई वेब साइट नहीं। कोई ऐप नहीं। अर्थात् पाठ दस्तावेज़। तब से, css ने एक लंबा सफर तय किया है। शायद बहुत लंबा।

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

सबसे अच्छे मामले में, सीएसएस के साथ काम करना एक मजेदार गतिविधि कहा जा सकता है। और इसीलिए हमारे पास नौकरी है। क्योंकि, जैसा कि मेरा मानना ​​है, प्रभावी और क्रॉस-ब्राउज़र सीएसएस शैलियों की पीढ़ी असंभव है और निकट भविष्य में संभव नहीं होगी।



चलो इस बिंदु पर आते हैं, क्योंकि मैं यहाँ सीएसएस के बारे में अपनी राय व्यक्त करने के लिए नहीं हूँ। और सीएसएस में कई सामान्य समस्याओं, और उनके संभावित समाधानों पर विचार करने के लिए।

मैंने कुछ बहुत सामान्य लोगों को चुनने की कोशिश की:

• समाशोधन तैरता है।
• इनलाइन-ब्लॉक वाले तत्वों के बीच इंडेंटेशन को कैसे हराया जाए?
• पूर्ण स्थिति को समझना।
• 100% (2 भाग) के बराबर चौड़ाई / ऊँचाई का उपयोग कब करें
• जेड-इंडेक्स के साथ पेंच कसने के लिए कैसे नहीं। (भाग 2)
• मार्जिन टकराना क्या है? (भाग 2)

समाशोधन तैरता है।

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

सरल शब्दों में, इसे निम्नानुसार वर्णित किया जा सकता है: जब किसी तत्व में केवल एक फ्लोट के साथ तत्व होते हैं, तो यह ऐसे ढह जाता है जैसे कि इसके कोई बच्चे नहीं थे। यही है, वास्तव में, फ्लोट वाले तत्व सामान्य धारा से बाहर आते हैं।



इस समस्या को हल करने के कई तरीके हैं। हम खाली डिब्बी का उपयोग स्पष्ट के साथ करते थे: दोनों शैली कंटेनर के बहुत नीचे। फिर, हमने इसे hr टैग से बदल दिया, जो ज्यादा बेहतर नहीं है।

अंत में, निकोलस गैलाघर ने मार्कअप को छूने के बिना फ्लोट्स को साफ करने के लिए एक नया तरीका प्रस्तावित किया। लंबी चर्चा और परीक्षण के बाद, हमें उनके काम के लिए आवश्यक शैलियों का न्यूनतम सेट मिला, यहां उनका नवीनतम संस्करण है:

.clearfix:after { content: ""; display: table; clear: both; } 

वास्तव में, मैंने झूठ बोला, वह आखिरी नहीं है, वह सबसे छोटी है। लेकिन अगर आपको IE 6/7 के लिए समर्थन की आवश्यकता है, तो आपको इसे जोड़ने की आवश्यकता है:

 .clearfix { *zoom: 1; } 

काम करने के लिए, आपको अपनी परियोजना में .clearfix class जोड़ने की आवश्यकता है, और फिर इसे मार्कअप तत्वों पर लागू करें। यह तैरने के साथ काम करने का सबसे आसान और साफ तरीका है।

इनलाइन-ब्लॉक वाले तत्वों के बीच इंडेंटेशन को कैसे हराया जाए?

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

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

आप पूछ सकते हैं: "फिर क्या समस्या है?" और समस्या यह है कि वे आधे लोअरकेस हैं, जिसका अर्थ है कि वे अंतरिक्ष के बराबर आकार के साथ एक-दूसरे से प्रेरित हैं। एक मानक 16px फ़ॉन्ट के साथ, यह 4px है। ज्यादातर मामलों में, इंडेंट आकार की गणना फ़ॉन्ट आकार के 25% के रूप में की जा सकती है। एक तरीका या दूसरा, यह तत्वों की सामान्य व्यवस्था में हस्तक्षेप कर सकता है। उदाहरण के लिए, अंदर तीन तत्वों के साथ 600px कंटेनर लें, आकार में 200px और प्रदर्शन द्वारा सेट करें : इनलाइन-ब्लॉक संपत्ति। यदि आप इंडेंट नहीं हटाते हैं, तो हम उन्हें एक पंक्ति में नहीं रख पाएंगे (200 * 3 + 4 * 2 = 60%)।

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

मार्कअप स्तर: रिक्त स्थान निकालें

हमारे सभी परीक्षणों के लिए, हम निम्नलिखित मार्कअप का उपयोग करते हैं।

 <div class="parent"> <!-- 600px --> <div class="child">I'm a child!</div> <!-- inline-block 200px --> <div class="child">I'm a child!</div> <!-- inline-block 200px --> <div class="child">I'm a child!</div> <!-- inline-block 200px --> </div> 

जैसा कि मैंने पहले कहा, बाल तत्व एक पंक्ति में नहीं बनेंगे, क्योंकि उनमें से प्रत्येक (हमारे मामले में, लाइन फ़ीड और 4 रिक्त स्थान) में एक अतिरिक्त स्थान चरित्र है। समस्या को हल करने का पहला तरीका रिक्त स्थान को पूरी तरह से हटा देना है।

 <div class="parent"> <div class="child">I'm a child!</div><div class="child">I'm a child!</div><div class="child">I'm a child!</div> </div> 

यह वास्तव में काम करता है, लेकिन यह हमारे कोड को पढ़ना सुविधाजनक नहीं बनाता है। हालाँकि, पठनीयता बनाए रखने के लिए हम अपने तत्वों को थोड़ा पुनर्गठित कर सकते हैं:

 <div class="parent"> <div class="child"> I'm a child!</div><div class="child"> I'm a child!</div><div class="child"> I'm a child!</div> </div> 

और यदि आप वास्तव में शांत हैं, तो आप यह कर सकते हैं:

 <div class="parent"> <div class="child">I'm a child!</div ><div class="child">I'm a child!</div ><div class="child">I'm a child!</div> </div> 

हाँ - यह काम करता है! बेशक, मैं इस दृष्टिकोण की सिफारिश नहीं करता, क्योंकि यह सहज नहीं है और कोड को बदसूरत बनाता है। बेहतर है, चलो कुछ और प्रयास करें।

मार्कअप स्तर: रिक्त स्थान पर टिप्पणी करना

यदि आप उन्हें हटाने के बजाय रिक्त स्थान पर टिप्पणी करते हैं तो क्या होगा?

 <div class="parent"> <!-- 600px --> <div class="child">I'm a child!</div><!-- --><div class="child">I'm a child!</div><!-- --><div class="child">I'm a child!</div> </div> 

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

बेशक, कोई कहेगा कि यह एक आदर्श समाधान नहीं है, क्योंकि यह मार्कअप पक्ष पर काम करता है, और समस्या को सीएसएस स्तर पर हल किया जाना चाहिए। दरअसल। हम में से ज्यादातर वास्तव में सीएसएस समाधान का उपयोग करते हैं।

सीएसएस स्तर: चरित्र रिक्ति

अक्षर-रिक्ति गुण का उपयोग वर्णों के बीच इंडेंट सेट करने के लिए किया जाता है। विचार को इंडेंट सेट करना है ताकि यह हमारे तत्वों के बीच इंडेंट को बाहर निकाल दे, फिर हमें बाल तत्वों के लिए पत्र-रिक्ति को रीसेट करना होगा ताकि उनमें पाठ सामान्य दिखाई दे।

 .parent { letter-spacing: -0.3em; } .child { letter-spacing: normal; } 

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

सीएसएस स्तर: नकारात्मक मार्जिन

समस्या को हल करने के लिए एक और दृष्टिकोण पिछले एक के समान है, लेकिन नकारात्मक इंडेंटेशन के उपयोग के साथ। इसका मुख्य दोष यह है कि यह IE 6/7 में काम नहीं करता है। इसके अलावा, हमें पहले तत्व से इंडेंट को हटाने की जरूरत है ताकि वे हमारे कंटेनर के अंदर खड़े हों।

 .child { margin-left: -0.25em; } .child:first-of-type { margin-left: 0; } 

यदि आपको IE 6/7 के लिए समर्थन की आवश्यकता नहीं है, तो मुझे लगता है कि यह एक बहुत अच्छा समाधान है।

सीएसएस स्तर: फ़ॉन्ट-आकार

और अंत में, आप 0 ब्लॉक के बराबर जगह बनाने के लिए पैरेंट ब्लॉक के फ़ॉन्ट आकार को 0 पर सेट कर सकते हैं, और फिर बच्चों के लिए फ़ॉन्ट आकार को पुनर्स्थापित कर सकते हैं।

 .parent { font-size: 0; } .child { font-size: 16px; } 

इस समाधान में कई समस्याएं और सीमाएँ हैं:

• आप फ़ॉन्ट आकार के रूप में उन्हें का उपयोग करके बाल तत्वों के लिए फ़ॉन्ट को पुनर्स्थापित नहीं कर सकते
• जेलीबीन तक एंड्रॉइड डिवाइसों पर रिक्त स्थान नहीं हटाए जाते हैं
• @ फ़ॉन्ट-फेस का उपयोग करने वाला पाठ सफारी 5 में एंटी-एलियासिंग खो सकता है
• कुछ ब्राउज़र फ़ॉन्ट-आकार की उपेक्षा करते हैं : 0 , उदाहरण के लिए, क्रोम का चीनी संस्करण, जिस स्थिति में फ़ॉन्ट-आकार 12px पर रीसेट होता है

तो, यह सबसे अच्छा समाधान नहीं है। जैसा कि मैंने पहले कहा था, सबसे अधिक संभावना है कि मैं टिप्पणी करने वाले स्थानों के साथ पथ का उपयोग करूंगा। यदि यह आपके लिए असुविधाजनक दिखता है, तो आप फ़्लोटबॉक्स पर वापस आ सकते हैं या सामान्य रूप से फ्लेक्सबॉक्स का उपयोग कर सकते हैं।

पूर्ण स्थिति को समझना।

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

• स्थिर - डिफ़ॉल्ट रूप से, ऑफ़सेट काम नहीं करते हैं
• सापेक्ष - ऑफसेट दृश्य परत को स्थानांतरित करते हैं, लेकिन तत्व ही नहीं
• निरपेक्ष - ऑफसेट तत्व को संदर्भ के अंदर ले जाते हैं (पहला स्थिर तत्व नहीं है)
• निश्चित - ऑफसेट व्यूपोर्ट के अंदर तत्व को स्थिति में रखता है और यह वह जगह नहीं है जहाँ यह दस्तावेज़ में स्थित है

स्थिति का उपयोग करते समय समस्याएं प्रकट होती हैं : निरपेक्ष । और यह सुनिश्चित करने के लिए कि आप पहले ही उनका सामना कर चुके हैं: आपने निरपेक्ष स्थिति वाले एक तत्व की पहचान कर ली है, क्योंकि आप चाहते हैं कि यह उसके माता-पिता के ऊपरी दाएं कोने में हो (उदाहरण के लिए, मोडल विंडो में बंद बटन)।

 element { position: absolute; top: 0; right: 0; } 

... और वह दस्तावेज़ के ऊपरी दाएं कोने में दिखाई देता है। सोचा "क्या नरक?" आपके दिमाग के माध्यम से चमकती है। यह वास्तव में सामान्य ब्राउज़र व्यवहार है। कीवर्ड संदर्भ है ।

ऊपर दिए गए कोड में कहा गया है: "मैं चाहता हूं कि मेरा तत्व संदर्भ के ऊपरी दाएं कोने में स्थित हो।" तो संदर्भ क्या है? यह पहला तत्व है जिसकी स्थिति संपत्ति स्थिर के बराबर नहीं है। यह सीधे माता-पिता या माता-पिता के माता-पिता या माता-पिता के माता-पिता के माता-पिता हो सकते हैं। और इतने पर स्थिति के साथ पहला तत्व! = स्थिर।

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

ऊपर दिखाया गया एक छोटा डेमो। दो माता-पिता, प्रत्येक एक बच्चे को शीर्ष की ऑफसेट के साथ पूरी तरह से तैनात: 0 और दाएं: 0. बाईं तरफ स्थिति के साथ सही माता-पिता है: रिश्तेदार, दाईं ओर स्थिति के साथ गलत है: स्थिर।

jsFiddle

सीएसएस मुद्दों की निरंतरता । भाग 2 ” ।