CSS Hierarchy

Hey all. I’m new here and I thought I’d pop in and offer up a question.

As we all know, Internet Explorer offers nightmares for web developers. This was (slightly) rectified with the <!–[if…]> statements.

Of course, I can specify (to Internet Explorer…say…7) that I want it to use the InternetExplorer7.css, but the other stylesheet that I’m using (for Chrome, Firefox, Opera, Safari, etc.) for CSS3 will still be running.

Is there any way that I could have Internet Explorer see the stylesheets that I want it to see, and disable everything else? That is, design one webpage for Internet Explorer, and one webpage for everyone else?

I imagine that it would be done through JavaScript.

Thanks.
~TehYoyo

Welcome to Sitepoint, TehYoyo.

What you are asking for is HACKY. Is there a reason you want to segregate IE users?

Historical reference: IE<8 had many bugs that were used as hacks, most notably “* html” before the selectors. Because all other brousers did not have this “ghost element” around/before the html tag they ignored the rules which ere preceded by “* html” ( IE7: *+html). Still this is HACKY… obviously, IE8 and up ignores these hacks like the other good browsers. IE6 did not understand the child selector, so you could exclude IE6 with “html >”… again hacky. Which is why conditional comment are still the best and cleanest ways to target IE. IE

The other problem is your thinking here. You can still code for standards(non-IE), then use conditional comments to reset and restyle a different look for IE users.

I have never done this myself, but I have seen it being discussed for a photo gallery. But only by using the old, <![if IE]>, <![if !IE]>, <![endif]> tags for IE.

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

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

Could try the condition out on something else like your title tags first, without spending time on style sheets. If you get the “IE Browser” and “Other Browser” titles in the appropriate browsers, then you at least know that the IE conditional code is working, thus you can begin on separate style sheets.

<!--[if IE7]><title>IE Browser</title><![endif]-->
<![if !IE]><title>Other Browser</title><![endif]>

Thanks for the warm welcome, dresden_phoenix.

pcmagic, if I’m getting you correctly, is that I can define my standards-based stylesheet in an <![if !IE]> tag (which will stop any internet explorer version from reading the CSS). That suits my purpose.

Is there any way that I can define an if statement such that my stylesheet shows to Internet Explorer 9+?

Thanks a lot.
~TehYoyo

I would feed browsers your main stylesheet, and then your IE stylesheet should be made of small changes. So use CCs to SHOW those changes only to IE.

To target IE9+

<!–[if gte IE 9]><![endif]–>

I’m guessing that if I position it after the [if !IE] block, that it’ll override that?

If you want one style sheet to override another, put it last in the order of style sheet links. The rule in the override sheet must either have the same or greater specificity, though.

As others have said, though, it’s better to have good clean CSS that all decent browsers support, and then only feed a few tweaks to older versions of IE if it’s really important to you. I really don’t see the point of targeting special styles to IE9, though, as it has pretty good CSS support. Conditional comments are being removed from IE for all versions after 9 anyway.

Mainly for just CSS3.

Well, you can just put CSS3 rules in your style sheet(s), and browsers that don’t understand them will simply ignore them. Not much CSS3 is recognized by any browsers, at this stage, anyway. So I tend just to use border-radius and few other things, and leave older IEs with square corners. You can help these older IEs with JavaScript or with older, image-based solutions, but I don’t see the point, personally.

OK. Thanks a lot.

Out of interest, what CSS3 items are you wanting to use?

Transition property, transform, mainly the animation ones.

~TehYoyo

OK, yeah, well most IEs will have no idea about that anyhow, but will just ignore any styles for that. At this stage, such effects are just an enhancement for a few progressive browsers.

Got it…that’s why I use Chrome Canary :smiley: (although, according to CSS3test.com, it’s not any better in terms of CSS3.)

Thanks for everything.
~TehYoyo