I discovered an interesting feature in Firefox today. When browsing in a local folder (Anything starting with file:///), small icons are shown to represent the format of each file. It turns out that you can access these icons with moz-icon://.ext?size=x, where ext is the extension of the file (mp3,txt, …), and x is the size of the icon to display (32 and 16 work well for me).
We can take advantage of this feature by including these icons on any web page. Simply use an img tag like this: <img src="moz-icon://.mp3?size=32" />. The beauty of this is that the icons will display natively on whatever platform they are running, taking on the look of the Operating System. Even changing your theme will change which icons are displayed. These subtle changes can make an application feel much more intuitive and familiar.
The obvious problem is that these icons only work in Firefox. However, if that is your target browser, this could be a nice little addition to a web application, which could easily be hidden in other browsers.
Here is a sampling of the icons, which will only appear if you are using Firefox. There is also a set of screenshots from several Operating Systems at the end.
Music (mp3):
Archive (zip):
Video (mov):
Picture (jpg):
Text (txt):
Document (doc):
Binary (exe):
Web (html):
Script (pl):
Presentation (ppt):
Spreadsheet (xls):
Screenshots
(Thanks to browsershots.org)
-
- Ubuntu 8.04
-
- Mac OS X 10.5
-
- Windows XP
4 Comments
Just make sure that if you employ this technique you are happy with not attempting to make your page look good in IE or Safari. Why? Cause you are only going to get red “X”s in IE, and blue “?”s in Safari. And that’s too bad, because it would be wonderful to just call on the destination operating system for applications like this. Oh, well, we clearly don’t live in a Utopian world (yet!)
Nice.
James, one option for getting around the IE/Safari ugliness is to check for user agents, and hide the images for anything which is not Firefox. This is trivial to do with a javascript framework such as jQuery.
These icons are from the GTK part of firefox, right? I am using GNOME and recognize them from the default file manager, Nautilus. Guess that there are a few add-ons that let you use Firefox to interact more easily with hard-drive data, but I thought that it went against the browser’s security model to interact with local files.
Post a Comment