I’ve discovered a little trick that lets you change the icon that appears when you autoscroll in Firefox. Surprise your website visitors with this gimmick.
Middle-clicking on a page in Firefox activates autoscroll mode. Most of you probably know it so I won’t explain it in depth, just try it out. We’re all accustomed to the regular autoscroll icon so much that it’s nothing special anymore. But with a little CSS trickery, we can grab some attention and perhaps a few grins. ;)
First off, credit where credit is due, I stumbled upon this accidentally while browsing the Sitepoint website. Before I continue there is something I need to point out, and I can’t stress this out enough:
Please remember to use this responsibly.
Changes such as these interfere with Firefox’s user interface, and it’s important that you don’t harm usability. If done carelessly, this can have implications that start with being a mere annoyance to users and can go as far as people not wanting to visit your site anymore. So, if you decide to use this anyway, try to keep your modifications as close to the original icon as possible. Also, this is taking advantage of a known bug in Firefox, so there’s no guarantee it’ll work forever.
Alright then, let’s get on to the magic.
Create a PNG icon
Firefox’s autoscroll icon is 28x28px large. I haven’t tried other sizes, but it’s a good idea to stick with what users are used to. Create a PNG image with your icon, advisably based on the original icon, with transparency and all. If you try autoscrolling here on position: absolute, you will see that I’ve created an icon that looks very similar to the original, it feels like the original and transports the same message of “scrolling” as does the original. And out of pure ego, I’ve included my parasight logo. ;)
Now that we’ve got our icon, we need CSS to trick Firefox into using it. Here’s the code for your stylesheet:
And that’s pretty much it. For those of you interested in the technical explanation for this trick, read on. To everyone else, have fun, and remember to use it responsibly. We don’t want to create another <blink> tag!
So how does this work?
Well, the “
html>img” makes use of the child selector. This means it will only influence an
<img /> element that is directly beneath the
<html> element. Firefox happens to place the autoscroll icon right here, before your document’s
<body> even begins. So CSS is controlling the icon, but ignoring the rest of your site. The original autoscroll image is forced to 0px width, making it invisible. Padding the same size as the icon is added, and a background image is applied, perfecting the illusion.
Implemented this on your site? Concerns regarding usability? Leave a comment, I’d like to hear from you!
Apparently, this only works for Firefox on Windows. Doesn’t work in OSX. Any word on Linux?
2006-10-16: Hah! Just tested myself, and it DOES appear to work in Firefox under OSX.
2006-10-16: Firefox originally has three states for the autoscroll icon: vertical, horizontal, and both. Please keep in mind that this overrides all three of them, so horizontal scrolling will incorrectly display the vertical scroll icon. This has no effect on the function itself, other than user friendliness.