The CSS :focus mouse over declaration.

Anyone that has done some kind of web development will have seen this kind of code before:

a:hover {
	color: red;
	text-decoration: none;
}

And you may be asking me what is wrong with that?

Well it does work, but what about people that navigate around the site using the Tab key? Or even devices that don't have a mouse so there is no hover event?

Im on a solo quest to try and get all web developers to make a simple addition to that code that will give a far better user experience for unusual web devices and web behaviours.

There is no reason why all your hover events shouldn't always look like this:

a:hover,a:focus {
	color: red;
	text-decoration: none;
}

This means that if a link is given focus it will look like it does when mouse is hovering over it.

Give it a try and hit tab a couple of times to see it working on this site.

This will give your whole site a more standard feel when customers are using touch screen devices.

Browser support for :focus is good but not perfect. It seems to work on all browsers apart from IE 7 and under. This is good enough for me because it is never going to be an integral part of your site.

This code also works for text areas so you can display different styles when the user is typing into a text box.