How to use Browser Specific CSS Hacks

Browser Specific CSS Hacks is actually not a good practice but when a designers need to adjust the design some specific browsers, they can do it and it’s absolutely for a good reason. Ideally, we don’t need them. Here, we just want to share and discuss the all possible browser-specific selectors and style attributes to you. With these Browser Specific CSS Hacks, you will be able to fix any design with CSS on IE, Firefox, Safari, Opera. So here we go –

Internet Explorer Browser Specific CSS Hacks

Using extra IE specific stylesheet and load it into your document with a conditional comment. This is the simple and best way to target your CSS rules on IE. This way you can separate your standards consequential CSS rules from IE specific rules.

Just add the below code in your HTML file to the head tags. Remember this code must be enclosed with a comment. See the example below –

Firefox Browser Specific CSS Hacks

Firefox is good to render web pages with a better look. But some older version, you will find something link.

Target a rule for Firefox 1.5 and 2

Simple trick, :empty pseudo-class is used to allow to select those elements that have no child element.

When you need to target all version, you should apply the following trick (the -moz prefix) which is taken by Firefox.

Specific CSS for Firefox version 3

Let you have an image with header_right_gif and want to set the Firefox 3 specific CSS. You need to do the following.



Safari Browser Specific CSS Hacks

There is no perfect way to target a specific version of Safari, but there are some inelegant tricks to do this only Safari 1 and 2.

This code can be set the color to red in all browsers.

This code can be set the color to black in every browser except Safari 1 and 2. Because the version 1 and 2 had a bug for this hash mark. When you put the hash mark after the semicolon, it caused Safari to block this. These two versions of Safari is to make a barrier in every rule after the hash mark. So when you need to browser-specific CSS hacks on safari, just put is to bottom of your stylesheet.

If you need to target any Safari version in general just use the vendor prefix code trick. This is similar of Firefox tricks. See the below example –

This trick also is applied on Opera 9+ version.

Opera Browser Specific CSS Hacks

Opera does not require CSS hacks. This is the most standard compliant browser. Suddenly if you see something wonky, just remember this is not the fault of opera, it seems you have some error on your code. But no worries, you can still target Opera by using the following code –

CSS Reset for Browser Specific CSS Hacks

This is the best way to start your coding with resetting CSS properties, so that browser can start to interpret your code in the same starting point. The below reset code is made by Eric Meyer and this is a famous reset version.

Targeting specific browsers or browser versions

Browser Specific CSS Hacks For WordPress – Targeting IE 6,7,8 and 9

Add this code to the header just after the DOCTYPE declaration.


Some Attribute Browser Specific CSS Hacks

Finally, that’s all for today. Remember this is just hacks. But you should give the effort to make your coding perfect and avoid using this.

See you soon again