سی اس اس اسپریت مفهمومی جدید نیست، بلکه استفاده ای جدید و بجا از شیوه است که برای ساخت بازی های قدیمی دوبعدی به کار می رفت. حتما تا به حال دکمه هایی فعال/غیر فعال را دیده اید که دارای دو حالت هستند، یا دکمه هایی که با رفتن اشاره گر روی آنها فرو می روند، یکی از راههای ساخت این دکمه ها در وب استفاده از تصاویر است، به این صورت که حالت عادی دکمه یک تصویر و حالت فرو رفته آن تصویری دیگر است. همانند تصویر زیر:
CSS Sprite

همانطور که گفته شد از دو تصویر برای ساخت این دکمه استفاده شده است. چیزی که در اینجا بررسی می کنیم راهی است برای ادغام این دو تصویر و تصویر های دیگر است. ادغام تصاویر مزیت هایی دارد که در زیر چند نمونه از آنها را بیان می کنیم.

  • کاهش حجم: بصورت کلی وقتی تصاویر و آیکون های مختلف ادغام و بصورت یک تصویر اسپریت در می آیند حجم فایل حاصل از مجموع حجم تصاویر اولیه کمتر می شود
  • کمک به کش شدن فایل: وقتی تصاویر مختلف را درون یک تصویر واحد ادغام می کنیم تعداد فایل های لود شده در صفحه کاهش می یابد و تنها با کش شدن همین فایل در بازدید های بعدی بدون نیاز به لود دوباره آیکون های مورد نیاز در دسترس می باشند.
  • بهتر شدن رابط کاربری: این مزیت بیشتر در ایران و با سرعت پایین اینترنت رو برو هستیم جلوه می کند. در صورتی که از اسپریت ها استفاده نکنید تصاویر هر گاه لازم باشند بارگذاری می شوند و تا بار گذاری کامل تصویری نمایش داده نمی شود. برای مثال اشاره گر را را روی دکمه زیر ببرید ، می بینید که تصویر دوم چقدر دیر لود می شود.

استفاده از اسپریت برای استفاده از اسپریت باید چه کرد؟
در ابتدا می بایست تصویری حاوی تمامی تصاویر لازم ایجاد کنید، تصویری مشابه تصویر زیر:

CSS Sprite
همانطور که می بینید در تصویر فوق دو تصویر لازم برای دکمه ما کنار هم قرار گرفته اند، استفاده از این تصویر همانند تصاویر معمولی است تنها با این تفاوت که هنگام استفاده از این نوع تصاویر باید مکان شروع نمایش را مشخص کنیم، مثال زیر همه چیز را روشن می کند. HTML ```

<strong>CSS</strong>

.btn{
display:inline-block;
width:166px;
height:68px;
background:url("http://farnabaz.ir/sites/default/files/css-sprite-4.png");
background-position: -174px 0px;
}
.btn:hover{
background-position: 0px 0px;
}

<strong>نتیجه</strong>
<style>
.btn{
    display:inline-block;
    width:166px;
    height:68px;
    background:url("http://farnabaz.ir/sites/default/files/css-sprite-4.png");
    background-position: -174px 0px;
}
.btn:hover{
    background-position: 0px 0px;
}
</style>
<div style="text-align:center">
<span class="btn"></span>
</div>
همانطور که مشاهده می کنید در دکمه بالا دیگر خبری از دیر لود شدن تصویر نیست.
مهم ترین نکته دورن `background-position` نوشته شده در کد <em>CSS</em> است، این کد باعث می شود که نکته شروع نمایش تصویر به اندازه مشخص شده تو رود، مثلا در کد `background-position: -174px 0px;` مختصات نمایش تصویر از پیکسل 176 از عرض و 0 از ارتفاع می باشد
<strong>توجه!</strong> از منفی بودن اعداد گیج نشوید، برای رسیدن به هدف ما این اعداد می بایست منفی باشند، برای درک کامل این اعداد را کم و زیاد و مثبت و منفی کنید تا متوجه شوید.

مثالی از یک کد <em>CSS</em> در قبل و بعد از استفاده از سی اس اس اسپریت
<strong>قبل</strong>

nav li a {background:none no-repeat left center}

nav li a.item1 {background-image:url('../img/image1.gif')}

nav li a:hover.item1 {background-image:url('../img/image1_over.gif')}

nav li a.item2 {background-image:url('../img/image2.gif')}

nav li a:hover.item2 {background-image:url('../img/image2_over.gif')}


<div style="text-align:center">
<img src="http://cdn.css-tricks.com/wp-content/uploads/2007/11/example1before.png" alt="CSS Sprite" />
<a href="http://css-tricks.com/examples/CSS-Sprites/Example1Before/">مشاهده نتیجه قبل از استفاده از اسپریت</a></div>


<strong>بعد</strong>

nav li a {background-image:url('../img/image_nav.gif')}

nav li a.item1 {background-position:0px 0px}

nav li a:hover.item1 {background-position:0px -72px}

nav li a.item2 {background-position:0px -143px;}

nav li a:hover.item2 {background-position:0px -215px;}

<div style="text-align:center">
<img src="http://cdn.css-tricks.com/wp-content/uploads/2007/11/example1after.png" alt="CSS Sprite" />
<a href="http://css-tricks.com/examples/CSS-Sprites/Example1After/">مشاهده نتیجه پس از استفاده از اسپریت</a></div>

به تصویر زیر توجه کنید: تصویر یک نمونه از اسپریت های شناخته شده وپرکاربر در وب است که مجموعه ای از آیکون ها را در خود دارد، در اینجا ما می خواهیم آیکون مشخص شده را با استفاده از <em>CSS</em> نمایش دهیم، فاصله آیکون از طرفین تصویر با ابزار هایی همچون فوتوشاپ بدست آمده و روی تصویر مشخص شده است، کار ساده است کافی است همانند بالا کد <em>CSS</em> بنویسیم.
<div style="text-align:center">
<img src="/files/css-sprite-icons.png" alt="سی اس اس  اسپریت" />
</div>
<strong>HTML</strong>

<strong>CSS</strong>

.plus {
display:inline-block;
width:14px;
height:14px;
background: url(http://farnabaz.ir/sites/default/files/css-sprite-icons.png);
background-position: -408px -96px;
);
}


<strong>نتیجه</strong>
<style>
.plus {
    display:inline-block;
    width:14px;
    height:14px;
    background: url(http://farnabaz.ir/sites/default/files/css-sprite-icons.png);
    background-position: -408px -96px;
);
}
</style>
<div style="text-align:center">
<span class="plus"></span>
</div>