بررسی Browser Compatibility برای کدنویسان Front-end

یک موضوعی که همیشه (یا بیشتر) برنامه نویس های Front-end رو درگیر خودش می کنه بحث هماهنگی و سازگاری با نسخه های مرورگر یا Browser Compatibility هستش. یعنی مطمئن بشید کد یا امکانی که در کدنویسی استفاده می کنید در نسخه های فعلی و Stable مرورگرهای مختلف پشتیبانی میشه و باهاش سازگاری داره یا نه که نهایتا یک قالب Cross-Browser رو تحویل بدید ؟!

بررسی Browser Compatibility
بررسی Browser Compatibility

درک بهتر Browser Compatibility با یک مثال

فرض مثال برای Layout قالب سایت می خواهید از flex-box استفاده کنید. امکان داره بعضی مرورگرها این قابلیت رو در CSS پشتیبانی نکنن و سایت شما در مرورگر خیلی از کاربران به درستی نمایش داده نشه و نتیجه خوبی برای خروجی کار شما نیست و خیلی از کاربران رو از دست میدید !!!

البته flex-box که الان خیلی جامع شده و در اکثر مرورگرها حتی تا ورژن 1 یا 2 سال پیششون پشتیبانی میشه , ولی مثلا grid های CSS تو خیلی از مرورگرها پشتیبانی نمیشن و بهتره از ابزاری که می خوام معرفی کنم برای وضعیت سازگاری این امکان در CSS مطلع بشید.

استفاده از وب سایت caniuse.com

به لینک زیر مراجعه کنید و وضعیت پشتیبانی Grid رو در مرورگرهای مختلف ببینید :

https://caniuse.com/#search=grid

همانطورکه می بینید در خروجی مشخص شده که از نسخه 52 فایرفاکس و 57 گوگل کروم و ... این قابلیت پشتیبانی شده و مشکلی وجود نداره. ولی خوب توی IE ظاهرا کامل پشتیبانی نمیشه و اگر کاربران زیادی از طرف این مرورگر دارید قطعا به مشکل می خورید !!!

در سایت www.caniuse.com شما می تونید وضعیت پشتیبانی property های CSS و تگ های مختلف HTML رو بررسی کنید ...

خوب چه کنیم ؟!

با استفاده از این وب سایت می تونید میزان ریسک استفاده از امکانات مختلف رو تشخیص بدید و متوجه باشید که باید از چه تگ های مناسب در HTML یا خصوصیات CSS استفاده کنید تا در آینده کاربران سایت شما دچار مشکل نباشد و یک خروجی کاملا Cross-Browser تحویل بدید.

بنظر من با این خروجی که از Grid دیدیم شاید بهتر باشه هنوز از flex-box استفاده کنیم و سمت Grid ها نریم تا بتونیم یک خروجی قابل ارائه رو تحویل بدیم. البته خیلی ها همچین سریع نا امید نمیشن و از روش های دیگه برای تشخیص پشتیبانی قابلیت های موجود سمت مرورگر استفاده می کنن تا بین کدهای مختلفی به اصطلاح Switch کنن و خروجی متناسب رو ارائه بدن.

نحوه Features Detecting و تشخیص پشتیبانی قابلیت های مرورگر

خیلی راحت میشه با روش هایی امکان پشتیبانی قابلیت های مختلف رو از طرف مرورگر بررسی کرد. در ادامه دو تا لینک براتون گذاشتم که خیلی خوب در مورد بررسی User-Agent یا [email protected] و روش های دیگه توضیح دادن که بتونید دقیق تر Browser Compatibility رو رعایت کنید :

1) Implementing feature detection (Mozilla)

2) Using Feature Detection to Write CSS with Cross-Browser Support (CSS Tricks)


امیدوارم مورد توجه شما قرار گرفته باشه

موفق باشید