सीएसएस युक्तियां आप ट्यूटोरियल में खोजने की संभावना नहीं रखते हैं

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

अंत में, सीएसएस नियम हैं जिन्हें आप मैनुअल में देखने की संभावना नहीं है, और जिनके बारे में आपको जानकारी नहीं होगी। कुछ समय के लिए मैंने इन युक्तियों को एकत्र किया और अब मैंने इस उम्मीद में एक लेख लिखने का फैसला किया कि वे उपयोगी होंगे।



नीचे वह है जो सीएसएस ट्यूटोरियल ने मुझे नहीं सिखाया है।

पैडिंग-शीर्ष संपत्ति मूल तत्व चौड़ाई के सापेक्ष

आपने CSS में कितनी बार सापेक्ष इकाइयों का उपयोग किया है? मैं उनमें से एक बड़ा प्रशंसक हूँ, क्योंकि वे आप मीडिया के प्रश्नों में बहुत गहरा एक संवेदनशील वेबसाइट बनाने के लिए, अनुमति देते हैं। यदि आप तत्व की ऊँचाई को माता-पिता की ऊँचाई से आधी पर सेट करना चाहते हैं, तो बस height: 50% लिखें height: 50% ।

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

कुछ स्थितियों में यह उपयोग करने के लिए बेहतर है गद्दी के बजाय मार्जिन । लेकिन आप निर्धारित करते padding-top: 15% ... क्या ..?

प्रॉपर्टी काम नहीं करती जैसा हम उम्मीद करते हैं। यह माता-पिता की ऊंचाई के सापेक्ष पैरामीटर सेट नहीं करता है। क्या चल रहा है?

व्याख्या

यह मूल चौड़ाई के सापेक्ष पैरामीटर सेट करता है। क्या आपको डेमो की आवश्यकता है? यहां:


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

नहीं, मैं मजाक कर रहा हूं - कोई स्पष्टीकरण नहीं है कि ऐसा क्यों होता है। कम से कम मुझे कहीं स्पष्टीकरण नहीं मिला। यह बस होता है, इसे ध्यान में रखें।

यद्यपि हम यह नहीं समझते हैं कि डेवलपर्स ने ऐसा क्यों किया, हम इस सुविधा का उपयोग अपने लाभ के लिए कर सकते हैं। हमारे आइटम के लिए, हम निम्नलिखित सेट करते हैं:

 .parent { height: auto; width: 100px; } .child { padding-top: 100%; } 

तब तत्व की ऊंचाई है, हालांकि हम पूछा चाइल्ड तत्व के रूप में एक ही ऊंचाई है height: auto । दूसरी ओर, बच्चे की ऊंचाई माता-पिता की चौड़ाई के समान होगी, क्योंकि हम padding-top: 100% सेट करते हैं। परिणाम एक वर्ग है, और तत्व किसी भी आकार में यह अनुपात बनाए रखने के लिए किया जाएगा।

यहाँ एक काम कर उदाहरण है:


यदि आप padding-top: 100% को किसी अन्य प्रतिशत में बदलते हैं, तो आपको एक आयत मिलती है। आप चौड़ाई बदल दें तो अनुपात सभी एक ही बनाए रखा है।

परिवर्तन नियमों को जमा कर सकता है

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

क्या होगा अगर, CSS का उपयोग करते हुए, आप तत्व की वर्तमान स्थिति के सापेक्ष कमांड "20 पिक्सेल सही" दे सकते हैं, बजाय इसकी शुरुआती स्थिति के? और अगर मैं आपको बता आप की संपत्ति का उपयोग करके ऐसा कर सकते हैं कि transform ?

कई डेवलपर्स नहीं जानते हैं कि transform प्रॉपर्टी नियमों को जमा कर सकती है और n + 1 नियम एनटीटी नियम में पहुंची स्थिति को संदर्भित करेगा, न कि मूल स्थिति को।

क्या आप भ्रमित हैं? शायद यह उदाहरण आपको ठीक करने में मदद करेगा:


कृपया ध्यान दें कि हम वर्तमान स्थिति या वर्तमान रोटेशन स्टोर करने के लिए किसी भी JavaScript वैरिएबल का उपयोग नहीं करते। यह जानकारी संग्रहीत नहीं है! यदि आप लिखते हैं तो समाधान सरल है:

 transform: translateX(20px); 

और फिर निम्नलिखित नियम जोड़ें:

 transform: translateX(20px) translateX(40px) 

दूसरा नियम पहले को प्रतिस्थापित नहीं करेगा - उन्हें क्रमिक रूप से लागू किया जाएगा। तथ्य यह है कि वे लगातार लागू होते हैं महत्वपूर्ण है। जब आप तत्व को घुमाते हैं, तो आप संदर्भ के फ्रेम को बदलते हैं, और आगे के नियम संदर्भ के नए फ्रेम पर लागू होंगे। तो यह प्रविष्टि:

 transform: rotateZ(20deg) translateX(30px) 

