The newly available
<input> types are one of the easiest and most useful (well, when viewed on an iPhone at least) ways to practise HTML5 citizenship. I have an
<input> that is used for a URL and the excellent news is, lo and behold there is an
<input type="url">. But I also wanted to add an extra little nicety by displaying the URL’s related favicon along with the
<input> as above.
This can achieved really simply using Google’s unofficial favicon API and a sprinkling of jQuery:
var match = /^(?:https?:\/\/)?([\w\d\._-]+)/i.exec(this.value)
var domain = (match && match) || ""
"url(http://www.google.com/s2/favicons?domain=" + domain + ")")
Suprisingly this actually works in IE8(!) and in IE6/7 everything will degrade gracefully: the browser falls back to using
type="text" and jQuery won’t find the correct
<input>s to add the behaviour to - the user simply won’t see the functionality.
Of course the same thing could have been achieved by using a
class="url" instead of
type="url", it would have even worked in IE6/7, but that just wouldn’t have felt so right - plus it’s exactly what IE users deserve!
P.S. You’ll need to add a teeny bit of styling, Google’s favicon images are 16×16px and this did it for me:
background-position: 2px 2px;
padding: 3px 3px 3px 19px;
P.P.S. g.etfv.co also looks interesting and it’s even open-source, though that looks suspiciously like SVN. SVN‽