Modernizr

Bahram Mohammadi & Arzhang Attar shoushtari

Browser sniffing

ها و اینکه Browser روشی است برای شناسایی کردن ایVersionچه می باشد.Browser آن

به نام Javascript های Property از یکی از

navigator.userAgent.استفاده می کند

Browser sniffing

مثال:

useragent header ای که توسط Browser ما ارسال می شود.

داریم یه صورت زیر خواهد بود.x نتیجه ای که برای

Browser sniffingمعایب

هر برای باید صورت این نظر Browserدر در کدی قطعه

. شد خواهد کد حجم شدن زیاد باعث که گرفت

شناسایی است .Browserممکن گیرد صورت اشتباه

Modernizr

بپرسیم Browser برای حل این مشکالت به جای اینکه از که اصطالحاً

”چه کسی است ؟“ از آن می پرسیم که ”می توانی فالن کار را انجام دهی

یا خیر ؟“ که این کار در واقع راه ساده ای برای پی بردن به ظرفیت های

Browser.می باشد

البته انجام همیشگی این کار ها به صورت دستی بسیار خسته کننده خواهد بود که برای حل این مشکل از

Modernizr.استفاده می کنیم

Modernizr

Modernizr.یک کتابخانه بر پایه جاوا اسکریپت می باشد

مرورگر بازدیدکنندگان را بررسی Modernizr در واقع

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

Modernizr

این است که این Modernizr نکته ی مهم درباره ی کتابخانه فقط تشخیص

چه ویژگی هایی را پشتیبانی می Browser می دهد که کند.

( Feature detection)

Polyfilling در فرآیند Modernizr ولی می توان از استفاده نمود.

Modernizr

نیاز داریم:html documentدر مرحله ی اول به

Modernizr

Modernizr

Modernizr

Chrome در Modernizr ها توسط Feature شناسایی

16

Modernizr

IE9 در Modernizr ها توسط Featureشناسایی

Modernizr

Modernizr یک شیء به نام Modernizr می سازد که لیستی از تمام

ویژگی ها را دارا می باشد.

را به صورت زیر Feature detection ما می توانیم کار انجام دهیم:

Modernizr

داریم:Canvas مثالً برای تست کردن

Modernizr

Polyfilling

Feature مثالی که زده شد یک روش راحت برای

detection.بود

کاری کنیم که Polyfill حال اگر بخواهیم با استفاده از Browserما

استفاده YepNope عملکرد بهتری داشته باشد باید از نماییم.

YepNope

yepnope یک Loader.شرطی می باشد

می کند که Load در واقع فقط اسکریپت هایی را Browser.نیاز دارد

وجود دارد.Modernizr در Built-in به صورت

Polyfilling

یکی از راه هایی که وجود دارد لینک کردن به یک Javascript Polyfill

می باشد.

Polyfilling

Browser مشکل رویکردی که ارائه شد این است تمامی

ها این اسکریپت را دانلود می کنند.

هایی این اسکریپت را Browser ما می خواهیم فقط آن را پشتیبانی نمی Nativeدانلود کنند که به صورت

کنند.

Polyfilling

)( استفاده می کنیم.Load برای حل این مشکل از تابع

نکته ای که در رابطه با این تابع وجود دارد این است که این تابع به صورت

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

Polyfilling

Canvas در این مثال ابتدا تست می شود که ویژگی وجود دارد یا خیر که

می کنیم.Load را Flashcanvas در صورت عدم وجود

Polyfilling

مثال:

Polyfilling

پشتیبانیFirefox در نمی شود و به صورت زیر

نمایش داده خواهد شد.

Polyfilling

Native به صورت Opera در پشتیبانی می شود و به صورت

زیر نمایش داده خواهد شد.

Polufilling

Browser ها در دو Resource تفاوتی که در دانلود شدن وجود دارد

به صورت زیر خواهد بود.

پایان