कुछ उपयोगी सीएसएस ट्रिक्स

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

इनपुट क्षेत्र में AutoPut घटना

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

समाधान : का उपयोग करें: मान्य छद्म वर्ग। यह एक इनपुट के लिए काम करता है यदि इसमें ऐसी सामग्री है जो इनपुट के प्रकार (पाठ, ई-मेल) को संतुष्ट करती है और यदि इस इनपुट में आवश्यक विशेषता है। सच है, समाधान IE में काम नहीं करता है, लेकिन हमें इस ब्राउज़र के लिए समर्थन की आवश्यकता नहीं है।

<input required="required" class="email-input" type="email" /> <input required="required" class="password-input" type="password"/> <div class="go">Login</div> .email-input:valid ~ .password-input:valid ~ .go { //    Login } 

: मोबाइल पर होवर करें

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

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

 .element { //  .no-touch &:hover, .touch &:active { //        } } 

इनपुट द्वारा फ़ोकस प्राप्त करने पर प्लेसहोल्डर छिपाना

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

समाधान : का उपयोग करें: प्लेसहोल्डर छद्म वर्ग के साथ मिलकर: ध्यान केंद्रित करते समय प्लेसहोल्डर पाठ के पाठ को अदृश्य बनाने के लिए छद्म वर्ग पर ध्यान केंद्रित करें। फिर से, यह सभी ब्राउज़रों में काम नहीं करता है, लेकिन हमें हर चीज की जरूरत नहीं है।

उदाहरण rWeb की टिप्पणियों के अनुसार सही किया गया

 /* Webkit */ input:focus::-webkit-input-placeholder { color: transparent !important; } /* Mozilla Firefox 4 - 18 */ input:focus:-moz-placeholder { color: transparent !important; } /* Mozilla Firefox 19+ */ input:focus::-moz-placeholder { color: transparent !important; } /* IE 10+ */ input:focus:-ms-input-placeholder { color: transparent !important; } 

पृष्ठभूमि-आकार के साथ चित्र का गलत प्रतिपादन: वेबकिट ब्राउज़रों में कवर (और न केवल)।

समस्या : तस्वीर कभी-कभी पूरे कंटेनर पर कब्जा नहीं करती है, और कंटेनर के किनारों के साथ एकल-पिक्सेल अंतराल बने रहते हैं।

पहला समाधान : यदि कवर को काटने के अलावा तस्वीर से थोड़ा अतिरिक्त काट देना जायज़ है, तो उपयोग करना: बाद में या: इससे पहले कि हम कंटेनर में छद्म तत्व डालें, पृष्ठभूमि चित्र को असाइन करें, और पिक्सेल के एक जोड़े द्वारा माता-पिता की तुलना में बड़ा करें ( http://jsfiddle.net / एनवी 3 डी / )।

 .element { position: relative; width: 200px; height: 100px; overflow: hidden; &:after { content:''; position: absolute; left: -2px; right: -2px; top: -2px; bottom: -2px; background-image: url(...); background-size: cover; } } 

दूसरा समाधान : यदि इस तस्वीर का उपयोग पृष्ठभूमि के रूप में किया जाता है और हमेशा पूरी विंडो पर कब्जा कर लेता है, तो आप गतिशील रूप से एक मीडिया क्वेरी डाल सकते हैं जो ब्राउज़र विंडो के वर्तमान पहलू अनुपात की छवि के पहलू अनुपात के अनुसार निगरानी करेगी और तदनुसार पृष्ठभूमि का आकार निर्धारित करेगी: डिफ़ॉल्ट पृष्ठभूमि आकार के बजाय ऑटो 100% : 100% ऑटो; ( http://jsfiddle.net/NRDA9/ )

 .element { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: url(...); background-size: 100% auto; background-position: 50% 50%; } @media screen and (max-aspect-ratio: IMAGE_WIDTH / IMAGE_HEIGHT) { .element { background-size: auto 100%; } } 

फ़ायरफ़ॉक्स में तीन-आयामी परिवर्तनों को लागू करते समय एक तत्व के चारों ओर सीढ़ी

समस्या : एक सॉकेट में 3 डी ट्रांसफ़ॉर्मेशन लागू करते समय, जो जटिल रूप से अंतरिक्ष में विकसित होता है, फायरफ़ॉक्स में एक तत्व के समोच्च के साथ एक भयानक सीढ़ी प्रदान की गई थी।

समाधान : तत्व के लिए एक सूक्ष्म छाया लागू करें।

 .panel-body { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05); }