در جلسه قبل از آموزش CSS با انواع media در CSS آشنا شدید. در این بخش قصد داریم شما را با تکنیک CSS Sprite آشنا کنیم.
تکنیک CSS Sprite یک راه برای کاهش تعداد درخواست های HTTP برای تصویر, با ترکیب تصاویر در یک فایل است.
تکنیک CSS Sprite چیست
Sprite ها تصاویر دوبعدی ای هستند که با ترکیب عکس های کوچک در یک عکس بزرگ ساخته می شوند و در مختصات X,Y تعریف می شوند.
برای نمایش یک تصویر از تصویر ترکیب شده, ما از ویژگی background-position در CSS استفاده می کنیم, که موقعیت دقیق تصویری که باید نمایش داده شود را تعریف می کند.
مزایای تکنیک CSS Sprite
یک صفحه وب دارای تصاویر زیاد, بخصوص تصاویر کوچک زیاد, مثل آیکون ها, دکمه ها و غیره.., می توانید زمان زیادی را برای لود کردن و ساخت درخواست های چندگانه به سرور بطلبد.
با تکنیک CSS Sprite و استفاده از یک تصویر به جای تصاویر جداگانه, بطور قابل ملاحظه ای تعداد درخواست های HTTP که مرورگر به سرور ارسال می کند کم می شود, که بسیار در زمان لود صفحه و در کل عملکرد سایت تاثیرگذار است.
از تکنیک CSS Sprite قبلا سایت دیجی کالا استفاده می کرد که جدیدا آن را با تصاویر SVG جایگزین کرده است.
با تست سرعت وب سایت خود با ابزارهای آنلاین مثل gtmetrix می توانید تعداد درخواست های HTTP سایت خود را مشاهده و آن را اوکی کنید.
نکته: کاهش تعداد درخواست های HTTP تاثیر بزرگی روی زمان پاسخ سررور می گذارد که باعث می شود که صفحه وب سریعتر به کاربر نمایش داده شود.
هنگامی که اشاره گر ماوس را روی آیکون های مرورگر بدون sprite برای اول بار می برید, تصویر بعد از کمی تاخیر نمایش داده می شود,
به این دلیل که تصویر با هاور شدن از سمت سرور لود می شود, که خب عادی است و تصاویر هاور شده دو تصویر جداگانه هستد.
در نسخه استنفاده شده از تکنیک CSS Sprite , همه تصاویر در یک تصویر ترکیب شدند و تصویری که هاور می کنیم بلافاصله نمایش داده می شود.
با استفاده از تکنیک CSS Sprite در مثال [EXAMPLE – B] ;ما قادر به کاهش درخواست های HTTP به تعداد ۹ و حجم کل فایل تصاویر به ۳۸٫۲KB شدیم
در مقایسه با مثال [EXAMPLE – A] ; این یک ارتقای خیلی بزرگ برای یک مثال کوچک شد. تصور کنید که برای یک وب سایت کامل چه کاری می تواند انجام دهد.
کل فرایند ساخت این مثال در بخش زیر توضیح داده شده است.
ساخت تصاویر Sprite
با ترکیب ۱۰ تصویر جداگانه در یک تصویر, عکس sprite خود را ایجاد کردیم.(mySprite.png)
شما می توانید sprite خود را با ابزارهایی مثل فتوشاپ بسازید.
نکته: برای ساده سازی, ما از آیکون های کوچک و با سایز یکسان بهره بردیم و هر دو را برای محاسبات ساده در کنار همدیگر قرار دادیم.
نمایش یک آیکون از تصویر Sprite
نهایتا, با ساخت CSS , می توانیم بخشی از تصویر را که نیاز داریم نمایش بدیم.
اول از همه, یک کلاس .sprite برای جاهایی که قصد لود تصویر داریم می سازیم. این کار جلوی تکرار را می گیرد, چراکه همه آیتم ها یک background-image یکسان را خواهند داشت.
|
1 2 3 |
.sprite { background: url("images/mySprite.png") no-repeat; } |
حالا, باید یک کلاس برای هر یک از آیتم هایی که قصد نمایش داریم بسازیم. مثلا برای نمایش آیکون اینترنت اکسپلورر با تکنیک CSS Sprite کد زیر را خواهیم داشت:
|
1 2 3 4 5 6 |
.ie { width: 50px; /* Icon width */ height: 50px; /* Icon height */ display: inline-block; /* Display icon as inline block */ background-position: 0 -200px; /* Icon background position in sprite */ } |
حالا سوالی که وجود دارد این است که به چه صورت مقادیر پیکسل را برای background-position مشخص کردیم؟
خب اولی مقدار موقعیت افقی و دومین موقعیت عمودی پس زمینه است.
از آنجا که گوشه بالا-چپ آیکون اکسپلورر با حاشیه سمت چپ در تماس است پس آن فاصله افقی از نقطه شروع است و مقدار اولی را ۰ قرار دادیم
از آنجا که آیکون در ۵مین موقعیت قرار داد پس فاصله عمودی از نقطه شروع تصویر برابر با ۴ * ۵۰پیکسل = ۲۰۰پیکسل اس چون ارتفاع آیکون ۵۰px است.
برای نمایش آیکون اینترنت اکسپلورر, نیاز است که گوشه چپ-بالای آن را به نقطه شروع منتقل کنیم.
همچنین از آنجاکه این آیکون در فاصله عمودی ۲۰۰px است, ما نیاز به شیفت زدن کل background-image بصورت عمودی به بالا به اندازه ۲۰۰px داریم که چون به بالا می رویم باید مقدار منفی باشد به این دلیل که مقدار مثبت آن را به پایین منتقل می کند.
امیدوارم در این بخش آموزش CSS, از تکنیک CSS Sprite نهایت استفاده را برده باشید.
در بخش بعدی با ویژگی opacity در CSS آشنا می شویم.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید.
