Hi, I'm a web developer and blogger from Russia. My nickname is Dimox.
Sorry for my English, it's not my native. Read more about me and my blog.

HTML Trick: How To Add CSS Styles For All Browsers Except Internet Explorer

HTML Trick: How To Add CSS Styles For All Browsers Except Internet Explorer

I very like an idea of display a different design of the same site for IE6 users (may be even for IE7 and IE8 users) and for users of other popular browsers.

The reason is in ability of using CSS3 technology by the full, because the browsers like Opera, FireFox, Chrome and Safari already supports a lot of opportunities of this technology, they updates frequently, and we, web developers, very much want to use them on our web sites. Right? =)

We can create a two absolutely different CSS files: one – for IE and one for other browsers and then to give them to a corresponding browser using conditional comments.

How to

To do the subject, you need to follow the next 2 steps:

  1. Connect a CSS file for all browsers except IE6:

    <!--[if IE]><![if !IE 6]><![endif]--><link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" /><!--[if IE]><![endif]><![endif]-->
    

    Or simplified version, that doing the same:

    <!--[if !IE 6]><!--><link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" /><!--<![endif]-->
    
  2. And now connect a CSS file for only IE6:

    <!--[if IE 6]><link rel="stylesheet" href="ie6.css" type="text/css" media="screen, projection" /><![endif]-->
    

By analogy you can make this for IE7 or IE8 or once for IE6, IE7 and IE8 (help on conditional comments).

Examples

  • Transcending CSS – this site uses only Universal IE6 CSS for IE6.
  • Dimox.name – my another blog about web development (on Russian). I’ve made a different design for IE6.
  • Early I have seen other interesting examples, but can’t find them now…

Cоmmеnts (9):
  1. 1

    Yes , this way we save a lot of time.

  2. 2
    Aboubaker Nour said:

    Thank you for this way, it’s really right,

    every night I go to sleep I see a dream that next morning I will not find IE6n but never this dream be real….. pff

    Thank’s sir

    • 3

      every night I go to sleep I see a dream that next morning I will not find IE6n but never this dream be real

      You are not alone in this =) But this time will come not soon, unfortunately…

  3. 4

    IE6 is a pain.. what causes it to be a pain – all the people who resist upgrading their browsers.. and Microsoft for continuing its support of this browser.

    Your wish may however be granted soon, if Google stop supporting IE6 as planned in March. This will seriously, I think, affect those people still resisting a change when their favourite search engine fails to load.

  4. 5

    another great post!
    see my preferred solution here: http://dimox.net/personal-css-hacks-for-ie6-ie7-ie8/comment-page-1/#comment-431
    clean, valid code… love it !

    • 6

      BTW, the solution I posted above gives some great benefits over using CSS hacks:

      1) Your CSS code is clean, without the need for CSS hacks
      2) Uses a single stylesheet; no more ie.css, etc.. !!
      3) It ALWAYS works! Since it is PHP based, as long as you can run PHP on your server (and 99.99% of servers can), this script will work for you!
      4) It’s super easy to use.. no need to remember if you need to use ‘lte IE 7’ or anything else.. just code your CSS as usual, the script applies classes to your tag so you can target EXACTLY the browser (IE, FF, etc), browser engine (gecko, webkit, etc) or the OS !!
      Thought I would clarify the benefits and what this script actually does.. so you’ll know what the link is for.. obviously, I really like it. :D I like clean CSS code and cannot stand hacks.. so, this works perfect for the sites and apps I build. Maybe it will work some others as well ;)

  5. 7
    Alison Ruffin said:

    Hi there can I use some of the information from this post if I provide a link back to your site? If you would rather not, that’s okay, but this was a good post.

  6. 9
    Frankie Herbam said:

    You’re not going to believe this but I have lost all night hunting for some articles about this. I wish I knew of this site earlier, it was a fantastic read and really helped me out. Have a good one

Lеаvе а Соmmеnt

© 2009–2016 Dimox.net  •  Privacy Policy