says, I am possible
By: padya
29 Jul 2011Most standards favoring browsers (IE, Opera, Chrome & Safari) have no method of targeting CSS to the specific browser while Mozilla, the buggiest browser, has a completely safe and easy method of serving CSS/HTML to only Mozilla.
To show that the hacks are working correctly I created 6 paragraphs with their specific browser/version identifier within them. This will let you know that the hack is working correctly
The easiest way to target IE is with conditional comments. There is a robust syntax that Microsoft has created to allow authors to do this. I'm not going to go into detail about this since it has been re-hashed a million times by other bloggers but here are two alternatives to parser CSS hacks:
I wouldn't recommend using these hacks since conditional comments are really, really easy to use but if you want to keep all your CSS in one file here is an alternative. Note that the IE7 hack will only apply to IE7 because IE6 does not understand the > selector. It should also be noted that no other browser will recognize this hack.
The first hack targets only Firefox 1 and 2 by using the body:empty hack. The second hack, which is quite clever target all versions of Firefox by using the proprietary extension -moz. -moz combined with the -document url-prefix() which by the way is used by Firefox Addon creators targets Firefox and Firefox alone. I've found that by using proprietary extensions to CSS, as hacks, usually means the most surefire way to target individual browsers without having to worry about another browser possibly parsing the CSS.
The Safari CSS hack works similar to the Firefox hack because it uses a Safari proprietary extension to CSS. By using the -webkit prefix we can target Safari and only Safari.
The Opera CSS hack works because of negation in CSS. Currently I feel this hack is the weakest of all the hacks I've listed simply because it's targeting ALL browsers that support -min-device-pixel-ratio that aren't -webkit. It will only be a matter of time before Firefox supports this and this hack will then most likely apply to Firefox as well.
Put them all together in a single .css file.
NB: CSS for safari and chrome is same. If changes occur it can be handled manually. Though changes will be minor.
2 Responses to CSS Browser Hacks For Firefox, Opera, Safari, chrome & Internet Explorer in single CSS file
Guest (not verified)
Wednesday, August 3, 2011 - 20:32 reply
Great posting.. Question is it possible to target FF only on a PC (or FF on a MAC) -- I'm see some rendering issues on a project I'm working on.
Thanks!
Guest (not verified)
Tuesday, August 9, 2011 - 14:48 reply
see this:::
http://stackoverflow.com/questions/3123063/what-does-moz-document-url-pr...
Post new comment