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!

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!

Safari on Windows XP

SafariAs a web developer, new browser releases both excite me and scare me. When I heard about Safari coming out for the PC (Beta available to download) I got pretty excited. I really like the speed of Safari on the Mac and was eager to see how it would perform on the PC.

For quality assurance testing, I have found if I can get everything to work in Safari – it is only a few steps, at most, to get everything working in my core browsers (IE 6, IE 7, Safari 2+, Firefox 1.5, Firefox 2+) so I am eager to add Safari 3 into the mix. At first glance it was odd seeing the Safari icon on the Windows desktop, and the menu bar items within the browser window, but I have to say – all the sites rendered beautifully – finally for all those PC users. I am excited to see how this develops – good work Apple!