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

کدام مرورگرها؟!
وجود مرورگرها و وسیله های مختلف، باعث شده که این روزها بیش از پیش نگران این باشیم که قالب طراحی شده مان در این مرورگرها و وسیله ها چطور دیده میشه. بغیر از این، افزایش رزولوشن در مانیتورها ی جدید و واید شدن آنها نیز از جمله مسائلی هست که نمیتوان به سادگی از آن عبور کرد.
در مرحله ی اول، قالب سایت شما باید در مرورگرهایی مثل اینترنت اکسپلورر 6 و 7 (و ترجیحا 8)، فایرفاکس و اُپرا که از مرورگرهای پرمصرف هستند، یک شکل و یکسان نمایش داده شود. پس قالب خود را حتما در این مرورگرها تست کنید.
البته اگر به سیستم های عامل دیگری به جز ویندوز دسترسی دارید (مانند مک و لینوکس) بد نیست که قالب سایت خود را در مرورگرهای سافاری و کنکرر نیز تست نمایید. (لازم به ذکر است که سافاری، بر روی ویندوز هم قابل نصب است!)
البته با وجود ناسازگاری هایی که مرورگرهایی مثل IE (خصوصا نسخه ی 6 آن) دارند کمی یکسان سازی مشکل میشود. اما نگران نباشید، هک ها و ترفندهایی وجود دارند که با استفاده از آن ها میتوان بسیاری از این مشکلات را برطرف نمود! (در این راستا، این مقاله را نیز به شما توصیه میکنم!).

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

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

گام دوم: از کدنویسی کثیف و درهم بپرهیزید!
یادتان باشد که هرگاه به دستوری احتیاج بود، آن را بنویسید، در غیر این صورت لزومی ندارد که از دستورات تکراری و بی مورد استفاده کنید! به مثال زیر توجه کنید:

.content {
Padding: 5px;
Margin: 10px;
Padding-right: 8px;
Font: bold 130% Arial, Times New Roman;
Text-align: right;
Direction: rtl;
Font-size: 18px;
}

میبینید چقدر کثیف و غلط کدنویسی شده؟! متاسفانه این دستورات رو از لا به لای پرونده ی سی اس اس یکی از سایت های معروف فارسی پیدا کردم و قصدم از این کار این بود که خیال نکنید چنین چیزی وجود خارجی نداره و من در آوردی هست!!
شکل صحیح مثال بالا:

.content {
Padding: 5px 8px 5px 5px;
Margin: 10px;
Font: bold 120% Arial, Times New Roman;
Text-align: right;
Direction: rtl;
}

کثیف نوشتن، اول از همه باعث سنگین شدن پرونده ی سی اس اس میشود و بعد از آن بسیاری از مشکلات و ناسازگاری ها را ایجاد میکند.

گام سوم: جایگزینی قسمتی از پرونده ی سی اس اس، در صورت مواجه شدن با مرورگری خواص!
همونطور که گفتم و میدانید، برخی جلوه ها و دستورات در IE پشتیبانی نمیشوند و آن ها را بدرستی نمایش نمی دهد! در اینگونه مواقع شما میتوانید با استفاده از برخی ترفندهای ایجاد شده، قسمتی از پرونده ی سی اس اس خو را پنهان، اضافه و یا جایگزین کنید!
درباره ی این مورد در آینده بیشتر صحبت میکنیم!

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