SitePoint Sponsor

User Tag List

Results 1 to 14 of 14

Thread: CSS Hierarchy

  1. #1
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)

    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

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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.

  3. #3
    SitePoint Enthusiast Albablue89's Avatar
    Join Date
    Jul 2005
    Location
    Scotland
    Posts
    98
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.


    Code:
    <!--[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.

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

  4. #4
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    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

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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]-->
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    I'm guessing that if I position it after the [if !IE] block, that it'll override that?

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by TehYoyo View Post
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  8. #8
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Mainly for just CSS3.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by TehYoyo View Post
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  10. #10
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    OK. Thanks a lot.

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Out of interest, what CSS3 items are you wanting to use?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  12. #12
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Transition property, transform, mainly the animation ones.

    ~TehYoyo

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  14. #14
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Got it...that's why I use Chrome Canary (although, according to CSS3test.com, it's not any better in terms of CSS3.)

    Thanks for everything.
    ~TehYoyo


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •