مفهوم العفاريت موجود منذ فترة حتى الآن. إنها إحدى التقنيات الأكثر استخدامًا في صناعة الألعاب لتسريع عملية عرض الرسوم المتحركة على الشاشة. في هذه المقالة ، سنلقي نظرة خاصة على كيف يمكن لهذه التقنية أن تساعدنا في تحسين تجربة المستخدم على صفحات الويب بمساعدة CSS Sprites بالترتيب التالي:
- ما هو العفريت؟
- ما هو CSS Sprite - نظرة عامة سريعة؟
- مثال على كيف يساعد في تطوير الويب؟
- مزايا استخدام CSS Sprites
- ما الذي يجب على المطور فعله عند العمل مع CSS Sprites؟
- كيفية إنشاء ورقة رموز متحركة CSS؟
- كيف تعمل مع CSS Sprites؟
- الشركات التي تستخدم CSS Sprites
ما هو العفريت؟
العفريت هو صورة واحدة هي جزء من مشهد أكبر في اللعبة. ثم يتم دمج النقوش المتحركة المتعددة في صورة كبيرة تسمى ورقة الرموز المتحركة. بمجرد تحميل ورقة الرموز المتحركة في الذاكرة ، يتم عرض النقوش المتحركة المختلفة في تتابع سريع لإعطاء وهم الرسوم المتحركة. يتم ذلك في وقت واحد لعشرات إلى مئات من النقوش المتحركة المختلفة لتوليد مشهد في اللعبة.
الفكرة الأساسية هي أنه من الأسرع تحميل صورة وعرض جزء منها أينما كان ذلك مطلوبًا مقارنةً بتحميل صور متعددة وعرضها.
ما هو CSS Sprite: نظرة عامة سريعة؟
نقش CSS هو تقنية يستخدمها مطورو الويب غالبًا لتحسين أداء صفحات الويب. في هذه التقنية ، يتم عادةً دمج صور متعددة أصغر من نفس الأبعاد في صورة واحدة كبيرة تسمى a ورقة العفريت أو مجموعة البلاط . ثم يتم استخدام ورقة الرموز المتحركة هذه لعرض العناصر الفردية حيثما احتجنا إليها.
عادةً ما يتم تضمين عناصر مثل الشعارات وأسهم التنقل والأزرار في ورقة الرموز المتحركة لأنها تقريبًا بنفس الأبعاد ويتم استخدامها بشكل متكرر في صفحة الويب.
مثال على كيف يساعد في تطوير الويب؟
بشكل عام ، أثناء تصميم صفحات الويب ، يتم تخزين الصور واستخدامها كملفات فردية. لذلك ، عندما يفتح المستخدم صفحة ويب ، يتعين على المتصفح تقديم طلب HTTP لكل من هذه الملفات وتنزيلها بشكل منفصل وعرضها. يؤدي هذا إلى أوقات تحميل أعلى للصفحة حيث يمكن أن تحتوي صفحة ويب معينة على عدد كبير من الصور الأصغر مثل الأزرار والرموز والشعارات.
كيفية عكس الرقم
تساعد رموز CSS المطورين على دمج هذه الصور الصغيرة المستخدمة بشكل متكرر في صورة واحدة كبيرة. يجب على المتصفح بعد ذلك تنزيل ملف واحد فقط يتم استخدامه بعد ذلكعرض القسم المطلوب عن طريق موازنة الصورة.
مزايا استخدام CSS Sprites
هناك ميزتان رئيسيتان لاستخدام CSS sprites على الصور العادية:
تحميل أسرع للصفحة: يعمل على تحسين وقت تحميل الصفحة حيث تظهر الصور المستخدمة في صفحة الويب بمجرد تنزيل الورقة.
إنتاجية أكبر واستخدام أقل للموارد: لا تعمل هذه التقنية فقط على تحسين تجربة المستخدم النهائي من خلال جعل تحميل الصفحة أسرع ،ولكنه يقلل أيضًا من ازدحام الشبكة حيث يتم إجراء عدد أقل من طلبات HTTP.
ما الذي يتعين على المطور فعله عند العمل مع CSS Sprites؟
عند العمل مع الصور الفردية ، يمكن للمطور ببساطة العمل مع علامة HTML ونمطه في CSS إذا لزم الأمر. ولكن عند العمل مع CSS Sprites ، يحتاج المطور إلى القيام بأمرين محددين:
- إنشاء ورقة سبرايت
أثناء تطوير صفحة ويب إذا قرر المطور استخدام نقوش CSS ، فعليه أولاً إنشاء ورقة الرموز المتحركة عن طريق دمج جميع العناصر المطلوبة مثل الأزرار والشعارات وما إلى ذلك في نمط يشبه الشبكة. يمكن القيام بذلك باستخدام أي برنامج لتحرير الصور مثل Photoshop أو Gimp. هناك أيضًا العديد من الأدوات المتاحة عبر الإنترنت والتي تساعدك في إنشاء ورقة الرموز المتحركة. تمت مناقشة هذه الأدوات لاحقًا في هذه المقالة.
- قم بالوصول إلى عنصر معين من الكائن باستخدام امتداد موقف الخلفية CSS خاصية
بمجرد أن تصبح ورقة الرموز المتحركة جاهزة ، يتعين على المطور بعد ذلك استخدام سمات CSS للوصول إلى أجزاء مختلفة من الورقة.
- عرض: عرض العفريت
- ارتفاع: ارتفاع الكائن
- خلفية: إشارة إلى ورقة الرموز المتحركة
- موقف الخلفية: قيم الإزاحة (بالبكسل) للوصول فقط إلى الجزء المطلوب من ورقة الرموز المتحركة
كيفية إنشاء ورقة رموز متحركة CSS؟
يمكنك استخدام أي برنامج لتحرير الصور لترتيب صورك الأصغر في شبكة ولكن تتم مناقشة طريقتين أسهل أدناه:
1. أداة إنشاء ورقة الرموز المتحركة عبر الإنترنت
حلقة الوصل: toptal.com/developers/css/sprite-generator/
هذه الأداة ليست مجانية للاستخدام فحسب ، بل توفر لك أيضًا رمز CSS المطلوب الذي يمكن استخدامه أثناء الرجوع إلى ورقة الرموز المتحركة. أيضًا ، يمكنك العبث بخصائص مختلفة مثل الحشو بين العناصر وتغيير محاذاتها.
2. توليد ورقة Sprite مع Sprity
إذا كنت تستخدم Grunt أو Node أو Gulp ، فيمكنك تثبيت حزمة تسمى Sprity والتي ستساعدك على إنشاء ورقة رموز متحركة بتنسيقات متنوعة مثل PNG و JPG وما إلى ذلك.
أولاً ، ستحتاج إلى تثبيت Sprity باستخدام:
npm تثبيت sprity -g
بعد ذلك ، لإنشاء ورقة الرموز المتحركة ، استخدم الأمر التالي:
sprity ./output-directory/ ./input-directory/*.png
كيف تعمل مع CSS Sprites؟
في هذا المثال ، سنستخدم ورقة الرموز المتحركة التالية:
كما ترون في الصورة أعلاه ، تم ترتيب ستة أيقونات (Instagram و Twitter و Facebook) في نمط يشبه الشبكة. في الصف الأول ، لدينا حالة طبيعية وفي الصف الثاني ، لدينا حالة التمرير (الصورة التي تظهر بمجرد تحريك مؤشر الماوس عليها).
إذا قمت بإنشاء ورقة الرموز المتحركة باستخدام الأدوات التي ناقشناها أعلاه ، فأنت تعرف بالفعل الإزاحات المطلوبة في CSS ولكن إذا استخدمت بعض الأدوات الأخرى أو حصلت ببساطة على بعض أوراق الرموز المتحركة ، فلا تقلق ، فسنناقش طريقة سيساعدك في الحصول على تعويضات للعنصر المطلوب.
لنرى الآن طريقة بسيطة للغاية للحصول على التعويضات المطلوبة لكل رمز من الرموز الستة باستخدام MS Paint. قد لا يكون حلاً مثاليًا للعمل مع النقوش المتحركة ولكن نظرًا لأنه يحتوي على الميزة التي توفر إحداثيات مؤشر الماوس ، يمكن استخدامه للحصول على إحداثيات X و Y المطلوبة.
أولاً ، افتح صورة ورقة الرموز المتحركة (الشبكة التي تحتوي على جميع الصور الأصغر) واجعل مؤشر الماوس أعلى الزاوية اليسرى من الكائن الذي تريد التقاطه.
بمجرد حصولك على إحداثيات النقطة العلوية اليسرى للكائن الخاص بك (أعلى صورة Instagram على اليسار) ، يمكنك عرض هذا الكائن المحدد حيثما كان ذلك مطلوبًا باستخدام كود CSS:
الخلفية: url ('img_sprites.png')
موضع الخلفية: 0 0
العرض: 125 بكسل
الارتفاع: 125 بكسل
نحن نستخدم العرض والارتفاع 125 بكسل لأن أيقوناتنا بهذا البعد. لجلب الصورة التالية (Twitter) في نفس الصف نستخدم الكود التالي:
الخلفية: url ('img_sprites.png')
وضع الخلفية: -128 بكسل 0 بكسل
العرض: 125 بكسل
الارتفاع: 125 بكسل
لاحظ سمة وضع الخلفية في المقتطف أعلاه. (-128 بكسل ، 0) يعني أننا نقوم بتعويض ورقة الرموز المتحركة الخاصة بنا إلى اليسار بمقدار 128 بكسل (مع مراعاة الحشو بين العناصر) و 0 بكسل على المحور ص. إذا أردنا الوصول إلى أيقونة twitter hover ، فستكون سمة background-position الخاصة بنا:
وضع الخلفية: -128 بكسل -128 بكسل
بهذه الطريقة ، يمكننا الآن الوصول إلى كل مكون من مكونات ورقة الرموز المتحركة باستخدام CSS. لنستعرض شفرة HTML و CSS كاملة حول كيفية القيام بذلك.
الخطوة 1: كتابة كود HTML المطلوب
في الكود أدناه ، نقوم ببساطة بإضافة ثلاثة روابط. أيضًا ، سنربط HTML الخاص بنا بورقة الأنماط (screen.css).
الخطوة 2: كتابة CSS اللازمة. أولاً ، سنقوم بتصميم فئة الأيقونات المشتركة. هنا ، يمكنك أن ترى أننا نشير إلى ورقة الرموز المتحركة التي أنشأناها.
/ * فئة الأيقونة المشتركة * /
span.icon رابطو
span.icon أ: زار{
عرض:منع
المسافة البادئة النص:-9999px
الصورة الخلفية: url (./ img_sprites.png)
تكرار الخلفية:لا تكرار
}
الخطوة 3: الحصول على الرموز الفردية من ورقة الرموز المتحركة باستخدام الإزاحات.
/ * أيقونة Instagram * /
span.instagram رابطو
span.instagram أ: زار{
عرض:125 بكسل
ارتفاع:125 بكسل
خلفية الموقف:0 0
}
/ * أيقونة تويتر * /
تمتد رابطو
تمتد أ: زار{
عرض:125 بكسل
ارتفاع:125 بكسل
خلفية الموقف:-128 بكسل 0
}
/ * ايقونة الفيسبوك * /
سبان رابطو
سبان أ: زار{
عرض:125 بكسل
ارتفاع:125 بكسل
خلفية الموقف:-257 بكسل 0
كود فيبوناتشي C ++
}
الخطوة الرابعة: الحصول على رموز التمرير من ورقة الرموز المتحركة باستخدام الإزاحات.
span.instagram أ: تحوم{خلفية الموقف:0 -128 بكسل}
تمتد أ: تحوم{خلفية الموقف:-128 بكسل -128 بكسل}
سبان أ: تحوم{خلفية الموقف:-255 بكسل -128 بكسل}
الشركات التي تستخدم CSS Sprites
تستخدم العديد من الأسماء الكبيرة في الصناعة CSS Sprites لتحسين استجابة مواقع الويب الخاصة بهم. تستخدم شركات مثل Google و Facebook و Amazon هذه الطريقة على نطاق واسع حيث يساعدها ذلك على تقليل عدد طلبات HTTP لكل جلسة لمستخدم معين. هذه فائدة كبيرة عندما نأخذ في الاعتبار أن هذه الشركات تخدم ملايين العملاء في أي لحظة.
الآن بعد أن أصبحت قادرًا على معرفة ماهية النقوش المتحركة CSS وكيفية التعامل معها ، فأنت على بعد خطوة واحدة من رحلتك لتعلم CSS. تعد مفاهيم مثل العفاريت من الأمور التي تغير قواعد اللعبة في وقتنا الحاضر حيث أصبح من المهم للغاية للمطورين استخراج كل جزء من الأداء من صفحة الويب.
تحقق من الذي يأتي مع تدريب مباشر بقيادة مدرب وخبرة مشروع واقعية. يجعلك هذا التدريب بارعًا في مهارات العمل باستخدام تقنيات الويب الخلفية والأمامية. يتضمن التدريب على تطوير الويب ، jQuery ، Angular ، NodeJS ، ExpressJS ، و MongoDB.
لديك سؤال لنا؟ يرجى ذكر ذلك في قسم التعليقات في مدونة 'صور HTML' وسنعاود الاتصال بك.