सीएसएस स्प्राइट तकनीक, सीएसएस पृष्ठभूमि या आईएमजी क्लिप

Question

दो छवि स्प्राइट तकनीकें हैं। "क्लासिक" संस्करण पृष्ठभूमि और पृष्ठभूमि-स्थिति सीएसएस गुणों का उपयोग करता है। (जैसा कि यहां बताया गया है http://www.alistapart.com/articles/sprites)

"दूसरा" संस्करण एक छवि टैग और इसकी क्लिप सीएसएस संपत्ति का उपयोग करता है। (http://css-tricks.com/css-sprites-with-inline-images/)

मेरा सवाल यह है कि "क्लासिक" संस्करण पर "दूसरा" संस्करण का उपयोग करने के फायदे हैं?

धन्यवाद और सबसे अच्छा, विक्टर

Answer 1

अंतर मुख्य रूप से दस्तावेज़ के शब्दों के नीचे आता है: आप सजावटी और लेआउट ग्राफिक्स के लिए अभी तक केवल उपयोग पृष्ठभूमि, और केवल ग्राफिक्स कि का हिस्सा हैं के लिए छवि टैग का उपयोग करना चाहिए आपके पेज की सामग्री

याद रखें कि पृष्ठ किसी भी सीएसएस के बिना अभी भी उपयोगी और उपयोगी हो सकते हैं: दूसरी तकनीक के साथ, इसका मतलब यह होगा कि आपका पूरा स्प्राइट-नक्शा दिखाई देगा (आपको कोई क्लिपिंग नहीं मिलेगी) हर जगह आप एक स्प्राइट का इस्तेमाल करते हैं - बहुत भ्रामक!

पहली तकनीक किसी भी sprites नहीं दिखाएगी, लेकिन गलत या भ्रमित नहीं होगा।

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

संक्षेप में - छवि टैग आधारित sprites एक टूटी हुई तकनीक का एक छोटा सा हिस्सा है - मैं इसका उपयोग नहीं करता।

Answer 2

एक उपयोग केस है जब आप उस पर आइकन वाले पृष्ठ मुद्रित करना चाहते हैं (उदाहरण के लिए फ़ोन/स्काइप/आदि के साथ एक संगठन संपर्क कार्ड)।

 
- use separate img elements 
- use sprite via pseudo(:after) elements with 'content' and 'clip' property 

Answer 3

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

चेक इस दो अधिक जानकारी के लिए लेख:

http://tjkdesign.com/articles/how-to_use_sprites_with_my_Image_Replacement_technique.asp http://www.artzstudio.com/2010/04/img-sprites-high-contrast/

उपयोग स्प्राइट छद्म के माध्यम से (: के बाद) 'सामग्री' और 'क्लिप' संपत्ति के साथ तत्वों

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