इससे अलग होगा:

 transform: translateX(30px) rotateZ(20deg) 

आप विभिन्न इकाइयों को भी जोड़ सकते हैं। उदाहरण के लिए, आप तत्व 600 के आकार के रूप में निम्नानुसार केंद्रित कर सकता है:

 transform: translateX(50vw) translateX(-300px) 

लेकिन अगर आप इसे चेतन नहीं कर रहे हैं, तो शायद calc () सबसे अच्छा विकल्प है।

यदि आप कछुए के बारे में चिंतित हैं, तो मैंने एक और टुकड़ा बनाया जो गतिशीलता को फिर से बनाता है:


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

बाहरी और आंतरिक मार्जिन को दक्षिणावर्त गिना जाता है

यह आसान है और बहुत से लोग सोचते हैं कि मैं प्रतिबंधात्मक बातें लिख रहा हूं, लेकिन मैंने देखा कि इतने सारे लोग चौपाइयों से जूझ रहे हैं जिन्हें मैंने इसे स्वीकार करने से रोक दिया।

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

मैं तुम्हें एक संकेत देता हूं:
पैडिंग और सीमा का पालन दक्षिणावर्त

मैं इसे और अधिक सरलता से समझाऊंगा। आप आत्मविश्वास के साथ उपयोग कर सकते हैं:

 padding-top: 3px; padding-left: 6px; padding-right: 6px; padding-bottom: 3px; 

लेकिन उसी तरह, आप एक छोटे विकल्प का उपयोग कर सकते हैं:

 padding: 3px 6px 3px 6px; 

आदेश को याद रखना आसान है - बस इस घड़ी को देखें:



12:00 बजे शुरू करें और दक्षिणावर्त जारी रखें। आपको सही आदेश मिलेगा।

यदि इसके बजाय आप केवल दो मानों का उपयोग करते हैं:

 padding: 2px 4px; 

ब्राउज़र मापदंडों को दोहराकर इसका विस्तार करेगा:

 padding: 2px 4px 2px 4px; 

यदि आप तीन मानों का उपयोग करते हैं:

 padding: 2px 4px 6px; 

ब्राउज़र बाएँ और दाएँ दोनों किनारों के लिए औसत का उपयोग करेगा, जैसे कि आपने लिखा है:

 padding: 2px 4px 6px 4px; 

पृष्ठभूमि कई छवियों का समर्थन करती है

यह कम से कम ज्ञात गुणों में से एक है, हालांकि यह व्यापक रूप से समर्थित है।

आप जानते हैं कि आप background संपत्ति के अंदर छवि का URL निर्दिष्ट कर सकते हैं, लेकिन यदि आवश्यक हो, तो आप जितनी चाहें उतनी छवियां सम्मिलित कर सकते हैं। आपको बस उन्हें अल्पविराम से अलग करना है:

 background: url('first-image.jpeg') top left, url('second-image.jpeg') bottom right; 

यह क्यों सहायक हो सकता है? क्या आप सीएसएस सूर्योदय के साथ उत्पन्न पृष्ठभूमि में लिनुस टोर्वाल्ड की सोचते हैं?


तुम भी एक वर्ग आयताकार छवि बना सकते हैं, उन छायांकित सीमाओं, जो Instagram में इतना लोकप्रिय हैं जोड़ने। ऐसा करने के लिए, मैंने एक ही छवि को दो बार दोहराया, पृष्ठभूमि छवि को 5 गुना बढ़ा दिया:

टच डिवाइस डिटेक्शन

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

स्मार्टफोन, टैबलेट और क्लासिक पर्सनल कंप्यूटर प्रकृति में भिन्न हैं। यह स्क्रीन के आकार के बारे में नहीं है।

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

उपयोगकर्ता-एजेंट को परिभाषित करने के लिए आपको जटिल जावास्क्रिप्ट कोड की आवश्यकता नहीं है। आपको जो कुछ भी चाहिए वह CSS में है:

 @media (any-pointer: fine) { /* These rules will be applied to not-touchscreen devices */ } @media (any-pointer: coarse) { /* These rules will be applied to touchscreen devices only */ } टचस्क्रीन उपकरणों @media (any-pointer: fine) { /* These rules will be applied to not-touchscreen devices */ } @media (any-pointer: coarse) { /* These rules will be applied to touchscreen devices only */ } 

यहाँ एक उदाहरण है:


संकेत : आपको चेक करने के लिए एक स्मार्टफ़ोन की आवश्यकता नहीं है, आप केवल इस आइकन पर क्लिक करके Google Chrome टूल का उपयोग करके एक टच डिवाइस का अनुकरण कर सकते हैं:



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

