HTML5

Frameworks and Tools

Jeff Boulay
Dec 4, 2011

About Presenter

  • Front-end developer
  • Designer
  • Jeff@fluid-logic.com
  • twitter @jeffboulay

Overview

HTML5 Boilerplate

HTML5 Boilerplate

A rock-solid default for HTML5 awesome.

Developed by  

Paul Irish
Divya Manian
Shichuan Open
Mathias Bynens
Nicolas Gallagher
Mickael Daniel
Jonathan Verrecchia
Rob Larsen
Mike West

Dave Kirk
nlogax
David Murdoch
Andy Dawson
Mikko Tikkanen
Adeel Ejaz
Matthew Donoughe
Calvin Rein

 

 

Whats baked in:

HTML5 Boilerplate

Demos

Modernizr

Modernizr - http://www.modernizr.com/

Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.

Developed By

Faruk Ates
Paul Irish
Alex Sexton

What is Modernizr?

Very simply, Modernizr tells you whether the current browser has this feature natively implemented or not for HTML5 and CSS3.

What does Modernizr get you?

Using Modernizr.load

Modernizr.load does not slow anything down, and can sometimes offer a small boost in performance by loading scripts asynchronously and in parallel. 

Modernizr.load({
  test: Modernizr.geolocation,
  yep : 'geo.js',
  nope: 'geo-polyfill.js'
});

CSS Features

Feature Modernizr JS object property / CSS classname
@font-face
background-size
border-image
border-radius
box-shadow
Flexible Box Model
hsla()
Multiple backgrounds
opacity
rgba()
text-shadow
CSS Animations
CSS Columns
CSS Gradients
CSS Reflections
CSS 2D Transforms
CSS 3D Transforms
CSS Transitions

fontface
backgroundsize
borderimage
borderradius
boxshadow
flexbox
hsla
multiplebg
opacity
rgba
textshadow
cssanimations
csscolumns
cssgradients
cssreflections
csstransforms
csstransforms3d
csstransitions

HTML5 Features

Feature Modernizr JS object property / CSS classname
applicationCache
Canvas
Canvas Text
Drag and Drop
hashchange Event
History Management
HTML5 Audio
HTML5 Video
IndexedDB
Input Attributes
Input Types
localStorage
Cross-window Messaging
sessionStorage
Web Sockets
Web SQL Database
Web Workers

applicationcache
canvas
canvastext
draganddrop
hashchange
history
audio
video
indexeddb


localstorage
postmessage
sessionstorage
websockets
websqldatabase
webworkers

Misc Features

Feature Modernizr JS object property / CSS classname
Geolocation API
Inline SVG
SMIL
SVG
SVG Clip paths
Touch Events
WebGL

geolocation
inlinesvg
smil
svg
svgclippaths
touch
webgl

Modernizr

Demos

Pollyfills

What are Polyfills

a polyfill, or polyfiller, is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively. Flattening the API landscape if you will
Remey Sharp

Pollyfills

Demos

Resourses

http://html5boilerplate.com/
http://www.modernizr.com/
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
http://caniuse.com/
http://www.online-convert.com/

Thank you!