placeMe.js – A Placeholder Polyfill

admin — Wed, 02 May 2012 00:22:21 +0000

One of my favorite new attributes in the HTML5 Spec is the placeholder attribute. This new attribute allows us to easily add placeholder text to our input fields. When the input field is focused upon, the placeholder text is removed.

This has been a standard feature on the web for quite sometime, usually being accomplished with JavaScript. With the introduction of the placeholder attribute, the browser takes care of the job for us.

Of course not every browser supports the placeholder attribute. While most modern browsers do (Firefox 4+, Chrome 4+, Safari 4+, Opera 11.6+), Internet Explorer does not.

I wanted to use the placeholder attribute without fear so I wrote a little polyfill using jQuery. I’ve decided to call it placeMe.js and give it away to anyone who would like to use it and/or improve upon it.

How to Use

First include jQuery

Next include placeMe.js

Now use the placeholder attribute to your heart’s content

Download

Download | Demo

This is my first attempt at writing a polyfill, so be sure to let me know what you think in the comments.

The Ultimate List of IE6 Fixes & Hacks

admin — Thu, 01 Sep 2011 01:04:01 +0000

August 27, 2001. For web developers, that is a date that will live in infamy. On that unassuming August day, Internet Explorer 6 was officially released. No one could have foreseen the headaches IE6 would cause for developers. Who could have known that in late 2009 Internet Explorer 6 would still have 12.1% market share, forcing us to make sure our sites play nice with it. There have been many attempts to bring down our foe (here’s one, here’s another), but alas, IE6 won’t go down quietly.

IE6′s problems are well documented, but luckily for us a lot of smart people have found ways fix (or side step) those problems. Here is a huge list of hacks, fixes, and resources to make IE6 a little less painful.

IE6 Box Model Bug

More than likely if you’ve heard of only one IE6 bug, the box model bug is the one. In short, IE6 incorrectly calculates the width of a given box causing all sorts of layout problems. Here are some ways around this annoying bug.

IE6 PNG Transparency Bug

I touched on this briefly in my Quick Guide to PNGs post. There is a lack of support of the PNG alpha channel in IE6 causing transparent PNGs to render incorrectly. There’s a bunch of fixes for this using a lot of different techniques.

IE6 Min-Height/Min-Width Bug

In another move that completely makes sense, IE6 ignores the min-height/min-width property. Don’t ask me why, I honestly haven’t a clue.

IE6 Double Margin Bug

This bug does exactly what you think it does. IE6 doubles your margins on a floated element. So, for instance, if you want a 10px margin IE6 makes it a 20px. It makes perfect sense, huh? Here’s how to fix it.

IE6 No Hover State Bug

IE6 only supports the hover pseudo-class on anchor () tags. Unlike modern browsers that support the hover pseudo class on any element. This bug especially becomes a problem when using lists (

) for navigation. Here’s a few work-a-rounds.

Other IE6 Bugs

Here are some fixes for a few other IE6 bugs.

General IE6 Hacks, Fixes, & Resoucres

Conclusion

I hope this list helps you. Almost every single fix/hack I’ve listed has come in handy to me at some point. Please let me know if I’ve forgotten anything or left something out. I can’t say thanks enough to all the people who have taken time to develop solutions all of us can use.

Matt Sparks Blog