सीएसएस बनाना रेटिना डिस्प्ले पर अधिक संवेदनशील बनाता है और अधिक [कम]

हमें स्प्राइट की आवश्यकता क्यों है?

मैं केवल संक्षेप में लिखूंगा कि यह क्यों आवश्यक है, क्योंकि हस्बे पर कई बार सीएसएस-स्प्राइट्स के फायदे और नुकसान का वर्णन किया गया है।

• सबसे पहले, स्प्राइट्स का उपयोग करके, हम पेज लोडिंग को गति देते हैं; आइकन का उपयोग करने के मामले में, आप परियोजनाओं में उपयोग के लिए एक सार्वभौमिक उपकरण बना सकते हैं;
• दूसरे, उच्च पीपीआई वाले सभी डिवाइस नहीं हैं (उदाहरण के लिए, विंडोज फोन 7.5-7.8, स्टॉक ब्राउज़र पर संस्करण 4 तक एंड्रॉइड) वेबफोन्स के उपयोग का समर्थन करता है ।
• विशेष स्प्राइट पीढ़ी सेवाओं का उपयोग करके आसान एकीकरण

समस्या बयान या ताकि जीवन रास्पबेरी नहीं लगता है

कई तत्वों के साथ सीएसएस-स्प्राइट्स का उपयोग करना, background-position साथ सीएसएस-गुण बनाने में समस्या उत्पन्न होती है; उन्हें बहुत कुछ लिखने की जरूरत है, कभी-कभी बहुत कुछ। बेशक, स्प्राइट पैदा करने के लिए कई सेवाएं हमें मदद करती हैं - वे निर्देशांक के साथ एक सीएसएस / कम / sass - फाइल को स्प्राइट के साथ देते हैं। लेकिन लगभग हमेशा सब कुछ पिक्सल के साथ सख्ती से बंधा होता है:

• मूल स्प्राइट फ़ाइल का आकार (रेटिना-स्क्रीन के लिए, उदाहरण के लिए) बदलना, सब कुछ "चला जाता है";
• हम उस कंटेनर तत्व का आकार नहीं बदल सकते हैं जहाँ हम सम्मिलित करना चाहते हैं, एक आइकन, ताकि यह आइकन तराजू: background-size: cover/contain/100% गुण स्पष्ट कारणों से काम न करें;

फोन, टैबलेट और नए रेटिना लैपटॉप पर 72ppi के लिए तैयार स्प्राइट्स का उपयोग करने से छवियों का धुंधला हो जाता है, और वे बदसूरत दिखते हैं ...

क्रॉस-ब्राउज़र संगतता, क्रॉस-प्लेटफ़ॉर्म और क्रॉस-कुछ और पर अस्वीकृति
हम इस विधि में css3 का उपयोग केवल ppi वाले डिस्प्ले के लिए करेंगे, जो मानक 72 से अधिक है। इसी तरह के डिस्प्ले अपेक्षाकृत हाल ही में दिखाई दिए, और कोई IE 7.0-IE8.0 और फ़ायरफ़ॉक्स या ओपेरा के समान पुराने संस्करण वहाँ नहीं खड़े होंगे। मोबाइल सेगमेंट के साथ, सब कुछ क्रम में है, मीडिया के प्रश्नों का समर्थन हर जगह लागू है ।

आइए कम स्निपेट बनाना शुरू करें

मुझे तुरंत पता चलेगा कि कोई भी किसी कार्यशील परियोजना पर कम उपयोग करने के लिए बाध्य नहीं है, सब कुछ नियमित सीएसएस में संकलित किया जा सकता है मैक के लिए बहुत सारे समान कार्यक्रम हैं, विंडोज़ के लिए विनलेस उपयोगी होगा।
अब मैं स्प्राइट के एक विशेष मामले पर विचार करूंगा - एक अद्भुत संसाधन icomoon.io द्वारा उत्पन्न आइकन के साथ एक स्प्राइट

यदि हमें रेटिना के लिए स्प्राइट को कॉन्फ़िगर करने की आवश्यकता है तो हम साधारण सीएसएस के साथ क्या करेंगे? सबसे अधिक संभावना है, हम उच्च-रिज़ॉल्यूशन स्प्राइट का उपयोग करने से इनकार करेंगे। शायद वे इसे केवल उच्च पीपीआई वाले उपकरणों के लिए जोड़ेंगे।
लेकिन यहां हम अपने आकार को फिट करने के लिए इस स्प्राइट को स्केल करने की समस्या का सामना कर रहे हैं। और यह, transform: scale(x); को छोड़कर transform: scale(x); बस इसे हल नहीं किया जा सकता है, और आपको स्प्राइट को फिर से लिखना होगा, सभी background-position को फिर से लिखना होगा। और सब कुछ ठीक होगा, लेकिन कभी-कभी आइकन की संख्या पैमाने से दूर हो जाती है, और वास्तव में मैं एक सार्वभौमिक समाधान चाहूंगा।

मेरे पास है

तो चलिए शुरू करते हैं:

