CSS sprite چیست

زمان انتشار: شنبه ۲۷ آبان ۱۳۹۶

CSS sprite با عنوان CSS Image Sprites در سایت W3schoolsمعرفی میشود. این سایت در تعریف Css sprite می نویسد.

CSS Image Sprites: یک مجموع عکس میباشد، که درون یک عکس ذخیره شده اند.

برای ساده تر کردن این تعریف مثالی بزنیم : فرض کنید که سه عکس از سه ایکن در اختیار دارید، میتوانید این سه عکس را در یک عکس کنار هم گنجانده و با توجه به محل قرارگیری این عکس تنها آیکون مد نظر را به نمایش بگذارید.

در CSSدستوری از CSS1داریم که در CSS3نیز با امکانات جدید بروز رسانی شد. این دستور backgroundاست. در این آموزش ما تنها صفت urlاین دستور را بررسی میکنیم. صفت urlمسئول پذرفتن مقدار برای آدرس عکس پس زمینه یک تگ در HTMLاست.

در صورتی که تنها بخواهید تصویری را به پس زمینه یک تگ اضافه کنید، میتوانید از دستور background-imageنیز استفاده کنید. این دستور تنها ویژگی های مربوط به تصویر را بخود میگیرد.

به کد های زیر نگاه کنید:

#home {
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
}

این کدها در فایل HTML به این صورت نوشته میشوند:

<style>

#home {

width: 46px;

height: 44px;

background: url(img_navsprites.gif) 0 0;

}

#next {

width: 43px;

height: 44px;

background: url(img_navsprites.gif) -91px 0;

}

</style>

</head>

<body>

میتوان بجای تگ IMG از تگهای دیگر HTML نیز برای نمایش عکس پس زمینه استفاده کرد. برخی از تگها مانند تگ span برای نمایش پس زمینه کاربرد ندارند، ولی بسیاری از تگها مانند تگ P یا Div میتوانند بجای تگ imgعکس پس زمینه را بخود بگیرند.

در کد های بالا برای نمایش صحیح تصویر پس زمینه، اندازه یکی از ایکون ها را بصورت طول و عرض در CSS مشخص کرده ایم.

در قسمت background: url(img_navsprites.gif) 0 0; از ویژگی تایپ چند صفت در یک خط استفاده شده است و علاوه بر مشخص کردن آدرس پس زمنیه مکان آن از چپ (صفر پیکسل) و از بالا (صفر پیکسل) را نیز مشخص می کند.

امکان تعیین موقعیت پس زمینه کمک کرده است، تا کاربران بتوانند چند عکس را در یک عکس قرار داده و در هر مکان عکس دلخواه را به نمایش بگذارند.

چرا باید از CSS sprite استفاده کرد

مزیت روش CSS sprite در کاهش تعداد ارسال درخواست به سرور است. برای بارگذاری هر عکس در سایت یک درخواست برای آدرس آن عکس به سرور ارسال میشود و استفاده از CSS sprite تعداد این درخواست ها را به حداقل می رساند. تعداد درخواست های زیاد از سرور، در زمانیکه مشکلات اینترنتی و یا مشکل در پایداری خود سرور وجود داشته باشد، موجب بروز تجربه کاربری منفی خواهد شد.

نمونه ای از استفاده از چند صفت در یک خط کد

body {
background: #ffffff url("img_tree.png") no-repeat right top;
}

در کدهای بالا ویژگی های background-color ،background-image ، background-repeat،background-attachment ،background-position.در یک خط کد استفاده شده است.

مطالب بیشتر برای علاقه مندان به مطالعه بیشتر در باره CSS sprite:

نکته : در سایت های بسیاری ذکر شده است که حجم عکس ها در حالت استفاده از CSS sprite کمتر از حالتی است که عکس ها بصورت جداگانه ذخیره شده باشند. این موضوع ممکن است همیشه صادق نباشد. توجه به اینکه عکس های بدون پس زمینه را با پسوند gif ذخیره کنید و نه با پسوند png و استفاده از فشرده سازی مناسب برای فرمت JPG ، برای کم کردن حجم یک تصویر ترکیبی بسیار مهم است.

ایجاد دکمه های انتقال به کمک CSS sprite

ما تصویر را دانلود و با نام img_navsprites.gif ذخیره کرده ایم. از این تصویر میتوان برای ایجاد یک لیست انتقال بین صفحات استفاده کرد. دلیل اینکه ما از لیست برای انجام این تمرین استفاده میکنیم، امکان استفاده از لینک و پس زمینه بصورت همزمان در لیست ها میباشد.

کد های ما عبارتند از :

#navlist {
position: relative;
}

#navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}

#navlist li, #navlist a {
height: 44px;
display: block;
}

#home {
left: 0px;
width: 46px;
background: url('img_navsprites.gif') 0 0;
}

#prev {
left: 63px;
width: 43px;
background: url('img_navsprites.gif') -47px 0;
}

#next {
left: 129px;
width: 43px;
background: url('img_navsprites.gif') -91px 0;
}

کدلیست ما در HTML به این صورت است:

</ul>

توضیح استایل های داده شده :

#navlist {position:relative;} : دو نوع صفت position در CSS وجود دارد، relative که به صفت دیگر یعنی absolute امکان میدهد، که موقعیت مکانی خود را بر اساس مکان تگ دارای صفت relative تنظیم کند.

#navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} :در این قسمت برای لیست پدینگ و مارجین تعیین شده و استایل لیست حذف شده است. همانطور که مشاهده می کنید مکان لیست بصورت absolute مشخص شده است.

