ساخت CSS برای مرورگرهای مختلف
۴ پاسخ
خرداد ۸م, ۱۳۸۹
طراحان وب سایت معمولا در هنگام تبدیل کردن یک قالب گرافیکی به کد HTML و CSS در مرورگرهای مختلف به مشکلهای زیادی بر می خورند. این مشکلها معمولا در مرورگر اینترنت اکسپلور 6 به دلیل قدیمی بودن آن بیشتر دیده می شود. برای رفع این ایرادها راههای زیادی وجود دارد که از جمله میتوان به استفاده از CSS Hacks اشاره کرد.
چند وقت پیش تو یکی از کامنت دوستان درخواست شده بود که برای ساخت منوی dropdown فارسی من توضیحاتی رو بدم. برای ساخت منوی dropdown فارسی به دلیل نیاز به ویژگی RTL ممکن است کمی به مشکل بر بخوریم. من سعی میکنم در این پست روش ساده و کارآمدی رو آموزش بدم که تو بیشتر مرورگرها به درستی نمایش داده میشه و شما می تونید با کمی تغییر اون رو به شکل دلخواه خود درآورید.
قبل از شروع اولین مطلب سال جدید، آرزوی بهترینها رو برای همه دوستان و خوانندگان وبلاگم در سال جدید دارم. امیدوارم این سال برای همه سال خوب و پر از موفقیت باشه.
طراحان و کدنویسان چه تازه کار باشند چه حرفه ای همیشه ممکن هست که در نوشتن کد دچار اشتباه بشوند، این اشتباهات ممکن است یه خاطر عدم تمرین کردن و یادگیری اصولی از ابتدا باشد، یا اینکه هنگام نوشتن عجله در کار باشد. در این پست قصد معرفی رایج ترین اشتباهات در هنگام نوشتن کد HTML و CSS را داریم.
شاید برایتان بارها پیش اومده که موقع طراحی و برنامه نویسی وب سایت دنبال کدی بودید یا اینکه طرز استفاده تگی از HTML را فراموش کردید و یا نحوه نوشتن یک کد CSS یادتان رفته باشد. این مسایل برای هر برنامه نویس و طراحی در طول کار پیش می آید. خب دسترسی داشتن به اینترنت تقریبا این مشکل هارو حل میکنه اما ممکنه که اینترنت هم نداشته باشید !
در پستهای قبلی روش اول و دوم این کار را توضیح دادم. اما روشهای قبل به دلیل اینکه باید در برنامه های ویرایش تصویری هر بار برای خود یک تصویر درست میکردید و آنرا ذخیره میکردید و سپس در CSS آنرا استفاده می کردید برای سایتهایی که تایتلهای زیادی دارند خیلی کار وقت گیر و خسته کننده ای خواهد بود. مخصوصا سایتهایی که دارای CMS هستند این کار غیر ممکن است. اما اگر شما برنامه ای داشته باشید که به صورت اتوماتیک این تایتل ها را برای شما بسازد بسیار عالی خواهد بود، نام این روش sIFR هست.
در پست قبلی روش اول جایگزین کردن Heading ها یا به عبارت بهتر Image Replacement را گفتم. اما روش قبل دارای معایبی هم می باشد. این معایب عبارتند از :
- اگر تصویر به دلایلی بارگذاری نشود، کاربر Heading را مشاهده نمی کند.
همونطور که میدونید متن در وب سایت مهمترین بخش در ساختار یک وب سایت است. کاربران برای دیدن تنها تصاویر به وب سایتها مراجعه نمی کنند، آنها به دنبال دستیابی به اطلاعات مورد نیاز خود هستند و این اطلاعات در اکثر مواقع به صورت متن است.
چند وقت پیش به مقاله ای بسیار عالی تو Smashing Magazine برخوردم و حیفم اومد که برای شما ترجمه نکنم. این مقاله راجع به کارهایی است که بهتره شما اونهارو قبل از اینکه وب سایت خودتون رو که طراحی و برنامه نویسیش تموم شده و قصد آپلود کردنشو دارید انجام بدید. اینها نکات خیلی ریزی هستن که معمولا فراموش میشن، بهتره از این به بعد در مورد اونها دقت بیشتری بکنیم.
یکی از کارهایی که میتوان توسط CSS انجام داد ساخت Rollover Images است، که در این روش تنها و تنها از CSS استفاده میشود. برای این کار شما باید در یک تصویر هم حالت Normal و هم حالت Over را قرار دهید، بدین ترتیب شما با استفاده از قابلیت Background Position میتوان این افکت را ایجاد کرد. در این آموزش من نحوه ساخت یک Navigation را توسط این تکنیک به شما آموزش میدم. اگر با نحوه ساخت Navigation با CSS آشنایی ندارید میتونید در این آموزش یاد بگیرید.