How is CSS Browser Hacks For Firefox, Opera, Safari, chormo & Internet Explorer?

hello
1.how is CSS Browser Hacks For Firefox, Opera, Safari, chormo & Internet Explorer for all version ?
2.did is right use of CSS Browser Selector.js?( CSS Browser Selector )

I am against the principle of actually writing separate CSS for each browser. And that code will never cater to all browsers, which good robust code should by default.

What is your suggestion?

Code without hacks and code properly and most browsers (apart from IE) will be ok.

If there are small differences between browers then that’s usually acceptable. If there is a large difference then you are probably doing something wrong in the first place and a change of design or a change of tact should solve the problem.

I rarely see a need to hack for any browser apart from IE (and ignoring form controls as they all differ anyway).

Maintenance becomes a nightmare if you have separate css for every browser and no one will thank you for it when they have to update something later.

Once in a while there is a need for a hack when nothing else works but until most of the time there is simply no need.

Thank you, How To Create an IE-Only Stylesheet?

You can use conditional comments but in reality its only ie6 and 7 that really need hacks so if you only have the odd bug then you can use a hack like so:



*  html #elementname {color:red} /* ie6 only*/
*+html #elementname {color:blue} /* ie7 only */

That save maintaining multiple stylesheets.

I can’t stress strongly enough though that you should avoid hacks unless you know its an actual bug and if there is no other way around it. Too often authors see something different and hack it when all they need do is do it properly in the first place :slight_smile:

what is your think about use this code?(it’s only for ie6 and 7?)


<!--[if IE ]>
  <link href="iecss.css" rel="stylesheet" type="text/css">
<![endif]-->

What do I do for set ie8, ie9, ie10?

“if IE” will target ALL IEs… you don’t want code for 6 and 7 to also hit 8 or 9.

Why hack for 8 or 9? Normal standards code should work 99% of the time.

Yes as Stomme aid you need:

lte IE 7

i.e. less than or equal to IE7


<!--[if lte IE 7]>   <link href="iecss.css" rel="stylesheet" type="text/css"> <![endif]-->

However most of the hacks will be needed for IE6 so you still need to separate ie6 and 7 in that file which you can do with the hacks I gave earlier. - which means you don’t really need the CC anyway :slight_smile:

my code true work with opera, chormo and fierfox but not true work with full version ie(6, 7, 8, 9, 10).
i test my code with IETester v.0.4.10
did is problem of my css code?

There is almost never any need to put in special CSS hacks for IE8, and even less so for IE9, which is very standards-compliant. IE7 might need a few tweaks. IE6 often needs a lot of “messing around,” but given that it’s almost dead, it may not be worth the effort.

Do you have a proper DOCTYPE defined on your page? Without that, IE goes into quirks mode, and often does ugly things.

Beyond that, the helpers here are almost certainly going to need to see your page. Please post a link.

ok, my page:
http://www.zigweb.ir/
test yourself and see problem.(charset=utf-8)

Just for starters, feed your page into a validator. There are many serious errors in there, especially using the same ID attribute for multiple things (an ID must be unique).

[Invalid] Markup Validation of http://www.zigweb.ir/zig/ - W3C Markup Validator

Your CSS has only a couple of minor errors (you can ignore the “warnings” section), so the problem here is almost certainly your HTML, not your CSS:

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.zigweb.ir%2Fzig%2F&profile=css21&usermedium=all&warning=1&vextwarning=&lang=en

ok, css not problem (CSS level 3). view:
W3C CSS Validator results for http://www.zigweb.ir/zig/ (CSS level 3)
html have error and fix them and I can true see the result or not!
Please be waiting

Hi, As early out suggested a few posts back you don’t have a proper doctype and your page is therefore in quirks mode and will render like ie5 and think its still 1999 or earlier.

Change your doctype to at least the following (although you should use strict these days):


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

That will correct a lot of the issues but until you do that we won’t be able to see them all properly.

it worked, Thank you very much