لینک صفحه مثال برای این نوشته : http://cyberrabbits.net/non/css/sprite1/
یکی از راههای بهینه سازی یک صفحه وب، کم کردن تعداد درخواستهای مربوط به صفحه است. یعنی تعداد فایل های جانبی کم باشد و برای نمایش صفحه،‌بروزر نیاز به دانلود فایلهای کمتری داشته باشد.
بعد از یک بررسی ساده به کمک فایرباگ میتونید ببینید که تقریبا بیشتر از ۷۰ درصد درخواستهای سایتها مربوط به عناصری غیر از صفحه اصلی است. خوب این یه کم در مورد CSS مشکل سازه. یعنی معمولا ما تعداد زیادی از عناصر رو داریم که از تصویر پسزمینه استفاده میکنن. حالا چطور میتونیم این مشکل رو مرتفع کنیم؟ یعنی هم عناصرمون تصویر پسزمینه داشته باشن و هم اینکه تعداد فایلهای درخواستی کم بشه؟
جوب توی روشهای قدیمی برنامه نویسی دو بعدی پیدا میشه. چیزی که الان هم توی برنامه نویسی موبایل کاربرد داره و اونهم ادغام تصاویر در یک تصویر و استفاده از اون تصویر تکی.

قبل از ادامه بگم،‌این روش برای عناصری جواب گو مبتونه باشه که اندازه مشخص دارن و تصویر پسزمینه به صورت no-repeat هست. (مثلا دکمه ها،‌منو ها و…)‌در مورد تصاویری که قراره repeat-x یا y یا اصولا repeat بشن کار خاصی نمیشه انجام داد (با یه حقه میشه repeat-x و y رو هم تو این روش جا داد ولی repeat راهی نداره)
برای نمونه این تصویر رو ببینید :

این تصویریه که گوگل توی صفحه جستجوش ازش استفاده کرده. میبینید که همه آیتمهای توی صفحه جستجو یکجا تو این تصویر هست.
اول از یه مثال ساده شروع میکنم. میخوام یه لینک رو تبدیل کنم به یه دکمه و برای سه حالتش (hover – active و حالت عادی)‌سه تصویر مختلف بذارم ولی از یه فایل استفاده کنم. قبل از اینکه شروع کنم این صفحه رو ببینید، سمت چپیه حالت عادیه و سمت راستیه حالتی که همه تصاویر با هم هستن. نشانگر ماوس رو روی هر کدوم ببرید، سمت چپیه در هر حالت بازم شروع میکنه به گرفتن تصویر جدید ولی راستیه درست کار میکنه.
تصویر مورد استفاده رو ببینید :

یادداشت : این تصویر رو همینجوری توی آرشیوم پیدا کردم نمیدونم از کجا اومده ولی کار من نیست.

در حالت عادی میتونید این عکس رو سه تکه کنید، به سه اسم (توی این مثال 1.png تا فایل 3.png ) بعد این رو بنویسید توی استیل :

.normal {
	display : block;
	display : inline-block; /* CSS 2.1 New value, see post*/
	background-image : url(1.png);
	background-repeat : no-repeat;
	width : 144px;
	height : 22px;
	/**/
	text-decoration : none;
	font-size : smaller;
	text-align : center;
	color: black;
}

.normal:hover {
	background-image : url(2.png);
}

.normal:active {
	background-image : url(3.png);
}

البته قسمتهای مربوط به رنگ و سایز …. مهم نیست فقط برای اینکه یه کم ظاهرش بهتر بشه اونا رو هم اضافه کردم.(بعد از /**/) یه مساله ای هم هست درباره display ، یه بروزر در حالت کلی نباید برای عناصر inline طول و عرض در نظر بگیره. جعبه مورد استفاده این عناصر کاملا وابسته هست به متن داخلشون. عنصر a هم که این مثال رو براش نوشتم یه عنصر inline هست. برای همین اگه display رو نگذارید توی بروزر های درست و حسابی و استاندارد (یعنی تقریبا همه به غیر از IE ) کار نمیکنه. خوب پس اونو به صورت block در میاریم. اما این بلاک شدن باعث میشه که دو تا تگ کنار هم، زیر هم بیفتن. توی CSS2.1 یه مقدار جدید ایجاد شده به اسم inline-block که این مقدار، باعث میشه که عنصر جعبه خودشو داشته باشه و طول و عرض بگیره اما برای عناصر بیرونی همچنان inline باشه. از طرفی چون ممکنه بروزری باشه هنوز اینو پشتیبانی نکنه، طبق توصیه W3C ، اول مقدار block رو نوشتم و بعد دوباره inline-block رو. حالا اگه بروزر دومی رو نشناسه، از همون اولی استفاده میکنه و دومی رو در نظر نمیگیره. اگه شما این مثال رو دیدید و دو تا دکمه زیر هم بودن، یعنی بروزرتون از inline-block پشتیبانی نمیکنه وگرنه مشکلی ندارید (فایر فاکس ۳، اپرا 10 و کروم -همه لینوکس- مشکلی نداشتند)
حالا وقتی که حالتهای hover و active رو مینویسیم تنها کاری که لازمه بکنیم اینه که تصویر پسزمینه رو عوض کنیم. باقی هیچ مشکلی ندارن (البته اگه بخواید رنگ و اینجور چیزها رو عوض کنید هم میتونید ولی من با همین تغییر ساده ادامه میدم)
اما چه کار کنیم که ۳ تا تصویر بشه یکی؟ خیلی هم سخت نیست. من سه تا تصویر رو توی یک تصویر ادغام کردم که بالاتر دیدید. اسم فایل حالا all.png شده. من اینبار اینطوری مینویسم:

.sprite {
	display : block;
	display : inline-block; /* CSS 2.1 New value, see the post*/
	background-image : url(all.png);
	background-repeat : no-repeat;
	width : 144px;
	height : 22px;
	/**/
	text-decoration : none;
	font-size : smaller;
	text-align : center;
	color: black;
}

.sprite:hover {
	background-position : 0 -22px;
}

.sprite:active {
	background-position : 0 -44px;
}

اینبار عکس مورد نظرم رو گذاشتم به عنوان پسزمینه و در حالات active و hover تنها کاری که انجام دادم بالا بردن عکس به اندازه ۲۲ (در حالت hover ) و ۴۴ در حالت active بود. به منفی دقت کنید. حتما میدونید که توی سیستم مختصات کامپیوتری نقطه صفر و صفر گوشه سمت چپ و بالاست و برعکس سیستم ریاضی، محور y به سمت پایینه و به سمت بالا منفی میشه. اعداد ۲۲ و ۴۴ هم که به خاطر ارتفاع دکمه ماست که انتخاب شدن مثلا برای یه دکمه ۲۵ پیکسلی اعداد فرق میکردن. علاوه بر اون، اگه شما دکمه ها رو افقی گذاشتین کنار هم عدد صفر رو تغییر بدین که نمایانگر محور افقی میشه.

بعدا بازم مثال میزنم واسه این قضیه و این پست همچنان ادامه داره. منتها چون من فعلا منتظر اوبونتو هستم، به احتمال خیلی زیاد پست بعدی درباره اوبونتو باشه :)