آشنایی با تکنیک css sprite ، روش تولید و کاربردهای آن

قبلا سرعت اینترنت و تعداد کاربران آن بسیار کمتر از حال بود. همین مساله باعث شده بود که گاهی حتی یک تصویر (مثل لوگوی بالای یک سایت) را تبدیل به چند تصویر کنند تا بتوانند آن را سریعتر برای کاربران سرو کنند. (در واقع با این کار لازم نبود برای تمام قطعات از کیفیت بالا استفاده کنند و همین امر موجب کاهش حجم مجموع تصاویر تشکیل دهنده لوگو می‌شد)

اما با پیشرفت تکنولوژی و به تبع آن بسترهای سخت‌افزاری وب، سرعت ارتباط کاربران به اینترنت و تعداد آنها به شدت افزایش یافت و همین امر باعث شد که طراحان وب تغییراتی در نحوه طراحی خود اعمال کنند. از جمله این تغییرات می‌توان «کاهش تعداد درخواست‌ها برای مشاهده یک صفحه» را برشمرد که برای حفظ کیفیت سایت‌های پربازدید ضرورت دارد.

قبلا برای مشاهده یک صفحه درخواست‌هایی مانند درخواست‌های زیر معمول و متداول بود:

1. درخواست اصل سورس صفحه
2. درخواست css مربوط به کل سایت و css آن بخش از سایت و css پرینت و سایر css ها
3. درخواست هسته اصلی کدهای جاوااسکریپت (core) و فایل js مربوط به پلاگینها و کدهای اضافی
4. درخواست تصاویر موجود در صفحه
5. درخواست محتویات مبتنی بر Ajax
6. درخواست سایر اضافات خاص مثل صدا یا تصویر یا فلش و …

اما برای سایت‌های پربازدید (خصوصا وقتی با Ajax هم طراحی شده باشد) تعداد درخواست‌هایی که به سرور ارسال می‌شود آنقدر بالاست که یا سرور را دچار اختلال می‌کند یا برخی کاربران را از مشاهده کامل و سریع سایت محروم می‌کند.

برای حل این مشکل (تعداد درخواست‌ها)، css و js ها و تصاویر را با هم تلفیق می‌کنند و همچنین cache سمت کاربر را با استفاده از header ارسالی از سمت سرور، فعال می‌کنند.
من در این مطلب قصد دارم به تلفیق تصاویر اشاره کنم.

برای درک ملموس‌تر، مطلب را با یک مثال توضیح می‌دهم. زمانی که شما در گوگل عبارتی را جستجو می‌کنید، در زیر صفحه نتایج گوگل، تصویر زیر را می‌بینید:

اگر بر روی یکی از تصاویر paging نتایج کلیک راست کنید و گزینه view background image را انتخاب کنید، با تصویر زیر مواجه می‌شوید:

همانطور که در این تصویر می‌بینید، گوگل تمامی تصاویر مورد نیاز در بخش‌های مختلف (اعم از بخش جستجو، گوگل ریدر، بخش خرید گوگل و گوگل مپ و گوگل گروپ و …) را در یک تصویر گنجانده و سپس در جای مورد نیاز از هرکدام از آنها استفاده می‌کند.

به عبارت دیگر شما با ورود به گوگل این تصویر 30 کیلوبایتی برای شما یک بار لود می‌شود و روی سیستم شما cache می‌شود و دیگر نیازی نیست که برای دیدن هر صفحه از گوگل، ده‌ها درخواست به سمت سرور گوگل ارسال شود تا یک عکس کوچک بارگزاری شود.

به تکنیک فوق css sprite می‌گویند. یک مثال خوب برای استفاده از این تکنیک را در مطلب نوشتن تاریخ به صورت عمودی ارائه کرده بودم.

برای استفاده از این تکنیک، سایت‌هایی وجود دارد که به صورت آنلاین شما را کمک می‌کنند. در اینجا به چند نمونه آن اشاره می‌شود.

شما می‌توانید به سایت اسپرایتر یا csssprites بروید و تک تک آن تصاویر کوچک را در آن آپلود کنید و تصویر بزرگ (شامل همه آن تصاویر کوچک) را به همراه css مبوطه تحویل بگیرید. (اگر حوصله آپلود تک تک تصاویر کوچک را ندارید، اسپرایت جنریتور انتخاب مناسبی برای شماست چرا که اجازه می‌دهد شما فایل zip شامل همه تصاویر کوچک را یکباره آپلود کنید)

اگر هم تک تصویر بزرگ (شامل تصاویر پرکاربرد سایتتان) را آماده دارید، می‌توانید به اسپرایت باکس رفته و با استفاده از آن، محدوده هر تصویر را معین و css مربوط را تحویل بگیرید.

یافتن نام و مشخصات مرورگر بینندگان سایت شما به وسیله php و کاربردهای آن

پیدا کردن نام و مشخصات مرورگر مورد استفاده کاربران، فواید زیادی دارد که در ادامه به آن اشاره می‌کنم.

این کار به دو روش قابل انجام است:

1. با استفاده از اجرای یک کد جاوااسکریپت در سمت کاربر
2. با استفاده از header هایی که توسط مرورگر در زمان request صفحه، به سرور ارسال می‌شود

