شرح أساسيات CSS Sprite

إنها التدوية المئة كانت ستكون أرقام لا أحبها لكن سأضطر لتغاضي عنها وإكمال الشروحات مع أخذ أماكن شاغرة في أشياء أخرى غير لينوكس 🙂
CSS Sprite خاصية تعرفة عليها ليس من أمد طويل لها كثير من المميزات يجعل إستعمالها واجبا
سيتم شرح ما هو CSS Sprite وما فائدته وكيفية إستعماله.

ما هو CSS Sprite ؟

بكل سهولة طريقة قديمة أستعملة سابقا في برمجة ألعاب الحاسوب، وتتمثل بشكل رئيسي في إستعمال صورة واحدة تتألف من العديد من الصور ويتم إستعمال خاصية background-position ل css التي تعرض كل صورة كأنها فردية
لم تفهمها بعد؟ ليسة مشكلة سأشرحها من وجهة نضر أخرى، نأخذ على حساب المثال شركة تعرفونها جميعا google، إذا قمت بعملية بحث في جوجل (google) ستلاحض في صفحة النتائج أن هناك عدة صور وليس واحدة من الشعار إلى صور التحرك بين الصفحات، ولاكن في الحقيقة هي صورة واحدة تجمع كل تلك الصور التي ترها

هذا هو مجموع الصور التي تراها أليس كذالك
سأضيف بعض الألوان لفهمها بشكل أكثر عمق

الأن تعرفون لمذا سرعة google

ما فائدت CSS Sprite ؟

هناك فائدتين أساسيتين عند إستعمال CSS Sprites وتتضمن الأولى في تسريع تحميل الموقع وأخرى هي حفض كبير في إستهلاك موارد الخادم أو الإستضافة للموقع
ميزتان متميزة سيجعلانك تريد تعرف كيفية إستخدامهم

لقد أقنعني، كيف نبدأ ؟

نبدأ بمثال عملي عند إستعمالك لهذه المدونة أو أي مدونة سترى أن هناك شيء يتم إستعماله لشيء ما .لكن لايمكن الإستغناء عنه ألا وهو إرسال المقال لأكثر من موقع إجتماعي

كما يضهر 10 صور متفرقة إضافة إلى صورة الخلفية سأترك كود html الثلاثة الأوائل لكي يتم رأية الأشياء بوضوح

<div>
<ul>
<li><a id="stwitter" title="Tweet This" href="#" rel="nofollow"><span>twitter</span></a></li>
<li><a id="sfacebook" title="Send to Facebook" href="#" rel="nofollow"><span>Facebook</span></a></li>
<li><a id="sgooglebuzz" title="Send to Googlebuzz" href="#" rel="nofollow"><span>Googlebuzz</span></a></li>
</ul>
</div>

بإستعمال Firebug سنرى كيف يتم عمل التحميل والوقت المستعمل وعدد الطلبات

كما يضهر ثلاث طلبات للخادم بوقت محدد في ل 1.16 ثانية

الآن باستخدام تقنية CSS Sprites

أول شيء نحتاجه هو عمل ملف يجمع الصور التي نحتاجها، هنا بمتابعة الشرح والكود ثلاث صور، يمكنك عملها بإستخدام برنامج لتعديل الصور أو إستعمال أحد المواقع التي تسهل ذالك.والذي أستعمل هو csssprites من جانب نرفع الصور للحصول على صورة واحدة ومن جهة أخرى نحصل على توليد لكود css مع position x/y لإضهار الصور منفردة.
الصورة التي حصلة عليها ل 10 صور

في حالتي اخترت PNG و يمكن إختيار أو عمل صور من نوع أخر مثل GIF في الصورة يمكنك أن ترى تلك المجموعة من الصور في صورة واحدة والأن إلى إستعمل خصائص css وإستعمال background-position
في حالة الصور الثلاثة لدينا الكود html كل ب Id لنتكن أن نقوم بندائهم بإسم id ووضع لهم background-position برقم X/Y الذي حصلنا عليه لكل صورة

.sociable ul li a{display:block;height:32px;width:32px;background:url(images/social.png);}
#stwitter{
background-position: 0px 0px;
}
#sfacebook{
background-position: 0px -232px;
}
#sgooglebuzz{
background-position: 0px -232px;
}

كل شيء مجموع في خصائص css أولا نحدد الكل بعلو و عرض وصورة ومن هناك نأخذ كل واحد على حدى لإضافة مكان المحدد لصورة عبر background-position
والأن نرجع إلى Firebug ويمكن أن نلاحض الفرق بإستعمال sprite

الأن يلاحض أنه طلب واحد للخادم بسرعة ما يقارب النصف
بهذه الخاصية قمت بعملها لشيء محدد لكن يمكن إستخدامه للمدونة كاملة و عمل أشياء أكثر متقدمة (مثال إستعمال google)
بالتوفيق

