कोई बिटमैप/स्प्राइटशीट तकनीक पर शुद्ध सीएसएस स्टाइल बटन का उपयोग क्यों करेगा?

Question

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

मुझे यकीन है कि दोनों पक्षों के लिए तर्क हैं- क्या मुझे इनमें से किसी भी तर्क के लिए कुछ याद आ रहा है?

Answer 1

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

।

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

।

साथ ही, बटन छवि को चित्रित करने के लिए कोड की कुछ पंक्तियां लिखने की तुलना में अधिक समय लग जाएगा। बटन बदलने के लिए भी लागू होता है। रखरखाव सीएसएस पक्ष पर है;)

।

मुझे नहीं लगता कि अनुवाद तर्क लागू होता है। यदि एक "स्थानीयकरण इंजन" विभिन्न भाषाओं के लिए विभिन्न सीएसएस शैली/शैली कक्षाओं/ग्रंथों को संभाल सकता है, तो यह अलग-अलग भाषाओं के लिए अलग-अलग छवियों/sprites को संभालने में सक्षम होना चाहिए।

।

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

Answer 2

एक प्रदर्शन समस्या भी हो सकती है। स्पष्ट रूप से, अधिक/बड़ी छवियों = अधिक डाउनलोड करें। यदि आपके पास कई ग्राफिकल तत्व हैं, तो अंततः यह साइट को धीमा कर देगा। आपके ब्रॉडबैंड/फाइबर कनेक्शन पर, यह इतनी बड़ी समस्या नहीं हो सकती है, लेकिन धीमे कनेक्शन पर यह एक समस्या होगी - खासकर यदि किसी कारण से कैशिंग अक्षम है।

फ्रंटेंड डेवलपर के लिए एक शुद्ध सीएसएस की तुलना में स्पिटमैप समाधान को लागू करने में अधिक समय लगेगा।

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

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

Answer 3

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

चीजों को तेजी से बनाना सॉफ्टवेयर विकास में हमेशा एक बड़ा सौदा है।

Answer 4

जब आप बटन पर टेक्स्ट प्रदर्शित करने के लिए ग्राफिक्स का उपयोग करते हैं, तो आप नियमित पाठ के साथ सीएसएस text-indent: -100000; का उपयोग कर सकते हैं - खोज इंजन इसे देखेंगे, लेकिन उपयोगकर्ता नहीं करेगा।

<div class="button">Button text</div> 
<style> 
    .button { 
     text-indent: -100000; 
     background: url('path/to/image/with/button/text.jpg') no-repeat center center transparent; 
    } 
</style> 

Sprites अच्छे और फैंसी हैं, लेकिन (उदाहरण के लिए) 50kB छवि और कोड के 3KB है, जो एक ही बात करता है में एक वास्तविक अंतर है। यदि आपकी साइट प्रति दिन सैकड़ों देखी जाती है, तो आपको यह अंतर दिखाई नहीं देगा, लेकिन जब यह अरबों हो सकता है ....

Answer 5

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

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

Answer 6

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

आपको उपयोगकर्ता अनुभव बनाम विकास और खुले मानकों की आसानी की गंभीरता पर विचार करना होगा। मेरा मानना ​​है कि सामग्री परत को जितना संभव हो सके डिजाइन परत से अलग करने के प्रयास के लायक है, और इसका मतलब घुमावदार कोनों, बटनों और कई अन्य चीजों के लिए छवियों को पीछे छोड़ना है जिन्हें अब CSS3 का उपयोग करके प्रस्तुत किया जा सकता है। ऐसा करने के लिए हमें कभी-कभी उपलब्ध प्रौद्योगिकी के साथ आगे बढ़ने के लिए थोड़ा सा नियंत्रण और पूर्णता का व्यापार करना पड़ता है।

Answer 7

1- गति, सीएसएस लोड छवियों की तुलना में बहुत तेजी से

2- बैंडविड्थ, अगर आप 20 बटन अपने सभी वेबसाइट और 50000 अद्वितीय प्रयोक्ता हर दिन गर्त है, यह वास्तव में एक प्रभाव पड़ता है।

3- एसईओ बूस्ट, खोजकर्ता छवियों को सीएसएस पसंद करते हैं, और निश्चित रूप से सभी पाठों के ऊपर।

अब, छवियों के साथ आप चीजें सीएसएस कैंट (अब कम से कम नहीं) कर सकते हैं।

यह सब उस चीज पर निर्भर करता है जिसे आप पूरा करना चाहते हैं, जिस तरह की वेबसाइट आप बनाना चाहते हैं। जिन दर्शकों पर आप ध्यान केंद्रित करते हैं।

स्टैक ओवरफ्लो को देखो, इसमें छोटी छवियां हैं। बाकी सभी शुद्ध सीएसएस है।

Answer 8

एक और बिंदु; फ़ोटोशॉप क्लीयरटाइप (उप-पिक्सल का उपयोग नहीं) कर सकता है, क्योंकि यह दर्शक के प्रदर्शन विनिर्देशों पर निर्भर करता है। तो ब्राउज़र टेक्स्ट बहुत साफ दिखता है & तेज।

मैं पूरी तरह से सीएसएस आधारित, हल्के प्रभाव वाले सरल बटन पसंद करता हूं। यदि उन्हें वास्तव में अधिक प्रभावों के साथ भारी दिखने की आवश्यकता है, तो तरीका बिटमैप पृष्ठभूमि और HTML टेक्स्ट का उपयोग करके एक बटन बना देता है, जिसे चरम टेक्स्ट आकारों को कवर करने के लिए सीएसएस के साथ अधिमानतः आकार बदला जा सकता है।

पूरी तरह से बिटमैप किए गए बटन वास्तव में छोटे टेक्स्ट आकारों में बदसूरत लगते हैं, बनाए रखने, डुप्लिकेट, द्रव्यमान संशोधनों (एएसपी अगर आपके पास मूल PSD नहीं है) के लिए सिरदर्द है, तो अधिक बैंडविड्थ और लोड समय लेता है, कोड, आदि का उपयोग करके टाइप किया जा सकता है