Download
1 / 26
260 likes | 472 Views
Modernizr Bahram Mohammadi & Arzhang Attar shoushtari. Browser sniffing. روشی است برای شناسایی کردن Browser ها و اینکه چه Version ای آن Browser می باشد. از یکی از Property های Javascript به نام navigator.userAgent استفاده می کند. Browser sniffing. مثال:
E N D
Browser sniffing • روشی است برای شناسایی کردن Browser ها و اینکه چه Version ای • آن Browser می باشد. • از یکی از Property های Javascript به نام navigator.userAgent استفاده می کند.
Browser sniffing • مثال: • useragent header ای که توسط Browser ما ارسال می شود. • نتیجه ای که برای x داریم یه صورت زیر خواهد بود.
معایب Browser sniffing • در این صورت باید برای هر Browser قطعه کدی در نظر گرفت که باعث زیاد شدن حجم کد خواهد شد. • ممکن است شناسایی Browser اشتباه صورت گیرد.
Modernizr • برای حل این مشکلات به جای اینکه از Browser بپرسیم که اصطلاحاً • ”چه کسی است ؟“ از آن می پرسیم که ”می توانی فلان کار را انجام دهی • یا خیر ؟“ که این کار در واقع راه ساده ای برای پی بردن به ظرفیت های • Browser می باشد. • البته انجام همیشگی این کار ها به صورت دستی بسیار خسته کننده خواهد بود که برای حل این مشکل از Modernizr استفاده می کنیم.
Modernizr • Modernizrیک کتابخانه بر پایه جاوا اسکریپت می باشد. • در واقع Modernizr مرورگر بازدیدکنندگان را بررسی کرده و مشخص می کند مرورگر مورد نظر کدام دسته از ویژگی های Html5 و CSS3 را پشتیبانی می کند.
Modernizr • نکته ی مهم درباره ی Modernizr این است که این کتابخانه فقط تشخیص • می دهد که Browser چه ویژگی هایی را پشتیبانی می کند. • (Feature detection) • ولی می توان از Modernizr در فرآیند Polyfilling استفاده نمود.
Modernizr • در مرحله ی اول به html document نیاز داریم:
Modernizr • شناسایی Feature ها توسط Modernizr در Chrome 16
Modernizr • شناسایی Feature ها توسط Modernizr در IE9
Modernizr • Modernizr یک شیء به نام Modernizr می سازد که لیستی از تمام • ویژگی ها را دارا می باشد. • ما می توانیم کار Feature detection را به صورت زیر انجام دهیم:
Modernizr • مثلاً برای تست کردن Canvas داریم:
Polyfilling • مثالی که زده شد یک روش راحت برای Feature detection بود. • حال اگر بخواهیم با استفاده از Polyfill کاری کنیم که Browser ما • عملکرد بهتری داشته باشد باید از YepNope استفاده نماییم.
YepNope • yepnope یک Loader شرطی می باشد. • در واقع فقط اسکریپت هایی را Load می کند که Browser نیاز دارد. • به صورت Built-in در Modernizr وجود دارد.
Polyfilling • یکی از راه هایی که وجود دارد لینک کردن به یک JavascriptPolyfill • می باشد.
Polyfilling • مشکل رویکردی که ارائه شد این است تمامی Browser ها این اسکریپت • را دانلود می کنند. • ما می خواهیم فقط Browser هایی این اسکریپت را دانلود کنند که به صورت Native آن را پشتیبانی نمی کنند.
Polyfilling • برای حل این مشکل از تابع Load() استفاده می کنیم. • نکته ای که در رابطه با این تابع وجود دارد این است که این تابع به صورت • اتوماتیک توسعه داده نمی شود و باید خودمان آن را بسازیم.
Polyfilling • در این مثال ابتدا تست می شود که ویژگی Canvas وجود دارد یا خیر که • در صورت عدم وجود Flashcanvas را Load می کنیم.
Polyfilling • مثال:
Polyfilling • در Firefox پشتیبانی • نمی شود و به صورت زیر • نمایش داده خواهد شد.
Polyfilling • در Opera به صورت Native • پشتیبانی می شود و به صورت • زیر نمایش داده خواهد شد.
Polufilling • تفاوتی که در دانلود شدن Resource ها در دو Browser وجود دارد • به صورت زیر خواهد بود.
