CSS Sprites
533 روز پیش
پويا صادقى , آموزش CSS
هرچه تعداد Request ها کمتر باشد ، زمان بارگذاری صفحه کمتر می شود. به جای چند فایل CSS بهتره از یک فایل استفاده کنیم. به جای چند فایل JS میتونیم از یک فایل استفاده کنیم ؛ میتونیم تصاویری که به عنوان بکگراند المنت ها در صفحه استفاده میکنیم را در یک تصویر قرار بدیم.
در این صفحه از 6 آیکون ، یک گرادینت و 2 عکس برای دکمه استفاده شده (یک تصویر برای حالت عادی و یک تصویر برای زمانی که موس روی آن حرکت میکند.)
در حالت عادی ، با استفاده از تگ <img> یا در بکگراند المنت ها این تصاویر رو در صفحه قرار میدهیم.
مرورگر برای بارگذاری 10 فایل، 10 Request ارسال میکند. اگر این 10تصویر در یک تصویر قرار بگیرند، مرورگر برای بارگذاری صفحه، 9 درخواست کمتر ارسال می کند و تمام تصاویر با بارگذاری یک فایل در قسمتهای مختلف صفحه قرار می گیرند.
با این کار هم حجم عکس ها کمتر میشه، و هم تعداد Request ها:
برای استفاده از تصویر sprite ، آن را به عنوان بکگراند المنت مورد نظر قرار می دهیم:
.my_div{background:url(sprite.png) width:155px; height:40px;}
طول و عرض div مشخص شده، پس تصویر بکگراند فقط تا 155 پیکسل از سمت چپ و 40 پیکسل از بالا دیده میشه:
حالا اگه بخوایم برای المنت بعدی از این بکگراند استفاده کنیم ،
.title{background:url(sprite.png);
font-family:Constantia; font-weight:bold; font-style:italic; font-size:44px;text-shadow:1px 1px 0 #eee;
color:#FF9900; padding:0 0 9px 20px;}
باز هم همون تصویر بالایی دیده میشه:
حالا باید مکان بکگراند رو جابجا کنیم:
.title{background:url(sprite.png) 0px -105px;
font-family:Constantia; font-weight:bold; font-style:italic; font-size:44px;text-shadow:1px 1px 0 #eee;
color:#FF9900; padding:0 0 9px 20px;}
از نظر افقی ، با صفر پیکسل بکگراند ثابته ولی از نظر عمودی 105 پیکسل منفی (به سمت بالا) جابجا شده. 105 پیکسل به سمت بالا جابجا شده تا به گرادینت برسه:
با همین جابجایی ها به قسمت های مختلف تصویر میرسیم.
مثلا برای رسیدن به آیکون ضربدر:
.icon6{background:url(sprite.png) -92px -84px;
width:18px; height:20px;}
به همین سادگی میتونیم زمان بارگذاری صفحه رو کمتر کنیم 
