CSS Sprites
CSS sprite چیست؟
ترفندی برای کاهش حجم ، و زمان بارگذاری صفحه.
مرورگر برای بارگذاری هر کدام از اجزای صفحه (مانند تصاویر ، فایل های CSS و جاوا اسکریپت و…) یک درخواست (Request) به سرور ارسال میکند تا سرور ، فایل درخواستی را برای مرورگر بفرستد. ارسال هر Request و دریافت پاسخ آن ، بخشی از زمان بارگذاری صفحه است.
هرچه تعداد 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;}
به همین سادگی میتونیم زمان بارگذاری صفحه رو کمتر کنیم icon smile CSS Sprites
امیدوارم این مقاله‌م به دردتون بخوره:
آموزش استفاده از CSS Sprite در طراحی وب
