جاري التحميل...

صور الرش (Sprites) في CSS

Optional Advanced غطّى للتو !important — علم تجاوز نادر. هذه الجلسة موضوع اختياري مختلف: صور الرش (image sprites). ستراها في أوراق أنماط قديمة وبعض مجموعات الأيقونات الموروثة. الفكرة بسيطة: ملف صورة واحد، أيقونات كثيرة، وbackground-position يختار أي بلاطة تظهر من نافذة صغيرة.

الإجابة المباشرة

صورة الرش في CSS ورقة صورة واحدة تحفظ عدة أيقونات (أو حالات أزرار) جنباً إلى جنب. كل عنصر واجهة يحصل على عرض وارتفاع ثابتين، ونفس background-image، وbackground-position يحرّك الورقة حتى تملأ البلاطة المطلوبة الصندوق. الرش قلّل عدد الطلبات حين كان كل أيقونة ملفاً منفصلاً. للعمل الجديد فضّل أيقونات SVG أو SVG مضمّناً أو نظام أيقونات صغير — أبقِ الرش حين تصون ورقة موجودة أو يجب مطابقة تصميم قديم.

لماذا وُجدت صور الرش؟

قبل سنوات كانت كل أيقونة غالباً تعني رحلة HTTP أخرى. دمج عشرين PNG صغيرة في ورقة واحدة يعني تنزيلاً واحداً وإدخالاً واحداً في الذاكرة المؤقتة. ثم رسمت المتصفحات «نوافذ» مختلفة على تلك الورقة بـ CSS. HTTP/2 والتجميع الحديث خفّفا ذلك الألم، والأيقونات المتجهة عادة أوضح — لكن نمط الموضع ما زال معرفة مفيدة حين تفتح CSS قديماً.

القطع الثلاث

تحتاج إلى:

  1. ورقة واحدة — مثلاً icons.png ببلاطات في صف أو شبكة
  2. صندوق — width وheight يطابقان بلاطة واحدة (غالباً مع display: inline-block أو رابط كتلي)
  3. إزاحة — background-position حتى تجلس البلاطة الصحيحة تحت الصندوق
    background-repeat: no-repeat يمنع تكرار الورقة. لا تحمّل ملفاً لكل أيقونة؛ أنت تقصّ بالموضع.

البلاطة الأولى على ورقة مشتركة

تخيّل ورقة كل أيقونة فيها 32×32 بكسل. الأولى في أعلى اليسار. صندوق العنصر 32×32، والخلفية تبدأ من 0 0:

First icon tile from a shared sheet

css 
.icon {
display: inline-block;
width: 32px;
height: 32px;
background-image: url("icons.png");
background-repeat: no-repeat;
background-position: 0 0;
}

الصندوق يعمل كمنفذ عرض. يظهر فقط أعلى-يسار 32×32 من icons.png. بقية الورقة موجودة — لكنها مقصوصة بحجم العنصر.

الأيقونة الثانية: حرّك الورقة

إن بدأت الأيقونة التالية 32 بكسل إلى اليمين، حرّك الخلفية يساراً بمقدار 32 بكسل (X سالب). نفس الصورة، نفس حجم الصندوق، نافذة مختلفة:

Second icon with a horizontal offset

css 
.icon-home {
display: inline-block;
width: 32px;
height: 32px;
background-image: url("icons.png");
background-repeat: no-repeat;
background-position: 0 0;
}

.icon-search {
display: inline-block;
width: 32px;
height: 32px;
background-image: url("icons.png");
background-repeat: no-repeat;
background-position: -32px 0;
}

X السالب يسحب الورقة يساراً حتى تملأ البلاطة الثانية النافذة. صف ثانٍ من الأيقونات يغيّر أيضاً قيمة Y (مثلاً -32px -32px). قِس من ورقتك الحقيقية — لا تخمّن الإزاحات من الذاكرة.

التحويم من بلاطة أخرى

مجموعات الأزرار غالباً تضع حالتي الافتراضي والتحويم (أو النشط) على نفس الورقة. عند :hover غيّر فقط background-position:

Hover state from another sprite tile

css 
.btn-icon {
display: inline-block;
width: 40px;
height: 40px;
background-image: url("btn-sheet.png");
background-repeat: no-repeat;
background-position: 0 0;
}

.btn-icon:hover {
background-position: -40px 0;
}

لا ملف صورة ثانٍ — مجرد قصّة أخرى. أبقِ حجم الصندوق ثابتاً حتى لا يقفز عنصر التحكم.

عادات هادئة للورقة

اربط الورقة دائماً بصندوق صريح وno-repeat. سمِّ الفئات حسب الدور، لا حسب حساب البكسل وحده:

