Presentation is loading. Please wait.

Presentation is loading. Please wait.

Modernize Your Old Browser to Support HTML 5 Svetlin Nakov Telerik Software Academy academy.telerik.com Senior Technical Trainer www.Nakov.com.

Similar presentations


Presentation on theme: "Modernize Your Old Browser to Support HTML 5 Svetlin Nakov Telerik Software Academy academy.telerik.com Senior Technical Trainer www.Nakov.com."— Presentation transcript:

1 Modernize Your Old Browser to Support HTML 5 Svetlin Nakov Telerik Software Academy academy.telerik.com Senior Technical Trainer

2 2  What is Modernizr.js?  Using Modernizr.js  Installing Modernizr  Detecting HTML5 Features  Fallbacks for Missing CSS3 Features  Loading Polyfills for Missing Features

3 JS Library to Detect Native HTML 5 Features

4  Modernizr is a JavaScript library that detects HTML 5 and CSS 3 features in the browser   Modernizr has three primary tasks  Adds html5shiv if needed (HTML5 tags in old IE) html5shiv  Detects html 5 support through adding classes to the HTML element  Class js for "js is supported" and "no-js" otherwise  Yep / nope loading of polyfills  If a features is not supported  load a polyfill

5

6  Steps to install Modernizer: 1.Go to 2.Select features you want to use 3.Generate and download your customized Modernizr JS code

7

8  Modernizer can check for HTML5 / CSS3 features through JavaScript:  Features detected by Modernizr:  8 if (Modernizr.canvas) { alert('HTML5 canvas is supported'); alert('HTML5 canvas is supported'); } else { alert('HTML5 canvas is NOT supported'); alert('HTML5 canvas is NOT supported');}

9 Live Demo

10

11  On document load Modernizr detects which features are supported  Adds classes " feature " / " no-feature " for the features to the HTML element  Example features:  canvas, rgba, sessionstorage, etc.  If the features are supported  no-canvas, no-rgba, no-sessionstorage, etc.  If the features are not supported

12  If CSS gradients are not supported, use a fallback gradient with PNG repeated by X:

13 Live Demo

14 Yep / Nope Loading of JS Polyfills for Missing HTML5 Features

15  Modernizr can test for features and load resources depending on their support  Used to load polyfills for unsupported features

16 Live Demo

17  HTML 5 Telerik Academy  html5course.telerik.com html5course.telerik.com  Telerik Software Academy  academy.telerik.com academy.telerik.com  Telerik Facebook  facebook.com/TelerikAcademy facebook.com/TelerikAcademy  Telerik Software Academy Forums  forums.academy.telerik.com forums.academy.telerik.com

18 1. Create a HTML page to display the current Web browser and the supported and not supported HTML 5 and CSS 3 features. Use ua-parser-js to detect the browser type, version, OS and device. Use Modernizr.js to detect the features (see an example here: ua-parser-jshttp://fiddle.jshell.net/ncuesta/NHTyT/show/ua-parser-jshttp://fiddle.jshell.net/ncuesta/NHTyT/show/ 2. Create a simple HTML 5 application by choice that uses Canvas, GeoLocation and LocalStorage APIs. Using Modernizr.load() provide fallbacks for older browsers. Use polyfills by choice (e.g. https://github.com/Modernizr/Modernizr/wiki/HTML 5-Cross-Browser-Polyfills). Test in old browsers. https://github.com/Modernizr/Modernizr/wiki/HTML 5-Cross-Browser-Polyfills https://github.com/Modernizr/Modernizr/wiki/HTML 5-Cross-Browser-Polyfills 18

19 3. Using HTML5 and CSS3 create a page to display a date field with a date picker. Use Modernizr to load the jQueryUI date picker only if the browser does not provide a native date picker. 19


Download ppt "Modernize Your Old Browser to Support HTML 5 Svetlin Nakov Telerik Software Academy academy.telerik.com Senior Technical Trainer www.Nakov.com."

Similar presentations


Ads by Google