ماذا تفعل الأداة
يجمع مولّد CSS Sprite مجموعة من الأيقونات أو الصور الصغيرة في ورقة sprite واحدة ويكتب CSS اللازم لعرض كل منها. أضف ملفات PNG أو SVG أو GIF أو JPG، واختر طريقة ترتيبها، ثم نزّل صورة الـ sprite بصيغة PNG مع ملف أنماط يحتوي على صنف لكل صورة.
تُشتق أسماء الأصناف من أسماء الملفات: يصبح Home Icon.png هو .icon-home-icon، وتحصل الأسماء المكرّرة على رقم. يستخدم تخطيط مضغوط خوارزمية bin packing لوضع صور مختلفة الأحجام على أصغر ورقة ممكنة، بينما تمنح تخطيطات عمودي وأفقي وشبكة مواضع يمكن توقّعها.
طريقة الاستخدام
- اضغط إضافة صور… واختر أيقوناتك (أو ابدأ بمجموعة المثال).
- اختر التخطيط والحشو. القليل من الحشو يمنع تداخل الأيقونات المتجاورة عندما يغيّر المتصفح حجمها.
- حدّد بادئة الصنف واسم ملف الـ sprite المستخدم في
background-image. - اختر @2x إذا كانت صورك مرسومة بضعف الحجم لشاشات retina.
- اضغط تنزيل PNG وتنزيل CSS (أو نسخ الصورة للصق الصورة المجمّعة في أداة تصميم أو محادثة)، وارفع الملفين، ثم استخدم الأصناف:
<span class="icon icon-home"></span>.
مثال
.icon {
display: inline-block;
background-image: url("sprite.png");
background-repeat: no-repeat;
}
.icon-home {
width: 32px;
height: 32px;
background-position: 0 0;
}نصائح
- اجمع الأيقونات التي تتغيّر معًا في sprite واحدة، فإعادة توليد الورقة تغيّر كل المواضع.
- للأيقونات أحادية اللون التي يجب أن يتغيّر لونها عبر CSS، قد يكون خط أيقونات SVG أو SVG مضمّن خيارًا أنسب.
الأسئلة الشائعة
› ما هو CSS sprite؟
صورة واحدة تضم صورًا صغيرة كثيرة. تُعرض كل أيقونة بجعل الـ sprite خلفية للعنصر وتحريكها باستخدام background-position، فتحتاج الصفحة إلى طلب واحد بدلًا من عشرات الطلبات.
› هل ما زالت الـ sprites مفيدة مع HTTP/2؟
أقل من ذي قبل، لكنها ما زالت مفيدة مع الأيقونات الصغيرة الكثيرة وقوالب البريد الإلكتروني والألعاب والمشاريع القديمة، كما تتجنّب ظهور الأيقونات واحدة تلو الأخرى أثناء التحميل.
› ماذا يفعل خيار @2x؟
إذا كانت صورك المصدر مرسومة بضعف حجم العرض، فإن CSS يقسم كل عرض وارتفاع وموضع على اثنين ويضيف background-size، فتبقى الأيقونات حادّة على الشاشات عالية الكثافة.
› هل تُرفع صوري؟
لا. تُرسم الـ sprite في متصفحك باستخدام canvas ويُولَّد CSS محليًا.