HTML5 Polyfills

A Presentation for

the Intel Developer Forum

Created by Daniel Holmlund

[email protected]

@tizenman

Understanding Your Target Browser

From http://caniuse.com/

Can I use CSS Gradients?

From http://caniuse.com/

Can I use 3D Transitions?

From http://caniuse.com/

Each advanced HTML5 features that you use limits your potential audience!

What is a Polyfill?

A polyfill is a browser fallback, made in javascript, that allows functionality you expect to work in modern browsers to work in older browsers.

html5shiv

Project URL: https://github.com/aFarkas/html5shiv

The HTML5 Shiv enables use of HTML5 sectioning elements in legacy Internet Explorer and provides basic HTML5 styling for Internet Explorer 6-9, Safari 4.x (and iPhone 3.x), and Firefox 3.x.

Supports

article,aside,figcaption,figure,footer,header,hgroup,main,nav,section



html5shiv usage

<!--[if lt IE 9]>
<script src="path/to/html5shiv.js"></script>
<![endif]-->

html5shiv Supports Printers Too!

<!--[if lt IE 9]>
<script src="path/to/html5shiv-print.js"></script>
<![endif]-->

WebShim

Project at http://afarkas.github.com/webshim/demos/

WebShim Features

  • Semantic Structure: Shiv solution / dynamic HTML5
  • Canvas
  • HTML5 forms / Webforms 2
  • HTML5 mediaelements: audio/video/track
  • JSON.parse / JSON.stringify & localStorage / sessionStorage
  • Geolocation
  • ES5/JavaScript 1.8.5
  • interactive elements: details & summary

Usage

<!-- dependencies: jQuery + Modernizr with yepnope -->
<script src="js/jquery-1.7.1.js"></script>
<script src="js/modernizr-yepnope-custom.js"></script>
	
<!-- reference the base script -->
<script src="js-webshim/minified/polyfiller.js"></script>
	
<script>
	//implement all unsupported features || call polyfill before DOM-Ready to implement everything as soon and as fast as possible
	$.webshims.polyfill();
	//or load only specific features you need
	//$.webshims.polyfill('forms json-storage');
	
	$(function(){
	//use all implemented API-features on DOM-ready
	});
</script>

Enable Video Tag for IE6/7/8

<!DOCTYPE html>
<html>
<head>
  <title>Video including polyfill</title>
  <script src="scripts/jquery-1.8.2.min.js"></script>
  <script src="scripts/modernizr-custom.js"></script>
  <script src="scripts/webshim/polyfiller.js"></script>
  <script>
    $.webshims.polyfill('mediaelement');
  </script>
</head>
<body>
  <video width="480" height="360" controls="controls">
    <source src="Video.mp4" type="video/mp4">
    <source src="Video.webm" type="video/webm">	
  </video>
</body>
</html>

Selectivizr

Selectivizr: CSS3 Selectors in IE

Can't find the right Polyfill?

http://html5please.com/

HTML5Please.com

List of Polyfills Libraries

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

Modernizr

is a JavaScript Library that let you detect the features a browser supports.

http://modernizr.com/

Modernizr

Adding Modernizr to a Web Page

<!DOCTYPE html>
<html>
  <head>
    <script src="modernizr.min.js"></script>
  </head>

  <body>
  </body>
</html>

Modernizr includes the HTML5 “shim”

Modernizr’s generated classes

<html class=“js canvas canvastext no-geolocation rgba hsla multiplebgs borderimage borderradius boxshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions video audio localstorage sessionstorage webworkers applicationcache fontface”>

Putting them to use

.no-borderradius .box {
    border: solid 2px blue;
}

.borderradius .box {
    border: solid 1px blue;
    border-radius: 20px;
}

Modernizr also creates a JavaScript object

Modernizr.canvas
Modernizr.inputtypes.search	      
	  

Demo and Exercises

Thank You

Daniel Holmlund

[email protected]

@tizenman