در حال بارگذاری...

اسپرایت تصویر در CSS

Optional Advanced تازه !important را دیدید — پرچم override نادر. این جلسه موضوع دیگری است: اسپرایت تصویر. در استایل‌شیت‌های قدیمی و بعضی مجموعه‌آیکن‌های legacy هنوز می‌بینیدش. ایده ساده است: یک فایل تصویر، چند آیکن؛ با background-position مشخص می‌کنید کدام تکه از پنجرهٔ کوچک دیده شود.

جواب مستقیم

اسپرایت تصویر در CSS یعنی یک شیت که چند آیکن (یا حالت دکمه) را کنار هم نگه می‌دارد. هر عنصر UI یک عرض و ارتفاع ثابت می‌گیرد، همان background-image را دارد، و با background-position شیت جابه‌جا می‌شود تا تکهٔ درست داخل جعبه بنشیند. وقتی هر آیکن یک درخواست HTTP جدا بود، اسپرایت کمک می‌کرد. برای کار تازه معمولاً آیکن SVG، SVG درون‌خطی، یا یک سیستم آیکن کوچک بهتر است — اسپرایت را وقتی نگه دارید که شیت از قبل هست یا باید با طراحی قدیمی یکی بمانید.

اصلاً چرا اسپرایت آمد؟

سال‌ها پیش هر آیکن اغلب یعنی یک رفت‌وبرگشت HTTP دیگر. بیست PNG ریز را در یک شیت جمع کردن یعنی یک دانلود و یک کش. بعد مرورگر با CSS پنجره‌های مختلف روی همان شیت می‌گذاشت. HTTP/2 و باندل امروزی آن درد را کم کرد؛ آیکن برداری هم معمولاً تیزتر است — ولی الگوی جابه‌جایی هنوز سواد مفیدی است وقتی CSS قدیمی باز می‌کنید.

سه قطعه

به این‌ها نیاز دارید:

  1. یک شیت — مثلاً icons.png با تکه‌ها در ردیف یا شبکه
  2. یک جعبه — width و height هم‌اندازهٔ یک تکه (اغلب با inline-block یا لینک بلوکی)
  3. یک آفست — background-position تا تکهٔ درست زیر جعبه بیاید
    background-repeat: no-repeat جلوی تکرار شیت را می‌گیرد. فایل جدا برای هر آیکن نمی‌آورید؛ دارید با موقعیت برش می‌زنید.

تکهٔ اول روی شیت مشترک

فرض کنید هر آیکن ۳۲×۳۲ پیکسل است و اولی بالا-چپ نشسته. جعبه هم ۳۲×۳۲ است و پس‌زمینه از 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;
}

جعبه مثل ویوپورت عمل می‌کند. فقط ۳۲×۳۲ بالا-چپ icons.png دیده می‌شود. بقیهٔ شیت هست — فقط با اندازهٔ عنصر بریده شده.

آیکن دوم: شیت را بکشید

اگر آیکن بعدی ۳۲ پیکسل به راست شروع شده، پس‌زمینه را ۳۲ پیکسل به چپ ببرید (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). از شیت واقعی اندازه بگیرید — آفست را از حفظ حدس نزنید.

هاور از تکهٔ دیگر

مجموعه‌دکمه‌ها اغلب حالت عادی و هاور (یا active) را روی همان شیت می‌گذارند. روی :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> واقعی کار می‌کنند (انگشت‌شست فلکس، object-fit، srcset). اسپرایت معمولاً کروم تزئینی UI در پس‌زمینه است — جایگزین عکس محتوا با alt معنی‌دار نیست.

برای UI تازه، آیکن مدرن را ترجیح بدهید

اگر رابط از صفر است، با 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. روی کاغذ یک ردیف سه‌آیکنی بکشید (یا یک اسپرایت واقعی باز کنید). عرض تکه را بنویسید (مثلاً ۳۲px).
  2. .icon-a بسازید با background-position: 0 0 و جعبهٔ هم‌اندازه.
  3. .icon-b با -32px 0 (یا آفست واقعی دومی) اضافه کنید.
  4. قانون هاوری بنویسید که به تکهٔ سوم برود بدون عوض کردن عرض/ارتفاع.
  5. در یک توضیح یک جمله بنویسید: چرا این شیت هنوز هست (legacy) یا دفعهٔ بعد چرا SVG می‌گذارید.

اشتباه‌های رایج

  • گذاشتن عکس محتوا داخل اسپرایت و از دست دادن alt / معنای درست
  • فراموش کردن عرض و ارتفاع تا کل شیت دیده شود یا برش تمیز نماند
  • آفست مثبت وقتی باید شیت را برعکس بکشید
  • روشن ماندن background-repeat تا تکه‌ها داخل جعبه تکرار شوند
  • ساخت اپ تازه روی اسپرایت PNG به‌جای SVG به‌عنوان پیش‌فرض
  • کپی آفست از آموزش بدون اندازه گرفتن از شیت خودتان

خلاصه

  • اسپرایت یک شیت است؛ background-position می‌گوید کدام تکه جعبهٔ ثابت را پر کند
  • تاریخی برای کم کردن درخواست HTTP آیکن‌های ریز بود
  • no-repeat، اندازهٔ پایدار، نقش‌نام‌گذاری؛ شبکه را مستند کنید
  • برای UI تازه SVG (یا مشابه) را ترجیح بدهید؛ اسپرایت برای شیت‌های قدیمی
  • عکس محتوا <img> واقعی می‌ماند — گالری و تصاویر واکنش‌گرا کار دیگری‌اند
  • Optional Advanced بعدی: چندستونه (multi-column)

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓
7
سوالات
🎯
70%
برای قبولی
♾️
∞
زمان
🔄
∞
تلاش‌ها

📝 دستورالعمل‌ها

  • هر سوال را با دقت بخوانید
  • بهترین پاسخ را برای هر سوال انتخاب کنید
  • می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
  • پیشرفت شما در بالا نمایش داده می‌شود
موضوع 72 از 72
Css آموزش