Preventing Firefox from auto-filling login and password fields

When you login in an app and tell Firefox to remember your password, it will then automatically fill any password field that have a login field near it.

It can be quite embarassing when you are developping an admin panel where you can edit your own profile informations. The password field will be filled every time you go to that page, even if you explicitly set no value.

The way to circumvent this is to add an autocomplete="off" attribute to the field.

It may not validate, but is understood both by IE and FF AFAIK.

You should always test on older browser versions

You probably already have installed on your computer various web browsers (FF, IE, Safari, Opera and Chrome) to test your websites. You most certainly also have multiple installs of IE (or are using IETester) because the underlying engine of those browser is very different from one version to another.

Firefox, Safari, Opera and Chrome users are more educated to the "always update to latest version" paradygm so you rarely have to debug old and obscure version of those browsers.

At least it was what I thought until I was stucked with an old 3.0 version of Firefox on my laptop (mostly due to my inability to upgrade to the latest version. I'm still new to the linux world and my laptop is running ubuntu). Anyway, it made me understand that even if you are willing to upgrade you can't always do it and old browser versions should be supported too.

In a recent CSS experiment, I managed to style checkboxes and radio buttons in pure CSS. Unfortunatly, because I was using some "advanced" CSS selectors, FF3.0 wasn't able to render it correctly, in fact it was able to render only half the rules, making the whole thing totally unusable.

That was a perfect example of an old browser I had to debug. I will not dive into the details of the CSS (mostly because I haven't fixed it completly), and this post was only to remind you (and me) to always check on previous browser versions.

Next post will be explaining how to test on multiple Firefox versions side by side.

Using :after and :before

:after and :beforepseudo-elements allow one to add generated content before or after an other element. It can be used to add quotes around text, icons after a link to specify the language of the target page and a lot of other useful stuff like that.

It can also be mastered to create more powerful styling. I'll post more about that later.

Anyway, IE6 and IE7 don't support it. Firefox is supposed to support it from the 3.0 version but in fact it is still buggy in this release.

Pseudo-elements must be inline elements and can't be absolutly positionned in FF3.0, thus greatly reducing the number of fun things we could do with them in this browser.

It faced me with a challenge. If I wrote :before and :after rules, they would be only understood by FF3.0 but badly rendered, resulting in half the styling I expected.

Browsers that don't understand the rules would not apply them and keep the default rendering, compliant browsers will render all the rules, but the grey area in between is filled with FF3.0 that will think it can handle them and will finally badly render them.

I haven't found a way to specificaly target FF3.0, so I used an alternate method.

All the browsers that understand the :only-of-type selector also understand :before/:after. But FF3.0 and IE7 do not understand :only-of-type. So if I wrote a rule starting with body:only-of-type, it will only be applied to browsers with complete :after and :beforesupport (excluding FF3.0). This solved my problem.

Unfortunatly, it will also filter out IE7 who does not understand :only-of- type but does understand :after/:before. I usually remove all fancy form styling for IE anyway so that's not a big deal for me, but if you really care, you just have to override the rule in a IE7 specific stylesheet.

Running multiple Firefox versions side by side on Windows

Whenever you upgrade your Firefox, the new version will overwrite the previous one. If you want to open multiple Firefox versions side by side, here's my way :

• First, uninstall all your previous Firefox installation(s). Make sure to backup any important data beforehand (I personnaly use MozBackup to do that).
• Then install the latest available stable version. This will be the main Firefox version, the one you'll be using on your dayjob and the one you'll always update.
• Now run the Firefox ProfileManager. To do that, create a shortcut to your firefox.exe file, then edit this shortcut. In the "Target" field, add -Profilemanager.

My field looks like : "C:\Program Files\Internet\Firefox\firefox.exe" -Profilemanager

• You now have to create one new profile for each FF version you plan on testing. Give them meaningful names. I named mine "FF3.0".
• Now download the corresponding Firefox version from oldversion.com
• Do not install it, but extract its content (using a archiving tool like winrar or 7-zip) in a tmp directory. Remove the optionaldirectory as well as removed-files.log and setup.exe.
• Copy the content of localized/ into nonlocalized/ (overwrite files if asked).

• You can now rename the nonlocalized/ directory and move it around on your hard drive. I renamed mine to Firefox 3.0/ and put it alongside the main Firefox, in C:\Program Files\Internet\Firefox 3.0\

• Create a shortcut to the firefox.exe file in this directory and edit the target field. This time, we have to specify which profile to use. Just add -P "FF3.0" -no- remote in the target field.

Mine now looks like C:\Program Files\Internet\Firefox 3.0\firefox.exe" -P "FF3.0" -no-remote

That's it.

Now, just run your classic Firefox shortcut to open the most up to date Firefox version, and use the custom shortcuts to open previous versions.

I personnaly also rename the different firefox.exe to firefox30.exe, or firefox35.exe to more easily spot them in the taskmanager.

I also edit each .exe with ResHack to change their taskbar icons. I haven't yet managed to change their title.

Edit : Now I can't open .html files directly from the explorer nor follow links from my IM. I still don't know exactly what of the steps above caused that.

Changing Firefox language

I'm French, live in France, but usually prefer having my software in English.

This is so because english words are generally shorter (and thus fits more easily in a GUI) and most of the time french translations aren't optimal.

I just download the latest Firefox version from their website, and without knowing it, it was a French localized one. They do some sniffing on the user agent string and automatically download the corresponding file.

That seems a great idea, but I prefer my software in english, so I searched for a en-US.xpi file to update firefox. It does exists for any other language, but not for en-US, this being the default language, as stated in this bug report.

It seems the only way to have an english Firefox is to download the english version, there is no way to change it afterwards.

You can type about:config and change the general.useragent.locale value to en-US but it does not update the main language, only tell plugins to use that language (AFAIK).

Changing the language in the options only change the user agent string.

Well, I had to backup my profiles, uninstall FF, download the english version and reinstall it.