#navlist li, #navlist a {height:44px;display:block;} : ارتفاع تمام عکس ها را 44 پیکسل تعیین میکند.

#home {left:0px;width:46px;} : مکان تگ دارای ID=home را مشخص می کند. عرض تصاویر در این قسمت 46 پیکسل در نظر گرفته شده است.

#home {background:url(img_navsprites.gif) 0 0;} : همانطور که در ابتدای مقاله اشاره کردیم این کد ترکییبی از، صفت مکان، و عکس پس زمینه را برای ایجاد امکان سوییچ کردن، به قسمت های مختلف یک عکس استفاده میکند.

#prev {left:63px;width:43px;} : مکان و عرض تگ دارای id= prev را تعیین می کند.

#prev {background:url('img_navsprites.gif') -47px 0;} : عدد 47 برای فاصله این عکس از جمع عرض 46 پیکسل در id=”home” و یک پیکسل برای خط جدا کننده است.

#next {left:129px;width:43px;} : مکان را با جمع مکان های قبلی و مقداری مکان اضافه تعیین کرده است.

#next {background:url('img_navsprites.gif') -91px 0;} : فاصله عکس را 91 پیکسل تعیین می کند که از جمع 46 پیکسل عرض Home با یک پیکسل جدا کننده و 43 پیکسل برای id=” prev” و یک پیسل دیگر برای جدا کننده این قسمت است.

استفاده از CSS sprite برای تغییر عکس هنگام هاور کردن

لیست ها مانند بیشتر تگ ها در html امکان استفاده از ویژگی :Hover را دارند. ما عکسی حاوی ایکون های اصلی و ایکن ها در حالت هاور را در یک عکس، آماده کرده ایم.

با توجه به اینکه این عکس یک پارچه است و 6 عکس جدا گانه در کنار هم نیست، هنگام هاور کردن موس روی عکس، نیازی به بارگذاری عکس جدیدی روی سایت نیست. که این موضوع یکی از دلایل افزایش سرعت در روش Css Sprite است. با سه خط کد زیر میتوان، به این عکس ها افکت هاور اضافه کرد:

#home a:hover {
background: url('img_navsprites_hover.gif') 0 -45px;
}

#prev a:hover {
background: url('img_navsprites_hover.gif') -47px -45px;
}

#next a:hover {
background: url('img_navsprites_hover.gif') -91px -45px;
}

این کد ها در واقع مکان عکس را در هنگام هاور 45 پیکسل پایین تر میبرند تا عکس زیرین در هنگام هاور موس به نمایش در بیاید.

نحوه استفاده از CSS sprite در Sass

Sass نرم افزار متن باز و رایگانی است که به کاربران امکان میدهد، تا بتوانند با کد های برنامه نویسی فایلهای CSS را ایجاد کنند. نرم افزار Sass بدلیل افزایش سرعت کد نویسی در بین طراحان دنیا از اهمیت بالایی برخوردار گشته است. برای آنکه بتوانید CSS sprite را در برنامه Sass بکار ببرید از دستورات زیر استفاده کنید:

@import 'sprite'; // the generated style file (sprite.scss)

// camera icon (camera.png in src directory)

.icon-camera {

@include sprite($camera);

}

// cart icon (cart.png in src directory)

.icon-cart {

@include sprite($cart);

}

یک مثال دیگر :

@import 'sprite' // the generated style file (sprite.sass)

// camera icon (camera.png in src directory)

.icon-camera

+sprite($camera)

// cart icon (cart.png in src directory)

.icon-cart

+sprite($cart)

اجرای CSS sprite در پلتفرم Less

Less پلتفرمی است که مانند Sass به کاربران امکان میدهد که برای تولید فایل Css از کد نویسی استفاده کنند. هدف تولید این پلتفرم کم کردن میزان کد نویسی در CSS بوده است. میتوان در پلتفرم Less از ویژگی Css Sprite استفاده کرد. برای این منظور کد زیر را بکار ببرید:

@import 'sprite'; // the generated style file (sprite.less)

// camera icon (camera.png in src directory)

.icon-camera {

.sprite(@camera);

}

// cart icon (cart.png in src directory)

.icon-cart {

.sprite(@cart);

}

اگر به یادگیری پلتفرم Less علاقه مند شده اید سایت http://lesscss.org/3.x/ آموزش های خوبی برای نسخه جدید این پلتفرم ارائه داده است.

استفاده از CSS sprite در زبان stylus

در زبان stylus شما امکان استفاده از تمام ویژگی های CSS را در کنار قابلیت های کد نویسی و تعریف متغییر را دارند که این موضوع باعث شده است که زبان stylus به رقیبی سر سخت برای پلتفرم های Sass و less باشد. اگر بخواهیم در زبان stylus از CSS sprite استفاده کنیم، میتوانیم از دستورات زیر استفاده کنیم:

@import 'sprite' // the generated style file (sprite.styl)

// camera icon (camera.png in src directory)

.icon-camera

sprite($camera)

// cart icon (cart.png in src directory)

.icon-cart

sprite($cart)

نتیجه گیری

Css sprite روش کاربردی برای کاهش ارسال درخواست به سرور و افزایش سرعت سایت است، که با تعیین طول و عرض و مکان به یک تصویر بکگراند، امکان استفاده از یک عکس برای تولید چندین پس زمینه مختلف را میدهد. Css Sprite برای ایکون ها و تصاویر کوچک طراحی شده است و استفاده از آن در تصاویر بزرگ میتواند تمام مزیت هایی که برای Css Sprite ذکر کرده ایم، را از بین ببرد و در نهایت سرعت بارگذاری سایت را افزایش دهد.

ثبت سفارش