تکنیکی بسیار کارامد در css

تکنیکی بسیار کارامد در cssReviewed by امیر نیکنامی on Oct 15Rating: 4.5تکنیکی در سی اس سا

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

1

فرض کنید می خواهیم برای المانی از صفحه ایکون home را نمایش دهیم برای اینکار ابتدا باید موقعیت تصویر را از سمت چپ تا نقطه شروع تصویر و سپس از  بالای تصویر تا نقطه سروع ان مشخص کنیم. برای اینکه مطلب بهتر روشن شود موقعیت دو تصویر از سمت چپ را تعین می کنیم .

برای تصویر اول از سمت چپ باید ۰ پیکسل و از بالا نیز باید ۰ پیکسل حرکت کنیم تا به تصویر برسیم و سپس بوسیله width و height ان اندازه از تصویر که باید در صفحه نمایش یابد را مشخص می کنیم . حال مقادیر لازم را برای ایکون اول مشاهده می کنید

 

۰ و ۰ موقعیت عکس در تصویر کلی و ۴۶ و ۴۴ مقدار طول و عرضی است که از ان تقطه در صفحه باید نمایش داده شود .

حال این مقادیر را برای  ایکون دوم از سمت چپ  مشخص می کنیم .

 

یعنی مرورگر ابتدا به اندازه ۸۷ پیکسل از سمت چپ حرکت کرده سپس به اندازه ۴۳ پیکسل در ۴۴ پیکسل از ان تصویر را نمایش می دهد.

حال سوالی که مطرح می شود این است که چگونه این مقادیر را مشخص کنیم.تکنیک سی اس اس اسپریت تکنیک مشکلی است که حتی توسعه دهندگان وب حرفه ای نیز برای کار با ان گاهی دچار مشکل می شوند. اگر به اینترنت دسترسی نداشته باشید یا باید بوسیله نرم افزار هایی مانند فوتوشاپ یا بوسیله سعی و خطا باید این مقادیر را بدست اورید اما اگر به اینترنت دسترسی دارید سایت های مختلفی هستند که با سرچ css sprites می توانید انها را پیدا کنید . این سایتها با گرفتن تصویر کلی از شما مقادیر مورد نیاز برای ایکون های مختلف را برای شما محاسبه می کنند . مانند سایت :

http://www.spritecow.com/

هم اکنون با پیشرفت وب به جای استفاده از تصاویر کتابخانه های مختلفی مانند بوت استرپ وجود دارد که ایکون های مورد نیاز در توسعه وب را بدون استفاده از تصویر و فقط با کد ترسیم می کنند اما در هر حال هنوز هم این تکنیک در توسعه وب بسیار کار بردی است.