روش شماره 1 محدودیت‌های بیشتری دارد و نیاز به فعال بودن جاوااسکریپت در مرورگر کاربر و بارگزاری آن برای وی دارد. این روش بیشتر توسط آمارگیرها (مثل وبگذر و وب استت) مورد استفاده قرار می‌گیرد.

روش شماره 2 مخصوص حرفه‌ای هاست و شما اثرش را در سمت کاربر تنها در صورتی می‌توانید مشاهده کنید که سورس تولید شده برای یک صفحه معین از آن سایت را، در دو براوزر مختلف با هم مقایسه کنید تا ببینید که مثلا Google، چطور برای FireFox استایل مخصوص خودش را می‌دهد و برای Opera استایل‌های مخصوص خودش را.
پروژه browser.php یکی از قوی‌ترین کارهایی است که در این زمینه دیده‌ام.

کاربردهای عمده‌ای که می‌توانم برای آن ذکر کنم این چند مورد هستند:

• تولید css و javascript متناسب با براوزر. این کار تا حدودی موجب کاهش حجم صفحه شما می‌گردد
• تهیه آمار از نوع مرورگرهایی که بینندگان سایت شما استفاده می‌کنند
• تشخیص مشاهده سایت شما توسط موبایل

که این مورد اخیر از آن جهت مهم است که شما می‌توانید تشخیص دهید که کدام کاربر به وسیله موبایل وارد سایت شما شده است تا صفحه مخصوص موبایل به او نمایش داده شود که البته علاوه بر کد php موجود در آدرس بالا، پروژه Detect Mobile Browsers نیز برای این منظور تهیه شده که استفاده از آن راحت و آسان است.

Detect Mobile Browsers

وسط قرار دادن یک لایه

گاهی اوقات لازم است که یک DIV با عرض مشخص را وسط قرار دهید. (مثل DIV اصلی صفحه در طراحی‌هایی با عرض ثابت که محتویات صفحه در آن قرار دارد)

برای وسط قرار دادن یک لایه راه‌های متعددی وجود دارد که یکی از بهترین راه‌های این کار را در زیر می‌بینید. این روش در همه براوزرهای متداول (حتی IE6) هم قابل انجام است.

<div style="text-align:cnter">
	<div style="margin-left:auto;margin-right:auto">
		مطالب شما
	</div>
</div>

دونکته:

1. در صورتی که مارجین (حاشیه) لایه مورد نظر از بالا و پایین هم مشخص است، شما می‌توانید آن را به صورت کوتاه شده بنویسید. مثلا:
   margin:0 auto
2. با توجه به اینکه لایه بیرونی در کد فوق، باعث وسط چین شدن زیرمجموعه‌اش می‌شود، در لایه دومی بهتر است علاوه بر حاشیه، text-align نیز مقداری برابر left (برای صفحات انگلیسی) و right (برای صفحات به فارسی) داده شود.

ایجاد و حل جداول سودوکو

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

این برنامه را می‌توانید در این آدرس مشاهده کنید.

نوشتن تاریخ به صورت عمودی

یکی از محدودیت‌های زبان HTML نوشتن متون به صورت غیرافقی است. البته این قابلیت در HTML5 و مرورگرهای نوین تا حدودی حل شده اما برای اکثر کاربران قابل استفاده نیست.

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

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

1. تبدیل تاریخ به عکس. مشابه این که در اینجا استفاده شده.
2. استفاده از css sprite

که من این کار رو با استفاده از یک تصویر 1 کیلوبایتی انجام دادم:

مشاهده نمونه اجرا شده

محدود کردن تعداد رقم در یک ورودی فرم

گاهی اوقات لازم است که یک ورودی از فرم، فقط عدد باشد. آن هم عددی با تعداد رقم خاص.

«سال تولد» یکی از این موارد است که حتما لازم است یک عدد باشد و آن هم عددی 4 رقمی!

برای این منظور می‌توان از جاوااسکریپت استفاده کرد. تابع ساده زیر، برای این منظور نوشته شده:

function format(input)
{
	var num=input.value.replace(/[^\d]/g,'');
	if(num.length>4)
		num = num.substring(0,4);
	input.value=num;
}

مشاهده نسخه اجرا شده

تناسب رنگ متن و زمینه در طراحی وب

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

فرض کنید در یک صفحه، تصویری تیره به عنوان زمینه تهیه شده است و روی این تصویر تیره با رنگی روشن مثل سفید نوشته شده است. خب تا اینجا مشکلی نیست. اما حالتی را در نظر بگیرید که این تصویر برای کاربر بارگذاری نشود. (مثلا کاربر تصاویر را غیرفعال کرده باشد یا اینکه به دلیل سرعت پایینش، تصویر برایش لود نشود) حالا چه اتفاقی می‌افتد؟ تصویر تیره لود نشده و متن سفید رنگ بر روی ضمیمه سفید می‌افتد و کاربر قادر به خواندن متن نخواهد بود.

حل این مشکل چندان سخت نیست. کافی‌ست هنگام تعریف تصویر زمینه در css، رنگ پیش‌فرض زمینه را نیز معرفی کنید:

#main { background: #111 url(/image/bg.png) fixed ; }

به نامش و به یاری‌اش

حسب امر دوستان سایت 9px.ir راه‌اندازی شد.

این وبلاگ هم به درج برخی اخبار و مطالب مرتبط با طراحی وب می‌پردازد 🙂