سازگاری صفحات وب با مرورگرهای مختلف
سازگاری صفحات وب با مرورگرهای صفحات وب یا همان Cross browsers compatibility یکی از مفاهیم اساسی در طراحی صفحات وب می‌باشد که در این نوشته از وبسایت آرنیکاوب به مسائل مختلفی درباره‌ی این مفهوم می‌پردازیم.
حتما تا به حال برایتان پیش آمده است که به هنگام وارد شدن به یک وبسایت، چنین پیغام‌هایی را مشاهده کنید:
• برای ثبت نام در این سایت، حتما از مرورگر اینترنت اکسپلورر استفاده کنید.
• برای مشاهده‌ی بهتر سایت ما، بهتر است از مرورگر فایرفاکس استفاده کنید.
مرورگرهای مختلف
همانطوری که می‌دانید، مرورگرهای مختلفی برای باز کردن و مشاهده‌ی صفحات وب در اینترنت وجود دارد که از آن جمله می‌توان به اینترنت اکسپلورر (Internet Explorer، مرورگر پیش فرض در سیستم عامل ویندوز)، فایرفاکس (Firefox)، اپرا(Opera)، گوگل کروم(Google Chrome)، سافاری (Safari، مرورگر پیش فرض در سیستم عامل مکینتاش) و … اشاره کرد.
علت اصلی تفاوت عملکرد مرورگرهای مختلف با صفحات وب یکسان
حقیقت این است که کنسرسیوم جهانی وب یکسری استانداردها را برای طراحی صفحات وب تعریف کرده است. بنابراین در صورتی که تمام مرورگرهای صفحات وب از این استانداردها استفاده کرده و آن‌ها را رعایت نمایند، نباید هیچ مشکلی در نمایش و عملکرد صفحات وب یکسان در مرورگرهای مختلف وجود داشته باشد.
اما مشکل از آنجا آغاز می‌شود که متاسفانه برخی از مرورگرها یکسری از استانداردها را رعایت نمی‌کنند که البته در راس تمام آن‌ها مرورگر بسیار ضعیف اینترنت اکسپلورر می‌باشد (Internet Explorer -> IE). از آن جا که متاسفانه این مرورگر به صورت پیش فرض در سیستم عامل ویندوز نصب شده است، باعث می‌شود تا مشکلات بسیار زیادی را برای طراحان صفحات وب ایجاد کند. حتی در میان مرورگرهای مختلف، بعضا مشاهده می‌شود که صفحات وب در نسخه‌های مختلف مرورگرها به صورت‌های گوناگون نمایش داده می‌شوند. در حقیقت این مسئله باعث می‌شود که نتوان از بسیاری از تکنیک‌ها و ترفندهای زیباسازی صفحات وب را به خاطر عدم سازگاری مرورگرهای اینترنت اکسپلور بهره برد.
این مسئله تا حدی جدی است که بسیاری از متخصصین و نامداران جهانی در زمینه‌ی طراحی وب، در کتاب‌ها و مقالات خودشان، مرورگر اینترنت اکسپلور را به باد تند انتقاد گرفته و شدیدا از آن شکایت می‌کنند. بنابراین به یاد داشته باشید که هرگاه مشاهده می‌کنید که یک وبسایت جز با مرورگر اینترنت اکسپلور درست کار نمی‌کند، آن را به حساب برتر بودن و بهتر بودن مرورگر اینترنت اکسپلور نگذارید. بلکه آن را به حساب نقص دانش و مهارت‌های طراحان آن وبسایت بگذارید که از متدهای غیر استاندارد استفاده کرده‌اند.
حتما بخوانید : طراحی ریسپانسیو(واکنش‌گرا) چیست و چگونه سایت ریسپانسیو طراحی کنیم؟
چگونه صفحات وب سازگار با مرورگرهای مختلف داشته باشیم
یک طراح وب ماهر و با تجربه، با استفاده از تجربیات و مطالعاتی که داشته است باید طوری طراحی صفحات وب را انجام بدهد که بیشترین سازگاری را با مرورگرهای مختلف (حتی اینترنت اکسپلورر) داشته باشد. البته این بدان معنا نیست که دیگر طراحان وب نمی‌توانند از ویژگی‌های جدید و افکت‌های مدرن طراحی وب استفاده کنند، بلکه باید سعی کنند تا با استفاده از تعیین شرط ها و مسائلی از این قبیل بیشترین سازگاری را در صفحات وب خودشان داشته باشند. همچنین لازم نیست که تمام قسمت ها به صورت کاملا یکسان نمایش داده شود، بلکه منظور ما از سازگاری با مرورگرهای مختلف این است که تفاوت و ایراد اساسی‌ای به هنگام باز کردن صفحات وب توسط مرورگرهای مختلف به چشم نخورد.
چند نکته برای طراحی سایت سازگار با کلیه مرورگرها
با استفاده از نکاتی که در ادامه مطلب بیان میکنیم، می‌توانید به این اطمینان دست یابید که سازگاری صفحات وب با مرورگرهای مختلف ایجاد شده است. اگر به عنوان طراح سایت فعالیت می‌کنید، با پیاده سازی این نکات قادر خواهید بود صفحات سازگار با انواع مرورگرها را طراحی کنید.
سایت خود را ساده نگه دارید
همواره این نکته را به یاد داشته باشید که کیفیت مهم‌تر از کمیت است! بنابراین سعی کنید سایت خود را در ساده‌ترین حالت ممکن طراحی کنید. منظور از ساده نگه داشتن سایت را در ادامه در قالب چند نکته ذکر خواهیم کرد:
- از به کار بردن هدر، ستون و فوتر به تعداد زیاد بپرهیزید.
- استفاده از ساید بار به تعداد زیاد می‌تواند برای وبسایت خطرناک باشد!
- از عناصر تو در تو استفاده نکنید.
- از یک جدول و یا گروهی از عناصر P استفاده نکنید.
- تمامی قالب بندی‌ها باید با استفاده از CSS باشد.
- از کدنویسی بیهوده و اضافی دوری کنید.
به طور کلی کدهای ساده علاوه بر اینکه در اکثر مرورگرها به راحتی به نمایش درمی‌آیند، در صورت بروز مشکل راحت‌تر عیب یابی می‌شوند.
تایید اعتبار کدها
برای کاهش امکان بروز مشکل، قبل از آپلود سایت، کدهای HTML و CSS را تایید اعتبار کنید. کدهای معتبر سبب کارکرد صحیح سایت شما در اکثر مرورگرها خواهد شد. شما می‌توانید برای اطمینان از بدون خطا بودن کدهای خود از HTML Validator W3C و CSS Validator استفاده کنید. همچنین بدین منظور پلاگین‌هایی مانند HTML Validator Firefox موجود هستند که برای چک کردن صفحات به کار می‌روند.
استفاده از قوانین بازنشاندن CSS
مقادیر مختلف مانند ارتفاع، طول، عرض و… که به صورت پیش فرض در نظر گرفته شده‌اند، در مرورگرهای مختلف اندکی تفاوت دارند. این مقادیر بر روی سایت تاثیرگذار هستند؛ به همین دلیل سبب ایجاد مشکل در اجرای صحیح وبسایت می‌شوند. برای جلوگیری از بروز مشکل، می‌توان در ابتدای فایل CSS تعدادی قوانین را بازنشانی کنید.
توسعه در فایرفاکس
پیشنهاد میکنیم به منظور بهبود عملکرد سایت خود، ابتدا آن را در فایرفاکس تست نمایید. پس از آن می‌توانید به سراغ تست سایت در کروم و اینترنت اکسپلورر و… بروید. دلیل این پیشنهاد این است که فایرفاکس یک مرورگر توسعه دهنده است و به صورت تقریبی می‌توان گفت که با تمام استانداردها سازگار است. اگر وبسایت شما در این مرورگر به درستی اجرا شود، به احتمال زیاد در سایر مرورگرها نیز به درستی به نمایش در می‌آید.
علاوه بر آنچه که گفته شد، رعایت نکات زیر نیز در سازگاری صفحات وب با مرورگرهای مختلف موثر است:
- تست وبسایت در همه مرورگرها
- تلاش در انجام کدنویسی به صورت دستی تا حد امکان
- استفاده از فریم ورک
- نظرات شرطی
- به کارگیری ابزارهای تست سازگاری
10 ابزار مفید برای تست سازگاری وبسایت با مرورگرهای مختلف
لیست پایین مهم‌ترین ابزارهای بررسی سازگاری سایت در مرورگرهای مختلف(cross-browser compatibility) می‌باشد.
- TestComplete
- BrowserShots
- Lambda Test
- Browsera
- IE NetRenderer
- Turbo Browsers Sandbox
- QA Wolf
- CrossBrowserTesting
جمع بندی
حتما برای شما هم پیش آمده است که در هنگام ورود به سایتی از شما خواسته شود تا از مرورگری خاص استفاده نمایید! به دلیل عدم سازگاری وبسایت با برخی مرورگرها، اینگونه سایت‌ها تنها در بعضی مرورگرها به درستی اجرا می‌شوند. برای اینکه بتوانید یک سایت سازگار داشته باشید، باید در حین طراحی به نکاتی توجه داشته باشید که چند مورد از آن‌ها را در این مطلب بررسی کردیم.
ضمنا پیشنهادی که در این زمینه داریم این است که طراحی وبسایت خود را بدست متخصصان سپرده و همچنین از قالب‌های آماده و رایگان موجود در اینترنت استفاده نکنید.
