HOWTO: Target Firefox for Specific CSS

Generally – the best way to handle CSS is to keep it simple, clean, and without any hacks. From now and again there are some times when I need to write CSS specific to IE (using conditional comments). I recently came across a site where I needed to target Firefox because of a width issue. This is the first time in my many years I ran into this – and tried a number of hopeful solutions but nothing worked. I then found that if I used: @-moz-document url-prefix(){} that that would work out and only Firefox would use the styles within that.

Example:

.font_example {font-size:1.1em;}
@-moz-document url-prefix() {
     .font_example {font-size:1.075em;}
}

Safari, Chrome, IE, etc will use the first .font_example code while Firefox will use the code within @-moz-document url-prefix(){}.

While this is not recommended for everyday usage – when and if you hit a wall, this could be something that will save a lot of time and headaches!

view-source: Firefox

I am generally a Safari user to do my web browsing unless I am debugging a web site – then I use Firefox because of the great web developer extensions. I cannot believe I did not know this before, but if you want to quickly view the source of anything (I just used it to debug a RSS feed issue) you just need to type in: “view-source:url” (ex: view-source:http://www.jappler.com). This is extremely helpful and pretty darn cool – and saves me a page load. Nice work!

Developer Menu in Safari 3.1!

My preferred browser is Safari but when I need to do any serious debugging, I use Firefox because of the web developer, firebug, and yslow (for firebug) addons.

In the most recent update of Safari (Safari 3.1), we now have the option to show a “Developer” menu (without any hacks) when using the browser.

There are all kinds of goodies in the “Developer menu – one which I will end up using quite a bit: Web Inspector which is helpful for a number of things (viewing code for errors, optimization, even CSS editing if you want in the snippet editor).

There are other nice options as well such as a quick and easy way to “Disable Cache”, Disable Images, etc. If you do any web development and are a Mac user – make sure you check this out.

Great work on the update!

microsoft firefox 2007 professional edition?

I know I generally post before my daily intake of caffeine, but this morning while going through my news via RSS, I had to do a double take when I read that there is now a microsoft firefox 2007 professional edition. As a web developer, I will be very curious to just where Microsoft goes with this new “version”. I have to say I am a bit scared after reading the full feature list because of this:

“Microsoft Firefox 2007 will support many of the new Microsoft standards on the web to make browsing the web a richer experience and easier to develop for.”

Yikes. Here we go.