JeffreyBarke.net

Mike Taylor from Tunecore's presentation on using JavaScript to give older browsers new fancy. Mike discussed the tenets of regressive enhancement and then demonstrated how to apply them using HTML5 forms and three jQuery plugins he wrote.

This talk is about the future of HTML and front-end development and ways in which we can plan for the future.

HTML5 (and friends)

• New semantic elements
• Canvas 2D context
• Microdata
• Cross-document & channel messaging
• Forms
• Web workers
• Gelocation

Talk is not about progressive enhancement, but regressive enhancement. This "philosophy" embraces:

• Build native experience
• Feature detection
• Back-port functionality for crappy browsers
• Wait for your code to become obsolete

What's problematic about the new semantic elements?

Won't render correctly in older versions of FF and IE (6–8). There's a solution for this, but it relies on JavaScript (Remy Sharp's HTML5 shiv.

Print style sheets won't work in IE. The solution is IE Print Protector. This has been included in Remy Sharp's shiv.

What's problematic about the new HTML5 form elements?

[Mike does a quick demo of the new form elements. You can see that demo here.]

Mike shows the new placeholder attribute: <input placeholder="Ye olde placeholder" />. No need to do hacky script work-arounds anymore.

On to the presentation

Modernizr FTW!

A way to extend Modernizr [I missed the URL].

Mark Pilgrim's Dive into HTML5 has a "guide to detecting everything."

Back to the placeholder attribute. Mike shows some code he wrote to regressively enhance browsers that don't support the placeholder attribute. Uses jQuery to create and position labels off-screen. This does not replace the existing label element, but it adds another label element. The spec clearly states that placeholder is not a replacement for labels. [Would like to actually examine Mike's code (it's a jQuery plugin); I think he's going to post it or send it to the list. It's at Github]

A discussion about styling HTML5 elements. Some people think it's good to be hands-off here. A return to the debates around the file input.

Then Mike turns to the autofocus attribute. Simply a boolean attribute. <input autofocus /> He has a nice jQueyr plugin for this as well.

The last thing we'll be looking at is the datalist element. There are some interesting things necessary to make this work cross-browser. Webkit freaks out on naked option elements, so you have to wrap the options with a select. However, this causes IE to render a select. Gecko doesn's care either way.

Mike created a cool jQuery plugin for this as well. However… Safari 5 lies, because it says it supports the list element when it doesn't. This has broken Mike's working, cross-browser plugin.

But…

Regressive enhancement is kind of a hack. Things can get broken.

Mike's code is at Github

Dean Edwards has a JS library for HTML5 forms that does all of this. It's beta, so we're not supposed to talk about it, but it's a public link on Google Code, so I'm blogging it. Remy Sharp is working on a JS work-around for local storage.

A discussion ensues

Is this good in terms of code maintainability? Is it worth it to invest in this? Why not wait for all the browsers to natively support these things? Where are the big wins? Multiple background-images are win, but are the new semantic elements really worth it?

Actually, have to be careful with some of the libraries and some of our existing "hacks." Some CMS or framework hijacked the required attribute awhile ago and didn't do feature detection. Now that the attribute is part of the spec and is getting implemented, that CMS or framework has produced a broken website in modern browsers.

One advantage of using native browser functionality is that you don't need to test the new form elements in the new browser. The date picker input will just work.

The New York Web Standards Meetup will meet tomorrow (24 September 2009) at theMechanism at 7:00 pm.

Mike Taylor (Tunecore.com) and Jeffrey Barke (theMechanism) will continue last month's presentation on HTML5 by covering Web Forms 2.0 and the canvas, audio and video elements.

The canvas element can be used to draw graphics using JavaScript, while the audio and video elements permit native embedding of those media elements in the browser. Web Forms 2.0 provides, among other things, strongly-typed input fields, new attributes for defining constraints and new DOM interfaces

Please note—This meetup is currently full and the waiting list is quite long. If you know you won't be able to make it, please update your RSVP.

Please contact theMechanism if you'd like to present at a future New York Web Standards meetup.