modernizr bahram mohammadi arzhang attar shoushtari n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Modernizr Bahram Mohammadi & Arzhang Attar shoushtari PowerPoint Presentation
Download Presentation
Modernizr Bahram Mohammadi & Arzhang Attar shoushtari

Loading in 2 Seconds...

play fullscreen
1 / 26

Modernizr Bahram Mohammadi & Arzhang Attar shoushtari - PowerPoint PPT Presentation


  • 192 Views
  • Uploaded on

Modernizr Bahram Mohammadi & Arzhang Attar shoushtari. Browser sniffing. روشی است برای شناسایی کردن Browser ها و اینکه چه Version ای آن Browser می باشد. از یکی از Property های Javascript به نام navigator.userAgent استفاده می کند. Browser sniffing. مثال:

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Modernizr Bahram Mohammadi & Arzhang Attar shoushtari' - howe


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
browser sniffing
Browser sniffing
  • روشی است برای شناسایی کردن Browser ها و اینکه چه Version ای
  • آن Browser می باشد.
  • از یکی از Property های Javascript به نام navigator.userAgent استفاده می کند.
browser sniffing1
Browser sniffing
  • مثال:
  • useragent header ای که توسط Browser ما ارسال می شود.
  • نتیجه ای که برای x داریم یه صورت زیر خواهد بود.
browser sniffing2
معایب Browser sniffing
  • در این صورت باید برای هر Browser قطعه کدی در نظر گرفت که باعث زیاد شدن حجم کد خواهد شد.
  • ممکن است شناسایی Browser اشتباه صورت گیرد.
modernizr
Modernizr
  • برای حل این مشکلات به جای اینکه از Browser بپرسیم که اصطلاحاً
  • ”چه کسی است ؟“ از آن می پرسیم که ”می توانی فلان کار را انجام دهی
  • یا خیر ؟“ که این کار در واقع راه ساده ای برای پی بردن به ظرفیت های
  • Browser می باشد.
  • البته انجام همیشگی این کار ها به صورت دستی بسیار خسته کننده خواهد بود که برای حل این مشکل از Modernizr استفاده می کنیم.
modernizr1
Modernizr
  • Modernizrیک کتابخانه بر پایه جاوا اسکریپت می باشد.
  • در واقع Modernizr مرورگر بازدیدکنندگان را بررسی کرده و مشخص می کند مرورگر مورد نظر کدام دسته از  ویژگی های Html5 و CSS3 را پشتیبانی می کند.
modernizr2
Modernizr
  • نکته ی مهم درباره ی Modernizr این است که این کتابخانه فقط تشخیص
  • می دهد که Browser چه ویژگی هایی را پشتیبانی می کند.
  • (Feature detection)
  • ولی می توان از Modernizr در فرآیند Polyfilling استفاده نمود.
modernizr3
Modernizr
  • در مرحله ی اول به html document نیاز داریم:
modernizr6
Modernizr
  • شناسایی Feature ها توسط Modernizr در Chrome 16
modernizr7
Modernizr
  • شناسایی Feature ها توسط Modernizr در IE9
modernizr8
Modernizr
  • Modernizr یک شیء به نام Modernizr می سازد که لیستی از تمام
  • ویژگی ها را دارا می باشد.
  • ما می توانیم کار Feature detection را به صورت زیر انجام دهیم:
modernizr9
Modernizr
  • مثلاً برای تست کردن Canvas داریم:
polyfilling
Polyfilling
  • مثالی که زده شد یک روش راحت برای Feature detection بود.
  • حال اگر بخواهیم با استفاده از Polyfill کاری کنیم که Browser ما
  • عملکرد بهتری داشته باشد باید از YepNope استفاده نماییم.
yepnope
YepNope
  • yepnope یک Loader شرطی می باشد.
  • در واقع فقط اسکریپت هایی را Load می کند که Browser نیاز دارد.
  • به صورت Built-in در Modernizr وجود دارد.
polyfilling1
Polyfilling
  • یکی از راه هایی که وجود دارد لینک کردن به یک JavascriptPolyfill
  • می باشد.
polyfilling2
Polyfilling
  • مشکل رویکردی که ارائه شد این است تمامی Browser ها این اسکریپت
  • را دانلود می کنند.
  • ما می خواهیم فقط Browser هایی این اسکریپت را دانلود کنند که به صورت Native آن را پشتیبانی نمی کنند.
polyfilling3
Polyfilling
  • برای حل این مشکل از تابع Load() استفاده می کنیم.
  • نکته ای که در رابطه با این تابع وجود دارد این است که این تابع به صورت
  • اتوماتیک توسعه داده نمی شود و باید خودمان آن را بسازیم.
polyfilling4
Polyfilling
  • در این مثال ابتدا تست می شود که ویژگی Canvas وجود دارد یا خیر که
  • در صورت عدم وجود Flashcanvas را Load می کنیم.
polyfilling5
Polyfilling
  • مثال:
polyfilling6
Polyfilling
  • در Firefox پشتیبانی
  • نمی شود و به صورت زیر
  • نمایش داده خواهد شد.
polyfilling7
Polyfilling
  • در Opera به صورت Native
  • پشتیبانی می شود و به صورت
  • زیر نمایش داده خواهد شد.
polufilling
Polufilling
  • تفاوتی که در دانلود شدن Resource ها در دو Browser وجود دارد
  • به صورت زیر خواهد بود.