Modernizr and HTML5

Most websites, now, seem to be comfortable designing their UI in a way that acknowledges that the user’s experience in IE is going to be inferior to the modern browsers. To use a simple example, this simple effect on the LinkedIn menubar uses a CSS dropshadow style that IE doesn’t support.

In IE:

Drop shadows. Rounded corners. Little style things like this are contentedly absent from the pages when viewed in IE.

The other day, I was asked to implement a common feature that often appears on HTML forms — “ghosted” text in some of the text fields that disappears once the user starts typing. Like this example.

Now, it turns out that this ghost text is actually part of the HTML5 standard: it’s called “placeholder” text, and I can specify it like so:

<input name="myName" value="" placeholder="Your name please" >

Which, hey! Great. Except, IE. (How many happy thoughts have been ruined with those two words?) And, well, Firefox only supports placeholders in the recently-released Firefox 4. So, maybe I can’t just use placeholders. But here’s a really great script that emulates the placeholder feature in browsers that don’t yet support this capability. Interestingly, the script makes use of a great Javascript component called Modernizr, which helps detect whether or not the browser supports many of these new features. It also uses JQuery.

It’s pretty slick. It lets me write for HTML5-compliant browsers, and gives me a nice fall-back behaviour for yesterday’s browsers.

Afterward: One last thought: you can style HTML5 placeholder text in Firefox, Safari and Chrome. The above script applies a .placeholder class to the backported case.

It's only fair to share...
Share on FacebookGoogle+Tweet about this on TwitterShare on LinkedIn

Leave a Reply