अंत में, आप एक touchscreen.css फ़ाइल प्रदान कर सकते हैं और यदि आवश्यक हो तो इसे आयात कर सकते हैं:

 @import url('touchscreen.css') screen and (any-pointer: coarse); 

नोट : फ़ायरफ़ॉक्स वर्तमान में समर्थित नहीं है, जैसा कि आप caniuse.com पर देख सकते हैं।

इंडेंटेशन ढह जाता है

^{“और सीढ़ियों को देखो। वे बदलना पसंद करते हैं। ”(हैरी पॉटर को पर्सी वीस्ली)}

सीएसएस की तरह है - यह साफ सटीक और सुरुचिपूर्ण भाषा है, यह सब कुछ आप डेवलपर्स के लिए की जरूरत है।

आप नियम लागू करते हैं और यह काम करता है। लेकिन जब मुझे लगा कि मुझे CSS के बारे में सब कुछ पता है, तो यह हुआ:


क्या चल रहा है? आप शायद शीर्ष लेख फ़ील्ड के अंदर पाठ होने की उम्मीद करते हैं, लेकिन शीर्षक सबसे नीचे है। मैं ऐसे परिदृश्य नहीं चाहता था। बाद में, मुझे पता चला कि इंडेंटेशन भ्रामक है।

इसका क्या मतलब है? मान लीजिए कि हम इस तरह एक लेआउट बनाना चाहते हैं:



हमने तीन तत्वों के लिए मार्कअप बनाया और उनमें से प्रत्येक के लिए ऊपरी सीमा के लिए एक अलग ऊंचाई निर्धारित की। यह सब काम हो रहा है? नहीं।

यदि आप ऐसा करते हैं, तो ब्राउज़र तीन आसन्न क्षेत्रों नोटिस और उन्हें एक बड़ा ब्लॉक में गठबंधन करने के लिए चाहते हैं।

परिणाम इस तरह दिखेगा:



क्या हुआ? मुझे नहीं पता यह CSS की एक ऐतिहासिक विशेषता है। मुझे लगता है कि जब सीएसएस को मानकीकृत किया गया था, तो खेतों में कोई समस्या नहीं थी, और लेआउट अब उतने जटिल नहीं थे जितने कि अब हैं। इसलिए, डेवलपर्स का फैसला किया है कि यह एक उपयोगी सुविधा है। लेकिन अब इसका कोई मतलब नहीं है।

यदि आप कई वर्षों से सीएसएस के साथ काम कर रहे हैं और इस समस्या का सामना कभी नहीं किया है, इसका कारण यह है कि इंडेंटेशन केवल तब संयुक्त होता है:

• फ़ील्ड लंबवत हैं (क्षैतिज क्षेत्रों के साथ ऐसा नहीं होता है);
• बाहरी तत्वों पाठ या अन्य सामग्री शामिल नहीं है;
• कोई इंडेंटेशन या बॉर्डर सेट नहीं किया जाता है;
• प्रदर्शन संपत्ति को "ब्लॉक" के रूप में परिभाषित किया गया है;
• अतिप्रवाह संपत्ति "प्रारंभिक" से अलग है;
• इंडेंटेशन नकारात्मक नहीं है।

और सूची बनती जाती है। यदि आप इस समस्या का सामना करते हैं, तो आप इनमें से किसी एक स्थिति को छोड़ सकते हैं (पहले को छोड़कर), और इंडेंटेशन सामान्य पर वापस आ जाएगा। आप margin-top का उपयोग करने से भी बच सकते हैं, और इसके बजाय top और padding-top उपयोग कर सकते हैं।

कृपया ध्यान दें कि यह समान स्तर के तत्वों के लिए हो सकता है। आप दो संबंधित तत्वों अन्य के ऊपर एक है, और आप सेट करते हैं margin-bottom: 30px पहले और के लिए margin-top: 60px एक पल के लिए, तो कम से कम के साथ समस्याओं होगा। परिणाम के रूप में संकेत 30 + 60 = 90 पिक्सेल के बराबर नहीं होंगे, लेकिन सबसे बड़े मूल्य (30, 60) / 60 पिक्सेल के बराबर होंगे।

अंतिम विचार

वह सब है! मुझे आशा है कि मैं लेख पर अपना समय बर्बाद नहीं कर रहा था और यह आपके लिए उपयोगी साबित हुआ।

वर्चुअल सर्वर खोजने के लिए साइट VPS.today पर एक नज़र डालें । 130 होस्टरों से 1500 टैरिफ, एक सुविधाजनक इंटरफ़ेस और सबसे अच्छा वर्चुअल सर्वर खोजने के लिए बड़ी संख्या में मानदंड।