View
169
Download
0
Category
Preview:
DESCRIPTION
The panel of four discussed modern CSS and HTML techniques. Todd discussed HTML5 and JavaScript in detail, specifically in regards to browser feature detection rather than browser detection, how to start using HTML5 immediately today and the benefits associated with this type of setup, particularly mobile phones and tablets as well as the traditional computer display.
Citation preview
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
Todd Keup :: magnifisites.com
Thank You
Todd Keuptodd@magnifisites.com
@toddkeup
Recommended