pubcon las vegas 2012 css and html coding

Todd Keup :: magnifisites.com

HTML5 and JavaScript

Todd Keup@toddkeup


Overview

• JavaScript, libraries and frameworks• The arrival of HTML5 and its

elements• Browser sniffing vs. feature

detection• Polyfills• JavaScript interaction with HTML5


Which JavaScript Library?


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">


Browser Sniffing


Feature Detection

Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.


Polyfills

Filling the hole in the browser where the technology needs to be


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.


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


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>


Summary

• Write JavaScript or use a library?• Start using HTML5 today• Stop browser sniffing• Start feature detecting• Bonus: works with CSS too


Thank You

Todd [email protected]

@toddkeup

pubcon las vegas 2012 css and html coding

Technology