یکی از مواردی که طراحان سایت به آن توجه ویژه ای دارند، نمایش بی نقص سایت در تمام مرورگر ها می باشد. این مفهوم در دنیای طراحی با عبارت Cross-Browser یا سازگاری سایت در مرورگر های مختلف، معرفی می شود. Cross-Browser مفهومی مهم و حیاتی در بقای یک طراح در دنیای طراحی سایت می
باشد. معنایی که کاربران بصورت غریزی (نه از جنبه دانش خود) آن را بکار
برده و نتیجه فعالیت شما را با آن می سنجند. امروزه ابزار های بسیاری به
کمک طراحان شتافته است تا سایت های هرچه شایسته تر در اختیار کاربران خود
قرار دهند.
تاریخچه Cross-Browser به سال 1990 به بعد، یعنی در زمان جنگ مرورگر ها باز می گردد. در آن سالها دو مرورگر Internet Explorer و Netscape Navigator برای نمایش سایت ها مورد استفاده قرار میگرفت که این دو برای پیشی گرفتن از یکدیگر به نرم افزار های خود قابلیت هایی که اکثرا مشابه و تنها تفاوت در برخورد مرورگرها با آنها بود، پرداختند. وجود این تفاوت ها مفهوم Cross-Browser را شکل داد.
در واقع Cross-Browser یعنی کدهای Html ، Css ، و کدهای client side در یک وب سایت بصورت یکسان در تمام مرورگر های موجود در دنیا نمایش داده شود. امروزه بزرگترین و پایه ای ترین دغدغه طراحان سایت، رسیدن به این مفهوم در طراحی وب سایت هایشان است. چرا که برای تمام افراد اعم از طراح و مشتری، صحیح نشان دادن محتویات صفحات با در نظر گرفتن اینکه کاربران می توانند از تمام مرورگر های موجود در دنیا با هر ورژنی استفاده نمایند، مهم است.
سازگار کردن سایت برای مرورگر ها، یکی از چالش های بزرگ این روزهای طراحان شده است. از این رو طراحان گاهی ناچار به استفاده از کد های پیچیده ای مابین کد های Css خود می شوند تا حفره های تفاوت بین مرورگر ها را پر نمایند. به این تکنیک کد نویسی، اصطلاحا Css Reset گفته می شود.
به مجموعه ای از Style های Css که تمامی Style های پیش فرض عناصر و تگ های Html را در مرورگرهای گوناگون به حالت پیش فرض قرار میدهد، Css Reset گویند. به کمک این روش تمامی مرورگرها بصورت پیش فرض دارای نمایش یکسان خواهند شد و طراح می تواند با در نظر گرفتن نیاز خود، مقادیر هر یک را در Css تغییر دهد. برای مثال طراح میخواهد تمامی کد های h1, h2, h3, h4, h5, h6 در سایت ها با فونت ثابت 12 پیکسل و فاقد margin و padding، نمایش داده شود. برای این منظور تنها کافیست در ابتدای Css خود، کد زیر را وارد نماید:
h1, h2, h3, h4, h5, h6{
Font-size:12px;
Margin:0;
Padding:0;
}
به این صورت تمامی تگ های H طراح در تمام مرورگر ها به حالت پیش فرض تعیین شده، نمایش داده خواهند شد و هر کجا که طراح نیاز داشته باشد، می تواند این مقادیر را تغییر دهد.
ابزارهای بررسی Cross-Browsing
ابزار IE Tester یک ابزار رایگان می باشد که به شما در نمایش سایتتان در نسخه های 5.5 ، 6، 7، 8 و 9 مرورگر Internet Explorer یاری میرساند، شما میتوانید به کمک محیط آشنای آن که از Microsoft Word 2007 الهام گرفته شده است، به راحتی سایت خود را بررسی و تفاوت ها را رفع نمایید.
به کمک این ابزار شما میتوانید تصویری از سایت خود را در مرورگرهای مختلف مشاهده و در صورت بروز تفاوت در هریک به رفع آن بپردازید. در واقع به کمک این ابزار، دیگر نیازی به نصب تک تک مرورگر ها بر روی سیستم خود نخواهید داشت.
از ویژگی های این ابزار میتوان به مرورگرهای تحت پشتیبانی آن مانند: Google Chrome ، Mozilla Firefox، ELinks ، Galeon و ... اشاره کرد. همچنین این ابزار بر روی سیستم عامل های Linux، Windows، Mac و BSD قابل نصب می باشد.
این ابزار تصاویری از وب سایت شما را در مرورگر های مختلف نمایش می دهد. البته این ابزار برای کاربران Unix قابل استفاده نمی باشد. زیرا این ابزار از سیستم عامل Unix پشتیبانی نمی کند.
Dotmobi Virtual Developer Lab
چنانچه بخواهید وب سایت خود را در انواع دستگاه ها مانند گوشی های تلفن همراه، مشاهده کنید، توصیه می شود از ابزار Dotmobi استفاده نمایید. نحوه کار این ابزار به این صورت است که از طریق Remote access به یک دستگاه واقعی remote می زند و وب سایت شما را بررسی می کند.