إنها التدوية المئة كانت ستكون أرقام لا أحبها لكن سأضطر لتغاضي عنها وإكمال الشروحات مع أخذ أماكن شاغرة في أشياء أخرى غير لينوكس
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)
بالتوفيق
المشاركات
ليست هناك تعليقات