Todd Keup ::magnifisites.comHTML5 and JavaScriptTodd Keup@toddkeup
Todd Keup ::magnifisites.comOverview• JavaScript, libraries and frameworks• The arrival of HTML5 and its elements• Browser...
Todd Keup ::magnifisites.comWhich JavaScript Library?
Todd Keup ::magnifisites.comHTML5 Basic Changes<!DOCTYPE html><html lang="en" dir="ltr"><head><meta charset="utf-8"><title...
Todd Keup ::magnifisites.comBrowser Sniffing
Todd Keup ::magnifisites.comFeature DetectionModernizr is a JavaScript library thatdetects HTML5 and CSS3 features in theu...
Todd Keup ::magnifisites.comPolyfillsFilling the hole in the browser where thetechnology needs to be
Todd Keup ::magnifisites.comWhats it gonna be, boy?Modernizr supports dozens of tests, andoptionally includes YepNope.js f...
Todd Keup ::magnifisites.comHTML5 New Feature Example• Web Forms : input placeholder// For older browsers not supporting H...
Todd Keup ::magnifisites.comHTML5-placeholder-polyfill<form><label for="srch">Search: </label><input placeholder="For What...
Todd Keup ::magnifisites.comSummary• Write JavaScript or use a library?• Start using HTML5 today• Stop browser sniffing• S...
Todd Keup ::magnifisites.comThank YouTodd Keuptodd@magnifisites.com@toddkeup
Upcoming SlideShare
Loading in …5
×

Pubcon Las Vegas 2012 CSS and HTML coding

553 views

Published on

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.

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

Pubcon Las Vegas 2012 CSS and HTML coding

  1. 1. Todd Keup ::magnifisites.comHTML5 and JavaScriptTodd Keup@toddkeup
  2. 2. Todd Keup ::magnifisites.comOverview• JavaScript, libraries and frameworks• The arrival of HTML5 and its elements• Browser sniffing vs. feature detection• Polyfills• JavaScript interaction with HTML5
  3. 3. Todd Keup ::magnifisites.comWhich JavaScript Library?
  4. 4. Todd Keup ::magnifisites.comHTML5 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 attributestyle cannot have a charset attributescript if embedded must not have a charset attribute; if external (src attributespecified) and you choose to include a charset, it must match the Content-Typemetadata (<meta charset="utf-8">
  5. 5. Todd Keup ::magnifisites.comBrowser Sniffing
  6. 6. Todd Keup ::magnifisites.comFeature DetectionModernizr is a JavaScript library thatdetects HTML5 and CSS3 features in theuser’s browser.
  7. 7. Todd Keup ::magnifisites.comPolyfillsFilling the hole in the browser where thetechnology needs to be
  8. 8. Todd Keup ::magnifisites.comWhats it gonna be, boy?Modernizr supports dozens of tests, andoptionally includes YepNope.js forconditional loading of external .jsand .css resources.
  9. 9. Todd Keup ::magnifisites.comHTML5 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 passwordfields$(input[type="password"]).each(function(){// your handler code here}// additional handler code}• Include this on every form page withplaceholder features• Conditional include using Modernizr
  10. 10. Todd Keup ::magnifisites.comHTML5-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>
  11. 11. Todd Keup ::magnifisites.comSummary• Write JavaScript or use a library?• Start using HTML5 today• Stop browser sniffing• Start feature detecting• Bonus: works with CSS too
  12. 12. Todd Keup ::magnifisites.comThank YouTodd Keuptodd@magnifisites.com@toddkeup

×