Named sprite roles and no-repeat

css 
.sprite {
display: inline-block;
background-image: url("icons.png");
background-repeat: no-repeat;
}

.sprite--mail {
width: 24px;
height: 24px;
background-position: 0 -48px;
}

.sprite--bell {
width: 24px;
height: 24px;
background-position: -24px -48px;
}

وثّق شبكة البلاطات في تعليق قصير (حجم البلاطة، ترتيب الصفوف) حتى لا يضطر المُصان التالي إلى هندسة عكسية لأرقام سحرية.

الرش قديماً مقابل الأيقونات اليوم

📊 Sprite sheets vs modern icon approaches

Approach Best when Watch out
CSS image sprite (PNG sheet) Legacy UI you must keep; one cached sheet already in the project Raster scales poorly; offsets break if the sheet changes
Inline SVG / SVG sprite Crisp UI icons at any size; easy theming with currentColor Slightly more markup or build setup
Icon font Very old stacks that already ship one Accessibility and ligature quirks; harder to theme than SVG
Separate PNG per icon Rare one-off graphics Many requests on old HTTP/1 connections
Real <img> photos Content images, galleries, product shots Not a job for background-position sprites

درسا معرض الصور والصور المتجاوبة يستخدمان <img> حقيقياً (مصغّرات flex، object-fit، srcset). الرش عادة زينة واجهة زخرفية في الخلفية — لا بديلاً لصور المحتوى ذات المعنى وalt.

فضّل الأيقونات الحديثة لواجهة جديدة

لواجهة من الصفر ابدأ بـ SVG (مضمّن أو نظام SVG صغير). تحصل على حواف أوضح وتغيير لون أبسط دون إزاحات بكسل هشة. ارجع إلى رش PNG كلاسيكي فقط حين تكون حزمة التصميم ورقة جاهزة، أو حين ترقّع CSS يعتمد عليها أصلاً.

When a sprite is the wrong tool

css 
/* Content photo — use <img>, not a sprite crop */
.hero-photo {
max-width: 100%;
height: auto;
}

/* UI chrome — sprite OK only if the sheet already exists */
.toolbar .icon-save {
width: 16px;
height: 16px;
background-image: url("legacy-toolbar.png");
background-repeat: no-repeat;
background-position: -64px 0;
}

جرّب بنفسك

  1. ارسم صفاً من ثلاث أيقونات على ورق (أو افتح رشّاً حقيقياً). سجّل عرض البلاطة (مثلاً 32px).
  2. أنشئ .icon-a مع background-position: 0 0 وصندوق مطابق.
  3. أضف .icon-b مع -32px 0 (أو إزاحة الثانية الحقيقية).
  4. أضف قاعدة تحويم تنتقل إلى بلاطة ثالثة دون تغيير العرض/الارتفاع.
  5. اكتب جملة في تعليق: لماذا ما زالت هذه الورقة موجودة (موروثة) أو لماذا ستستخدم SVG لاحقاً.

أخطاء شائعة

  • وضع صور المحتوى داخل رش وفقدان alt / الدلالة الصحيحة
  • نسيان العرض والارتفاع فيظهر الورقة كلها أو لا يقصّ نظيفاً
  • استخدام إزاحات موجبة حين قصدت سحب الورقة بالاتجاه الآخر
  • ترك background-repeat مفعّلاً فتتكرر البلاطات داخل الصندوق
  • بناء تطبيق جديد بالكامل على رش PNG افتراضياً بدل SVG
  • نسخ إزاحات من درس دون قياس ورقتك أنت

الخلاصة

  • الرش ورقة واحدة؛ background-position يختار أي بلاطة تملأ صندوقاً ثابتاً
  • تاريخياً قلّل طلبات HTTP لأيقونات صغيرة كثيرة
  • أبقِ no-repeat وأحجاماً ثابتة وأسماء أدوار؛ وثّق الشبكة
  • فضّل SVG (أو مشابهاً) للواجهات الجديدة؛ أبقِ الرش للأوراق الموروثة
  • صور المحتوى تبقى <img> حقيقية — المعرض والصور المتجاوبة مهمة مختلفة
  • Optional Advanced يتابع بعدها بـ أعمدة متعددة (multi-column)

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓
7
الأسئلة
🎯
70%
للنجاح
♾️
∞
الوقت
🔄
∞
المحاولات

📝 التعليمات

  • اقرأ كل سؤال بعناية
  • اختر أفضل إجابة لكل سؤال
  • يمكنك إعادة الاختبار عدة مرات كما تريد
  • سيتم عرض تقدمك في الأعلى
الموضوع 72 من 72
Css درس تعليمي