یادداشتهای بیت نیمسوز

لینک صفحه مثال برای این نوشته : http://cyberrabbits.net/non/css/sprite1/
یکی از راههای بهینه سازی یک صفحه وب، کم کردن تعداد درخواستهای مربوط به صفحه است. یعنی تعداد فایل های جانبی کم باشد و برای نمایش صفحه،‌بروزر نیاز به دانلود فایلهای کمتری داشته باشد.
بعد از یک بررسی ساده به کمک فایرباگ میتونید ببینید که تقریبا بیشتر از ۷۰ درصد درخواستهای سایتها مربوط به عناصری غیر از صفحه اصلی است. خوب این یه کم در مورد CSS مشکل سازه. یعنی معمولا ما تعداد زیادی از عناصر رو داریم که از تصویر پسزمینه استفاده میکنن. حالا چطور میتونیم این مشکل رو مرتفع کنیم؟ یعنی هم عناصرمون تصویر پسزمینه داشته باشن و هم اینکه تعداد فایلهای درخواستی کم بشه؟
جوب توی روشهای قدیمی برنامه نویسی دو بعدی پیدا میشه. چیزی که الان هم توی برنامه نویسی موبایل کاربرد داره و اونهم ادغام تصاویر در یک تصویر و استفاده از اون تصویر تکی.

قبل از ادامه بگم،‌این روش برای عناصری جواب گو مبتونه باشه که اندازه مشخص دارن و تصویر پسزمینه به صورت no-repeat هست. (مثلا دکمه ها،‌منو ها و…)‌در مورد تصاویری که قراره repeat-x یا y یا اصولا repeat بشن کار خاصی نمیشه انجام داد (با یه حقه میشه repeat-x و y رو هم تو این روش جا داد ولی repeat راهی نداره)
برای نمونه این تصویر رو ببینید :

این تصویریه که گوگل توی صفحه جستجوش ازش استفاده کرده. میبینید که همه آیتمهای توی صفحه جستجو یکجا تو این تصویر هست.
اول از یه مثال ساده شروع میکنم. میخوام یه لینک رو تبدیل کنم به یه دکمه و برای سه حالتش (hover – active و حالت عادی)‌سه تصویر مختلف بذارم ولی از یه فایل استفاده کنم. قبل از اینکه شروع کنم این صفحه رو ببینید، سمت چپیه حالت عادیه و سمت راستیه حالتی که همه تصاویر با هم هستن. نشانگر ماوس رو روی هر کدوم ببرید، سمت چپیه در هر حالت بازم شروع میکنه به گرفتن تصویر جدید ولی راستیه درست کار میکنه.
تصویر مورد استفاده رو ببینید :

یادداشت : این تصویر رو همینجوری توی آرشیوم پیدا کردم نمیدونم از کجا اومده ولی کار من نیست.
خواندن ادامه این مطلب »

اول اینکه بیتا چند روزی هست که مریضه و اصلا حس نوشتن ندارم. این بود که یه کم فاصله افتاد بین این نوشته و نوشته قبلی
دوم اینکه،‌منتظرم تا چند روز دیگه Ubuntu رو بگیرم، نسخه ۱۰.۰۴ که پنجشنبه میاد (۹ اردیبهشت)‌
سوم اینکه همین جوری رفتم برای گرفتن رفرنس CSS3 و دیدم که CSS2 هم بعد از ۱۰ سال یه اصلاحیه خورده (‌سپتامبر ۲۰۰۹ )‌اونم گرفتم، و بعد یه تبدیلش کردم به یه نسخه قابل استفاده در DevHelp (با ایجاد کردن یه فایل ایندکس و کلی دردسر، البته اگه RegEx در دسترس نبود :) ) این فایل رو که یه کم هم دستکاری شده همین جا میذارم تا کسانی که میخوان دانلود کنن، فقط یادتون باشه یه فایل CSS بود که از سایت W3C بارگزاری میشد که من اونو هم تو این اضافه کردم و فایلها رو دستکاری کردم که اون فایل CSS رو از لوکال باز کنن، که شاید بعضی ها دوست نداشته باشن. اگه مشکلی با این مساله داشتید خود فایل اصلی رو از W3C بگیرید و فقط یه فایل css21.devhelp تو این هست اونو توی فولدرش کپی کنید بعد کل فولدر رو توی

~/.local/share/devhelp/books

کپی کنید یا اینکه فولدر رو اونجا لینک کنید. فقط یادتون باشه اسم فولدر css21 باشه یا اینکه اسم فایل css21.devhelp رو عوض کنید با اسم پوشه ای که میسازید. همین و تمام.
طبیعیه که DevHelp باید نصب باشه.
همین :)‌ فقط اینو نوشتم که یادم نره وبلاگ هم هست و گرنه مطلب اصلیمو چند وقته دارم آماده میکنم ولی هنوز تموم نشده با این مریضی بیتا :((

اینها رو ببینید، میخوام یه توضیح مختصر بدم درباره اینا :

خواندن ادامه این مطلب »

همیشه توضیح اینکه چطوری میشه که همه بروزرها یه سایت رو به یه شکل نشون ندن و همه اونها سایت رو یک دست نشون بدن عذاب آور بوده. در حقیقت من میخوام اینبار یه کم درباره این قضیه که اصولا بهش Reset CSS هم میگن توضیح بدم. یه سری مسایل دیگه هم هست که در مورد CSS میتونه کمک کنه، البته این مسایل شاید یه کم قدیمی باشن برای حرفه ای ها ولی قبلا هم تو یه کامنت، در جواب یه کامنت دیگه گفتم، اگه حرفه ای نیست و اصلا بدرد نمیخوره میتونید راحت چشمتونو ببندید و یه سایت دیگه رو باز کنید که حرفه ای تره :D.

اینکه هر بروزری یه تفسیری از استاندارد داره خودش به اندازه کافی بد هست. اما اینکه هر بروزر یه چیزی رو بعنوان پیشفرض در نظر میگیره دیگه قابل چشمپوشی نیست. مثلا اگه یه عنصر margin نداشته باشه، یعنی صریحا براش یه مقدار تو سی اس اس استفاده نشده باشه اونوقت چی؟ همینو در باره border یا padding در نظر بگیرید. یا مثلا تگهایی مثل abbr یا del و امثال اینها، پیشفرضشون چیه؟ تگهای منطقی چی؟ strong تو طراحی هر کسی میتونه یه معنی داشته باشه، البته اینکه تقریبا همه بروزرها strong رو به عنوان بولد تتفسیر میکنن چیزی رو عوض نمیکنه،‌strong, em یا همه این تگها منطقی هستن و طرز تلقی شما از اونها مهمه.
اینجاست که Reset کردن سی اس اس بداد میرسه. این قسمت رو در نظر بگیرید :
خواندن ادامه این مطلب »