در حال حاضر در سراسر جهان میلیون ها کاربر در حال استفاده از اینترنت هستند. هر کدام از این کاربران بر اساس نیازها و علایق خود مرورگری را برای انجام کارهای خود انتخاب کرده است. در حال حاضر ده ها مرورگر استاندارد وجود دارند که افراد می توانند از آنها استفاده کنند. همه این نرم افزارهای مرورگر باید امور خود را بر اساس استانداردهای W3C اجرا کنند، هرچند که اجرای این استانداردها برای هر کدام از مرورگرها متفاوت است. یکی از مشکلاتی که طراحان سایت با آنها مواجه هستند، رعایت استانداردهای W3C می باشد به گونه ای که وب سایت طراحی شده با تمامی مرورگرها سازگاری داشته باشد. در این مقاله سعی داریم به بررسی سازگاری یک وب سایت در طراحی و توسعه سایت بپردازیم.

ویژگی چند مرورگری چیست؟

اگر یک وب سایت از ویژگی چند مرورگری پشتیبانی کند، تقریبا در تمامی مرورگرها به همان شکل واقعی خود نمایش داده می شود. رایج ترین مرورگرهای مورد استفاده عبارتند از: گوگل کروم، فایر فاکس، اینترنتی اکسپلورر، اوپرا و نت اسکیپ. جدول زیر درصد استفاده از این مرورگرها را در سال 2015 نشان می دهد:

  • گوگل کروم 43.75%
  • فایر فاکس 18.76%
  • سافاری 9.92%
  • اینترنت اکسپلورر 11 8.27%
  • اینترنت اکسپلورر 6/7/8 6.94%
  • اینترنت اکسپلورر 10 3.83%
  • اینترنت اکسپلورر 9 3.49%
  • اوپرا 1.35%

پیاده سازی کدنویسی برای هر کدام از این مرورگرها متفاوت است. کدنویسی هایی مانند HTML، جاوا اسکریپت و CSS. برخی از کدنویسی های برای یک مرورگر می تواند با کدنویسی های مرورگر دیگری در تداخل باشد و باعث شود که نتواند به خوبی وب سایت را پردازش کند. موقعیت هنگامی بدتر می شود که متوجه می شویم می توانیم برای بهبود وضعیت استاندارد W3C هر کدام از مرورگرها، هرگونه که می خواهیم اعمال تغییرات کنیم.

سپس برای ترکیب بیشتر این کدها با یکدیگر، سیستم عامل های زیرین المان ها گرافیکی و متون وب سایت را آنگونه که هستن نمایش نمی دهند. فرض کنید با این همه کد نویسی پیچیده عامل دیگری نیز وجود دارد، آن هم این است که کاربران هر کدام از نسخه های متفاوتی از مرورگرها استفاده می کنند. جای تعجب ندارد که طراحان وب سایت همیشه سر درد دارند.

در این شرایط یک طراح وب سایت باید چه کاری انجام دهد؟

مطمئنا، سازگاری 100% یک وب سایت با تمامی مروگرها امری ممکن است. اما، می توانید وب سایت خود را به گونه ای طراحی کنید که با مرورگرهای مشهور و کاربردی سازگاری داشته باشد.

برای رسیدن به این هدف، طراح وب سایت باید سایت مورد نظر خود را به گونه ای طراحی کند که به طور کامل از استاندارد های W3C پشتیبانی کند، به این ترتیب وب سایت طراحی شده در مرورگرهای مختلف نمایش داده خواهد شد. هدف کلی از این استانداردها این است که اگر هر مرورگری یک سری قواعد کلی را رعایت کند، وب سایت شما در تمامی وب سایت ها تا 95% به همان شکل اصلی نمایش داده می شود.

این سازگاری می تواند چالش برانگیز باشد. شما می توانید برای مطمئن شدن از رعایت استانداردهای وب سایت تان به آدرس http://validator.w3c.org مراجعه نمایید. این سایت کدهای HTML، CSS و لینک های شما را تایید می کند. نکته جالب دیگر این است که این سرویس رایگان است.

همچنین شما می توانید از سرویس Doctype بر روی صفحات وب سایت خود استفاده کنید. Doctype به مرورگر می گوید که وب سایت شما از چه نسخه ای از کدهای HTML و CSS استفاده می کند.

ویراستاران کدهای HTML

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

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

بدترین انتخاب: بدترین نرم افزار انتخابی شما می تواند FrontPage باشد. نرم افزار فرانت پیج پر از ایراد در برنامه نویسی است زیرا از کدهای مایکروسافت استفاده می کند (کدهای مشابه آن در اینترنت اکسپلورر استفاده شده اند.). آیتم های فرانت پیج که در دیگر مرورگرها سازگاری ندارند عبارتند از:

Marquees – شما می توانید این آیتم را به راحتی در نسخه قبلی جاوا اسکریپت ایجاد نمایید تا با بیشتر مرورگرهای سازگاری داشته باشد.

Tags bgsound – مخصوص اینترنت اکسپلورر

Move page - مخصوص اینترنت اکسپلورر

Home style sheets - مخصوص اینترنت اکسپلورر و می تواند در مرورگرهای دیگر دچار اختلال شود و نتایج نامعلومی داشته باشد.

Home DHTML – برای ساخت آن بهتر است از جاوا اسکریپت استفاده شود تا بتواند به راحتی ویژگی چند مرورگری را دارا باشد.

Floating button – مخصوص اینترنت اکسپلورر. بهتر است که برای ایجاد آن از جاوا اسکریپت، CSS یا فلش استفاده نمایید تا همان افکت ها را در تمامی مرورگرها داشته باشید.

Other editors HTML – دیگر ویراستاران کدهای HTML بین دو نرم افزار Dreamweaver و FrontPage قرار می گیرند.

شیوه نامه های CSS

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

فلش

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

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

لینک های گرافیک

درحالیکه بسیار زیبا هستند، همانگونه که فلش بر روی دستگاه های دستی کار نمی کند، لینک های گرافیکی نیز چشمان خود را به روی مشکلات می بندند. همیشه از برچسب ها، ALT و گرافیک استفاده کنید.

قسمت بد ماجرا – حتی ممکن است کدهای تایید شده شما توسط Validator  نیز به درستی کار نکنند. بهترین راهی که طراح وب سایت می توان ویژگی چندمرورگری وب سایت خود را از طریق آن آزمایش کند، این است که وب سایت خود را بر روی تمامی مرورگرهای محبوب تست کنید.