5 मिनट में प्रयोज्य में सुधार

इस ब्लॉग पोस्ट में, मैं साइट की उपयोगिता बढ़ाने के लिए इनमें से कुछ युक्तियों को साझा करने का इरादा रखता हूं, जिनमें से प्रत्येक को लागू करना बहुत आसान है। उनमें से सभी क्रॉस-ब्राउज़र नहीं हैं, लेकिन फिर भी वे "केक पर आइसिंग" कर रहे हैं: पाठक यह भी ध्यान नहीं देगा कि वे वहां नहीं हैं।

1. प्रदर्शन बटन क्लिक और बटन की तरह लिंक

मेरा पसंदीदा टिप। जब सीएसएस में एक बटन शैली निर्दिष्ट की जाती है, या जब एक असामान्य बटन को प्रदर्शित करने के लिए एक चित्र का उपयोग किया जाता है (या तो एक पृष्ठभूमि या एक <img /> तत्व के रूप में), बटन सभी या कुछ ब्राउज़रों (स्थिति पर निर्भर करता है) में क्लिक करने का जवाब नहीं देता है। यहाँ एक आसान ट्रिक है जिससे आप आगंतुक को यह बता सकते हैं कि उसने वास्तव में क्लिक की गई चीज़ पर क्लिक किया है:

.mybutton:active { position: relative; top: 1px; left: 1px; } 

इस कोड के साथ, बटन दबाए जाने पर 1 पिक्सेल दाईं ओर और 1 पिक्सेल नीचे स्थानांतरित किया जाता है। इसे आज़माएँ: यह बहुत ही ठोस है।

अन्य समान रूप से त्वरित विकल्प हैं: सीमा को एक इनसेट संपत्ति दें, पाठ-इंडेंट संपत्ति को 1px पर सेट करें, ग्रेडिएंट बैकग्राउंड की दिशा बदलें (जो कि अगर आप ग्राफिक्स एडिटर का सहारा लेना चाहते हैं, तो जल्दी से किया जा सकता है, यदि साइट पर कहीं और हो एक तैयार-निर्मित उल्टे ढाल का उपयोग किया जाता है), या उनमें से कई का संयोजन।

2. चिकनी संक्रमण (CSS3 संक्रमण)

यह टिप केवल वेबकिट में काम करेगा, लेकिन, जैसा कि मैंने कहा, यह सिर्फ "केक पर टुकड़े करना" है, तो क्या यह वास्तव में मायने रखता है? बेशक, यदि आपके डिजाइन के लिए एक चिकनी संक्रमण महत्वपूर्ण है, तो स्क्रिप्ट लिखना या तैयार-निर्मित पुस्तकालय का उपयोग करना बेहतर है। यदि किसी भी मामले में आपने खुद को सीएसएस तक सीमित रखने का इरादा किया है, तो यह वेबकिट के उपयोगकर्ताओं की सुविधा में एक उल्लेखनीय वृद्धि के रूप में काम करेगा।

मान लीजिए कि आपके पृष्ठ के लिंक आमतौर पर नीले हैं, लेकिन जब आप उन पर मंडराते हैं तो लाल हो जाते हैं। वेबकिट उपयोगकर्ताओं के लिए नीले से लाल चिकनी में संक्रमण करने के लिए, बस CSS में दो -webkit लाइनें जोड़ें :

 a { color:blue; -webkit-transition-property: color; -webkit-transition-duration: 1s; } a:hover { color:red; } 

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

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

 a { color:blue; -webkit-transition-property: color; -moz-transition-property: color; -o-transition-property: color; -ms-transition-property: color; transition-property: color; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; -ms-transition-duration: 1s; transition-duration: 1s; } a:hover { color:red; } 

यह महसूस करते हुए कि गुणों की संख्या में पाँच की वृद्धि से फर्क पड़ सकता है, ली वेरो ने स्क्रिप्ट -प्रिफ़िक्स- फ़्री लिखा, जिसकी मैंने पहले ही हब्राह्रा पर रिपोर्ट की थी ।

3. उनके कार्यों को इंगित करने वाले विशेष वर्णों के साथ बटन से लैस करें

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



इस तरह के कई पात्रों के लिए कीवर्ड (HTML संस्थाओं के नाम पर) हैं , और अन्य को उनके यूनिकोड संख्याओं (जैसे & # xABCD; ) द्वारा कॉल करना होगा - उन्हें कठिन परीक्षण करना होगा, क्योंकि ये सभी फोंट में काफी सामान्य नहीं हैं।

आप इनमें से कई विशेष पात्रों और उनके यूनिकोड हेक्साडेसिमल संख्याओं को http://www.copypastecharacter.com/ और http://www.alanwood.net/unicode/dingbats.html पर देख सकते हैं ।

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

4. धारीदार टेबल

यह टिप IE में काम नहीं करेगा (IE9 और नए को छोड़कर) और फ़ायरफ़ॉक्स 3 में। पढ़ने की तालिकाओं (साथ ही कुछ सूचियों) की आसानी को पंक्ति से पंक्ति में पृष्ठभूमि का रंग थोड़ा बदलकर सुधारा जा सकता है। आपने संभवतः इस प्रभाव को एक से अधिक बार देखा है, और यह आम तौर पर या तो जावास्क्रिप्ट या सर्वर पर तालिका बनाते समय प्राप्त किया जाता है। हालाँकि, इसे सरल CSS3 पर भी जल्दी से व्यवस्थित किया जा सकता है, यदि आप IE और पुराने ब्राउज़रों में काम करने के बारे में परवाह नहीं करते हैं, या जब पूरी तरह से क्रॉस-ब्राउज़र समाधान के लिए समय नहीं है:

 table.stats tr { background: white; } table.stats tr:nth-child(odd) { background: #f4f4f4; } 

5. आंतरिक लिंक के लक्ष्य तत्व को हाइलाइट करें

यह टिप IE (IE9 और नए - quirksmode.org को छोड़कर) और ब्राउज़र के पुराने संस्करणों में काम नहीं करेगा। यदि किसी एक पृष्ठ पर बहुत सारी सामग्री है जिसे आंतरिक लिंक के माध्यम से एक्सेस किया जा सकता है (उदाहरण के लिए, अक्सर पूछे जाने वाले प्रश्न में), तो आप सीएसएस 3 छद्म वर्ग " : लक्ष्य " का उपयोग करके पाठक को ठीक वही दिखा सकते हैं जहाँ उसने लिंक का अनुसरण किया है:

 h3:target { background: #FFFBCC; } 

H3 एलिमेंट #FFFBCC बैकग्राउंड को तभी अधिग्रहित करेगा जब रीडर उस पर रेफरेंस द्वारा लैंड करेगा। उदाहरण के लिए, यदि तत्व आईडी "foo" पर सेट है, तो पाठक के #foo में जाने के बाद उसे #FFFBCC पृष्ठभूमि मिल जाएगी।

वह सब

खैर, क्या यह पांच मिनट से अधिक समय तक रहा?