Todd Keup :: magnifisites.com
HTML5 and JavaScript
Todd Keup@toddkeup
Todd Keup :: magnifisites.com
Overview
• JavaScript, libraries and frameworks• The arrival of HTML5 and its
elements• Browser sniffing vs. feature
detection• Polyfills• JavaScript interaction with HTML5
Todd Keup :: magnifisites.com
Which JavaScript Library?
Todd Keup :: magnifisites.com
HTML5 Basic Changes<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" media="screen" href="jquery-ui.css">
<script type="text/javascript" charset="utf-8" src="jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery-ui.min.js"></script>
</head>
link cannot have a charset attribute
style cannot have a charset attribute
script if embedded must not have a charset attribute; if external (src attribute specified) and you choose to include a charset, it must match the Content-Type metadata (<meta charset="utf-8">
Todd Keup :: magnifisites.com
Browser Sniffing
Todd Keup :: magnifisites.com
Feature Detection
Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.
Todd Keup :: magnifisites.com
Polyfills
Filling the hole in the browser where the technology needs to be
Todd Keup :: magnifisites.com
What's it gonna be, boy?
Modernizr supports dozens of tests, and optionally includes YepNope.js for conditional loading of external .js and .css resources.
Todd Keup :: magnifisites.com
HTML5 New Feature Example
• Web Forms : input placeholder// For older browsers not supporting HTML5 placeholder attributeif (!('placeholder' in document.createElement('input'))) {// Sets an input type text to use for placeholder on password fields $('input[type="password"]').each(function(){ // your handler code here } // additional handler code}
• Include this on every form page with placeholder features
• Conditional include using Modernizr
Todd Keup :: magnifisites.com
HTML5-placeholder-polyfill<form>
<label for="srch">Search: </label>
<input placeholder="For What?" type="text" name="srch" id="srch">
</form>
<script type="text/javascript" charset="utf-8">
Modernizr.load({
test: Modernizr.input.placeholder,
nope: [
'/css/placeholder_polyfill.css',
'/js/placeholder_polyfill.jquery.js'
]
});
</script>
Todd Keup :: magnifisites.com
Summary
• Write JavaScript or use a library?• Start using HTML5 today• Stop browser sniffing• Start feature detecting• Bonus: works with CSS too
Recommended