محمد حنين

الإسم الكامل محمد حنين أحد geek من أمد طويل ، مطور ويب، محب للحرية، مستعمل نضام لينوكس، وأخيرا مجرم باللغة العربية للأسف في وقتها. معلومات أكثر عني أو الإتصال بي Mohammed Hanine

You may also like...

6 تعليقات

  1. السلام عليكم ورحمة الله وبركاته

    الأخ الكريم

    لقد اعجبت بهذه التدوينة وبتقنية CSS SPRITES وأتمنى بعض المساعدة بالخصوص حيث وأنا أريد أن أعملها لكافة الصور الموجودة في المدونة من أجل تسريع التحميل .

    فأرجو مساعدتك وأكون شاكراً

    • يقول mohammed:

      وعليكم السلام ورحمة الله وبركاته
      لقد قمت بتحليل أولي لمدونتك لكن لاأجد حل المشكلة هو إستعمال CSS SPRITES
      أترك لك التحليل وأنت تترد ما تستطيع عمله لإنقاص تحمبل المدونة
      الصور في الصفحة الأولى 9 ويتم تحميلها في ظرف ما يقارب 2،5 ثواني ويتم حفض صورة واحدة في كاش المتصفح مع إمكانيت إنقاص 20% من حجم صورتين وبما أنك تستعمل blogspot يتم إستخدام cdn لتسريع.
      ملفات CSS هم 6 وتحميلها يتم في قرابة 1،2 ثواني ويتم حفض 50% منها وهذا عند إعادة تحميل الموقع ينقص نصف تلك المدة ليصبح 600 MS.
      ملفات js عددها 13 ويتم تحميلها في توقيت 7 ثولني وإعادة تحميلها لايتغير مع حفض ما يقارب 40% منها لأن التحميل يتم من مواقع مختلفة وهذا النوع يقوم بإنتضار السابق ليتم تحميله بإنتضام,
      المشكلة أراها تحديدا في ملفات js وبعض النضريات
      يمكنك تسريع المدونة من 10 ثواني إلى 2 ثواني بدون إستعمال أي js ^^ وعليك تجربت إيقاف javascript في المتصفح وتجربة الدخول للمدونة.
      مشكلة عند عدم إستخدام ما لا يلزم من JS انه لايمكنك الحصول على معلومات من المواقع الثالثة ومنها -عـــمــــــلات-، -مـصـطلـحات مـحـاسـبية-،-المـتابعــــون- لكن يمكن عمل رابط لتلك الخدمة لو خفض ما يلزم مثل -المـتابعــــون-
      النضريات هو أن GOOGLE يقوم بخفض أهميت موقع بعدد إضافة أي خدمة ثالثة يتم تحمبل منها إضافات لموقعك ومنها ما تم ذكره إضافة إلى -عــــداد المــدونـــة- وهذا تجد في webmasters
      وبمناسبت ذكرك لكيفيت تسريع المدونة أضن أني سأضع مدونة تتكلم على كيفيت تسريع المواقع.

  2. السلام عليكم ورحمة الله وبركاته

    الشكر الجزيل لك أخي الكريم ، فقد قمت بتطبيق ما جاء في ردك بالخصوص وأعتقد والحمد لله أصبحت المدونة سريعة مقارنة بالسابق .

    تحياتي

  3. مقاله رائعه واستفدت منها كثيراً وسأقوم بتطبيقها فى مشاريعى القادمه بإذن الله تعالى

  4. مقاله رائعه فعلا
    وفكره جميله من جوجل لاستخدام البوزيشن
    كان الواحد مجرد بيستخدمه فى القوائم فقط
    طلع ليه فكره اخرى الواحد ممكن يستخدمه فى التصميم عمتاً
    لعمل اكثر من استايل يتم تحميله مره واحده وفى التصميم عامه الخ .
    حيفرق فى السرعه كتير ^^
    بارك الله فيك

    • يقول محمد:

      الحقيقة يضهر فرق السرعة عند إستعمال هذه الخاصية لذالك تستعمل هذه الخاصية على صعيد كبير من المواقع ومنها جوجل فتحميله لا يلزم إلى أجزاء من الثانية وإضافة إلى ذالك يستعمل هذه الخاصية لأنه يعرف أهمية جزء من الثانية
      وبما أنك إنشاء الله، تود تطبيقها على المشاريع القادمة يمكنك تجربت إستعمال بعض التطبيقات التلقائية لتسهيل العمل عليك
      7 مولدات CSS Sprites
      إضافة إلى أخر واحد وجدت لكن لم أجربه
      http://yostudios.github.com/Spritemapper/

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *