بررسی پشتیبانی مرورگرها در سایت caniuse.com

در دنیای طراحی و توسعه وب پشتیبانی مرورگرها یکی از موضوع هایی می باشد که همه روزه با آن سر و کار داریم.

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

جستجوی یک ویژگی

هر زمان که نیاز داریم تا پشتیبانی مرورگرها در یک مورد خاص را بررسی کنیم کافی است به سایت caniuse.com مراجعه و در قسمت مشخص شده کلمه مرتبط با ویژگی مورد نظرمان را تایپ کنیم.

سپس این ابزار جدول مربوط به پشتیبانی آن ویژگی را برای ما آماده می کند.

به عنوان نمونه فرض کنید می خواهیم در مورد پشتیبانی transform سه بعدی تحقیق کنیم.

اگر تنها واژه transform را بنویسیم چندین جدول برای ما حاضر می شود و اگر 3D transform را تایپ کنیم تنها جدول مورد نظر ما بصورت زیر آماده می شود:

وضعیت یک ویژگی

در قسمت بالا سمت چپ کنار عبارت جستجو شده برچسبی وجود دارد که در مثال ما این بر چسب WD می باشد.

این برچسب ها وضعیت یک ویژگی را در مورد بلوغ آن در کنسرسیوم وب بیان می کنند.

زمانی که یک ویژگی در کنسرسیوم وب معرفی می شود از لحظه معرفی تا زمانی که از طرف این کنسرسیوم بصورت کامل مورد تایید قرار می گیرد باید چندین مرحله را طی کند. همچنین این مراحل نشان دهنده ثبات یک ویژگی نیز هستند.

این مراحل و وضعیت ها به شرح زیر می باشند:

 

 

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

مثلا اگر کروم ویژگی transform را که در این مرحله قرار دارد پیاده سازی و پشتیبانی کند اگر هر زمان تغییراتی در مورد این ویژگی توسط W3C اعلام شود کروم باید آن تغییرات را نیز پیاده سازی کند.

2. Candidate Recommendation سندی است که نیازمندی های فنی گروه کاری W3C را برآورده می کند و بصورت گسترده ای مورد بررسی قرار گرفته است. این یعنی استاندارد مورد نظر در این مرحله به بلوغ بیشتری نسبت به مرحله WD رسیده است. هدف CR این است که به جامعه توسعه دهنده اعلام کند که بررسی های نهایی باید انجام شود و همچنین تجربیات پیاده سازی های انجام شده جمع آوری شود و موارد دیگر…

3. Proposed Recommendation سندی است که توسط مدیر W3C پذیرفته و مورد قبول قرار گرفته شده است و آماده این است که به سند مورد تایید W3C تبدیل شود. این مرحله در حالی که مرحله مهمی محسوب می شود اما معمولا استاندارد را دچار تغییرات خاصی نمی کند.

4. Recommendation بالغ ترین وضعیت یک استاندارد است. در این مرحله استاندارد، چه بصورت تئوری و چه بصورت عملی تحت آزمایش ها و بررسی های گسترده ای قرار گرفته است. استاندارد در این مرحله مورد تایید W3C قرار می گیرد.

جدول مرورگرها

هر مرورگر ستون مخصوص به خود را دارد و هر سلول از آن ستون نشان دهنده یک نسخه از مرورگر است. هر سلول می تواند یکی از سه رنگ زیر را داشته باشد:

قرمز: ویژگی مورد نظر در آن نسخه از مرورگر پشتیبانی نمی شود.

سبز: ویژگی مورد نظر در آن نسخه از مرورگر پشتیبانی می شود.

سبز کم رنگ: ویژگی مورد نظر به صورت ناقص پشتیبانی می شود.

در گوشه سمت راست بالای برخی از سلول ها یک مستطیل کوچک زرد رنگ وجود دارد:

 

 

اگر موس را بر روی این علامت ببریم به ما نشان می دهد که در نسخه مورد نظر، ویژگی باید با پیشوند مخصوص به همان مرورگر نوشته شود و الا پشتیبانی نمی شود.

در مورد ویژگی مثال ما باید در مرورگر Android برای نسخه های مشخص شده بنویسیم:

-webkit-transform: translate3d(0,0,0);

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

 

 

در تب های دیگر پایین جدول می توانیم به ترتیب:

Known issues: اگر موارد خاصی در مورد ویژگی مورد نظرمان وجود دارد مطالعه کنیم.

Resources: منابع خوبی برای مطالعه آن ویژگی در این قسمت معرفی می شوند.

Feedback: همینطور اگر سوال و نکته خاصی داریم می توانیم در این قسمت وارد کنیم.

 
اگر نکته و توضیحی در مورد شماره گذاری نسخه های یک مرورگر وجود داشته باشد بالای ستون مورد نظر یک علامت ستاره قرار می گیرد که اگر روی آن کلیک کنیم توضیح مورد نظر پدیدار می شود.

 

 

در قسمت بالا و سمت چپ جدول دکمه هایی وجود دارند که ظاهر و چیدمان جدول را تغییر می دهند:

 

 

Current aligned: حالت پیشفرض است و باعث می شود تا نسخه های فعلی تمام مرورگرها در یک ردیف تراز شوند و پس زمینه آن ردیف با رنگ قهوه ای پر می شود.

Usage relative: اگر این گزینه فعال شود نسخه های مختلف با توجه به درصدی که کاربران از آن ها استفاده می کنند ارتفاع می گیرند.

 

 

در زمان نوشتن این مطلب 11.3 درصد از کاربران دنیا از نسخه 54 مرورگر کروم استفاده می کنند و ارتفاع مشخص شده برای آن سلول مربوط به این آمار می باشد.

Date relative: این گزینه نسخه ها را بر اساس تاریخ انتشارشان نمایش می دهد.

Show all: و در نهایت اگر در هر حالتی بخواهیم تمام نسخه های مرورگرها را مشاهده کنیم می توانیم این گزینه را انتخاب کنیم.

اطلاعات جغرافیایی

در اولین جستجویی که برای یک ویژگی انجام می دهیم این سوال از ما پرسیده می شود که آیا می خواهیم اطلاعات مربوط به کشورمان را هم وارد کنیم؟

 

 

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

به عنوان نمونه سمت راست و بالای جدول در مثال ما بصورت زیر است:

 

 

92.71% کاربران در سراسر دنیا از مرورگرهایی استفاده می کنند که ویژگی transform از نوع سه بعدی را پشتیبانی می کنند. که در این میان %4.33 کاربران از مرورگرهایی استفاده می کنند که این ویژگی را بصورت ناقص و بقیه بصورت کامل پشتیبانی می کنند.

همچنین %79.4 کاربران از مرورگرهایی استفاده می کنند که در آنها نیازی به نوشتن پیشوند برای این ویژگی نمی باشد.

و چون ما اطلاعات کشورمان را نیز وارد کردیم در نتیجه در پایین اطلاعات سراسری، اطلاعات مربوط به کشور هم به همین صورت نمایش داده می شود.

تنظیمات داده ها

اگر گزینه Settings را انتخاب کنیم در سمت چپ پنلی باز می شود که کمک می کند تا اطلاعات را بصورتی که مایلیم نمایش دهیم.

Source: فیلتر کردن اطلاعات جدول بر اساس نقطه جغرافیایی

Min. browser usage: حداقل درصد استفاده از نسخه های پیشین برای ظاهر شدن در جدول. یعنی اگر مقدار این گزینه را برابر با 10 درصد قرار دهیم غیر از نسخه فعلی مرورگرها فقط نسخه هایی نمایش داده می شود که بیشتر از 10 درصد کاربران از آنها استفاده می کنند.

From geography: اضافه کردن اطلاعات از کشورهای دیگر

From Google Analytics: اگر سایتی دارید می توانید اطلاعات مربوط به Google Analytics سایت خود را در دسترس این سرویس قرار دهید تا ویژگی ها را بر اساس نیاز کاربرانتان محک بزنید.

به عنوان نمونه اگر اطلاعات مربوط به سایت css-tricks.ir را وارد کنیم و سپس به دنبال ویژگی flexbox بگردیم. جدول زیر نمایش داده می شود و به همین راحتی ما متوجه می شویم که می توانیم از ماژول فلکس باکس در سایت بدون نگرانی استفاده کنیم.

 

 

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

مقایسه مرورگرها

اگر نیاز داریم که نسخه هایی خاص از مرورگرهای مختلف را با هم مقایسه کنیم کافی است از بالای صفحه گزینه Compare browsers را انتخاب کنیم.

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

استفاده از caniuse در سایت

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

<iframe src="http://caniuse.com/transforms3d/embed/"></iframe>

همچنین اگر به دنبال ظاهر زیباتر و قابل کنترل می گردید می توانید از این سرویس استفاده کنیم.

مشارکت

اگر ویژگی خاصی مد نظر دارید که در این سایت وجود ندارد می توانید در این آدرس به آن ویژگی رای بدهید یا اگر کسی آن را بیان نکرده این موضوع را مشخص کنید.

همچنین اگر در مورد ویژگی خاصی تحقیقاتی را بر روی مرورگرهای مختلف انجام داده اید می توانید بصورت توضیح داده شده در این مطلب آن را ثبت کنید.