• पहली चीज जो हमें चाहिए वह है 2 स्प्राइट्स (3 संभव अगर हम 400+ पीपीआई को कवर करना चाहते हैं) और उनके लिए एक सीएसएस कोड जनरेट करें। यह आसानी से ऊपर उद्धृत सेवा के माध्यम से किया जाता है। मैंने 145 आइकन, आकार 16px (25kb), 32px (62kb) और 64px (163kb) उत्पन्न किए
  प्रारंभ में, 16px आइकन के लिए संलग्न सीएसएस फ़ाइल इस तरह दिखती है: (मैंने जानबूझकर इसे चार आइकन तक कम कर दिया ताकि कोड की विशाल शीट के साथ मुझे डरा नहीं सके)
  

   .icon-rss,.icon-e-mail,.icon-youtube,.icon-mailru { display: inline-block; width: 16px; height: 16px; background-image: url(sprites.png); background-repeat: no-repeat; } .icon-rss { background-position: 0 0; } .icon-e-mail { background-position: -32px 0; } .icon-youtube { background-position: -64px 0; } .icon-mailru { background-position: -96px 0; } 

  
  
• फिर हम स्प्राइट चित्र के आकार का पता लगाते हैं। 16px आइकन के लिए, यह 496px था। यह मान हमारे कम कोड का संदर्भ होगा। अब लाइन background-size: 496px; जोड़ें background-size: 496px;
• अब हमें इस सभी css- स्प्राइट में इकाइयों को " px " को एक चर के साथ बदलकर, डिफ़ॉल्ट रूप से 1px के बराबर प्राप्त करना होगा। इसे size कहते size । यह आसानी से AutoCorrect द्वारा किया जाता है। रास्ते के साथ, फ़ाइल को कम विस्तार में बदलने और अपनी परियोजना की मुख्य कम-फ़ाइल को शामिल करने के लिए मत भूलना:
  

   @size: 1px; .icon-rss,.icon-e-mail,.icon-youtube,.icon-mailru { display: inline-block; width: 16*(@size); height: 16*(@size); background-image: url(sprites.png); background-repeat: no-repeat; background-size:496*(@size); } .icon-rss { background-position: 0 0; } .icon-e-mail { background-position: -32*(@size) 0; } .icon-youtube { background-position: -64*(@size) 0; } .icon-mailru { background-position: -96*(@size) 0; } 

• यह ध्यान रखना महत्वपूर्ण है कि हम केवल परिणामी मिश्रणों को टैग में नहीं जोड़ सकते हैं - हमारे पास कक्षाओं में चौड़ाई और ऊंचाई है, जिसका अर्थ है कि हम उन्हें छद्म तत्वों में जोड़ देंगे ::before या ::after
• कोड में कहीं भी @media प्रश्नों का कम समर्थन करता है: पिक्सेल घनत्व के आधार पर, हम एक या दूसरी फ़ाइल कनेक्ट करेंगे।
  

   @size: 1px; .icon-rss,.icon-e-mail,.icon-youtube,.icon-mailru { display: inline-block; width: 16*(@size); height: 16*(@size); background-image: url(sprites.png); @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) { background-image: url(sprites32.png); } @media only screen and (-webkit-min-device-pixel-ratio: 4), only screen and ( min--moz-device-pixel-ratio: 4), only screen and ( -o-min-device-pixel-ratio: 4/1), only screen and ( min-device-pixel-ratio: 4), only screen and ( min-resolution: 360dpi), only screen and ( min-resolution: 4dppx) { background-image: url(sprites64.png); } background-repeat: no-repeat; background-size:496*(@size); } .icon-rss { background-position: 0 0; } .icon-e-mail { background-position: -32*(@size) 0; } .icon-youtube { background-position: -64*(@size) 0; } .icon-mailru { background-position: -96*(@size) 0; } 

व्यावहारिक अनुप्रयोग के लिए टिप्पणियाँ

1. आपको एक ही बार में जनरेटर कार्यक्रम के माध्यम से तीन अलग-अलग स्प्राइट उत्पन्न करने की आवश्यकता नहीं है। आप एक (बहुत-रेटिना स्क्रीन के लिए) उत्पन्न कर सकते हैं, एक कीमती सीएसएस-फ़ाइल प्राप्त कर सकते हैं, और फिर एक ग्राफिकल एडिटर के माध्यम से साधारण उपकरणों (रेटिना नहीं) के लिए स्प्राइट का कम संस्करण बना सकते हैं।
2. मेरी परियोजनाओं में मैं " px " का उपयोग नहीं करता हूं। इसके बजाय, मैं size चर के लिए " rem " मान प्रदान करता हूं। यह आइकन के आकार को आवश्यक रूप से बदलने की स्वतंत्रता देता है, और यदि हम टैबलेट से साइट को खोलते हैं, तो ये समान rem थोड़ा बहुत हो जाते हैं, क्योंकि मैंने उदाहरण के लिए, टेबलेट के लिए थोड़ा बड़ा फ़ॉन्ट आकार निर्धारित किया है:
   

    @media (min-width: 768px) and (max-width: 1366px) { html {font-size: 120%;} } 

इस तकनीक का उपयोग कब करना है

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

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