Microsoft says: de-hack your CSS

Tweet

The IEBlog has appealed to Web designers to ask them to do away with a number of hacks that are commonly used to apply CSS formatting in Internet Explorer only. These are the most common hacks in question:

Many of the CSS parsing quirks that these hacks are based on have been fixed in IE7, meaning that the IE-specific formatting they apply will not be applied in IE7.

Now, if the IE rendering quirk your hack was designed to work around has been fixed in IE7 too, that’s just fine. But if if hasn’t, then your site’s design will break in the new browser.

Microsoft is hoping developers will instead use the more predictable conditional comments feature of Internet Explorer 5 or later to put IE-only CSS in a separate style sheet, which will only be used by that browser:


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

But as I said, due to the many rendering fixes forthcoming in IE7, you’ll only want some of your IE-specific CSS to apply in IE7. You’ll therefore need to divide up your IE-specific styles even further. Using more complex conditional comments, you can create style sheets that apply to IE7 or earlier, IE6 or earlier, IE5.5 or earlier, and so on.


<!--[if lte IE 7]><link rel="stylesheet" href="ie7.css" type="text/css" /><![endif]-->
<!--[if lte IE 6]><link rel="stylesheet" href="ie6.css" type="text/css" /><![endif]-->
<!--[if lte IE 5.5]><link rel="stylesheet" href="ie55.css" type="text/css" /><![endif]-->

Of course, until Microsoft releases a public beta of Internet Explorer, we won’t know just which fixes to keep (in ie7.css), and which to deliver only to older browsers (in ie6.css).

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • pdxi

    That’s all good and well, but what about the majority of Microsoft’s customers that won’t update to IE7 until it has been out for at least a year?

    I don’t think my grandmother cares about upgrading her browser to the newest version. And what about the hundreds of thousands of computer owners who still use Windows 98 and ME for their operating system?

    If Microsoft really cares about this, they will release patches for IE6 to make it adhere to W3C standards. But of course, I severely doubt this will ever happen.

  • http://www.sitepoint.com/ Kevin Yank

    pdxi, nothing in my post was predicated on people upgrading to IE7 quickly, or at all.

    Microsoft is simply asking Web designers to avoid CSS hacks, which are an unstable solution for targeting specific versions of IE, and use conditional comments instead.

    If Web designers take Microsoft’s advice, they will be able to ensure that Websites that work in IE6 today will continue to do so (so no one is forced to upgrade), while at the same time being able to take advantage of IE7’s better support for standards.

    Microsoft needs to behave more responsibly in a lot of areas, but spending its resources on updating browsers for users of six-year-old operating systems is not high on my wish list.

  • chris ward

    Looks like the conditional declarations are the way to go.

    Bit of a shame, but an ingenious way to handle the issue and keep the document valid.

  • http://envisionext.com Tim_Rogovets

    It’s good to hear that MS at least worries on such issues and gives some recommendations.

    Conditional comments are a good alternative imho, but I think that only a small number of websites will move from css hacks to conditional comments when time comes.

    I wonder if any of the web design firms will contact their past clients and say that now their site needs to be updated, otherwise the site will be (sometimes seriously) broken in IE7.

    I think that MS should be really careful with such moves. If they decide to fix the bugs that helped us write css hacks…. – then they should fix the bugs that forced us to write these hacks. This way everything is ok in IE7 and everything remains ok in IE5+..

  • http://kaliszczak.pl Kali187

    So… Problem is a bit funny for me.
    Ok. IE understands some more selectors. That’s good.
    Main problem is that it still can’t display it right way.

    If it could render everything properly… Ok. stop dreaming :/

  • Sojan80

    I think the thing that gets me is they have been talking about/touting IE7 for well over a year and still no projected release date of the public beta, much less the final version.

    If I could get one point across to MS it would simply be “Okay, hype is all fine, well, and good and you’ve had more than you’re share of fun with it; so, show me the product already and let me see if it truly is better for myself.”

  • Pingback: Geen CSS hacks meer voor IE 7 ? | Nono

  • Bumbo

    They didn’t care about our complaints and years and years of complex describing of IE’s bugs and asking to remove them. Now they ask us, to abandon the ways, which we was forced to use by their attitude. That is what i call arrogance!

  • WebDevGuy

    What if MS asked developers to stop designing for FireFox or Opera, would we? Of course not. We design for audience based on what they might use. If, in 2 years, IE 7 is ubiquitous we will likely develop for that standard.

    Which web client we design for is audience-driven.

  • http://www.lowter.com charmedlover

    You know what would be easier? Just fix all of those CSS errors in your browser and suport it correctly so that we don’t have to use them. Why the hell would I do what Microsoft has to say when they don’t even consider web develoopers, and only cater a bit to us so that we don’t entirely move people away from them?

  • nick

    This solution makes absolutely no sense. This solution is just another IE-specific hack. If Microsoft came up with a real solution, it wouldn’t involve any type of hack, whether it was in the document or the CSS or a JavaScript file. Why can’t Microsoft’s real solution to the problem be to fix the CSS rendering bugs and actually render a page the way every other modern browser does. Web developers shouldn’t have to write web pages for specific browsers. Rather, we should write to a specification. Although this new method might be cleaner than a CSS hack, it’s still a hack.

  • Andy Moss

    If Microsoft really cares about this, they will release patches for IE6 to make it adhere to W3C standards. But of course, I severely doubt this will ever happen.

    this is not the answer other wise we need to do even weirder things with conditional comments…

    anyway IE5 was a darn site better than NS4, its only competitor back then, just as ff is infinatly better than ie6 now. as the rather pointless acid test shows not even ff is perfect and im sure safari has its fair share of problems. the web is ours, so just code for “our” users not “their” browsers.

  • TonyFerlazzo

    Quit your bitching and moaning. It is what it is. Older versions of IE are not going to get fixed. So, if you want to support them and still support IE 7, with its presently full list of unknown new features, then here is a solution.

  • http://www.designity.nl peach

    ^^^ wel said ^^^

  • ProClub

    Well, my REAL problem is, I cannot install both IE7 and IE6 on one computer. How should I test my homepages with selectors if I don’t have both versions? :D This is LOL.

    ProClub
    proclub AT karinthy DOT hu

  • http://www.deanclatworthy.com Dean C

    They’ve fixed the star selector hack. That’s the only one I use for IE anyway. So, in theory, there shouldn’t be a problem for me in IE7 :)

  • lajkonik86

    Lol, this will cause pages to look messed up in IE7
    Atleast if people won’t update their coding, which many old sites won’t

    :) who knows, more pages might actually work for firefox then IE

  • http://www.realityedge.com.au mrsmiley

    I have computers running IE7 and IE6 (not simultaneously) and I’m happy to say I haven’t had to change a thing in the primary web app I work on. Then again, that could be because I haven’t resorted to using style sheet hacks. I’ve actually had more problems with Firefox 1.5 Beta 1 than IE7 Beta 1 so far. Granted IE7 has some weird interface issues, but the renderer seems pretty good so far with the current list of changes.

    I’m curious though what effect conditional comments have on page validation tests. Do they still pass?

  • http://www.sitepoint.com/ Kevin Yank

    I’m curious though what effect conditional comments have on page validation tests. Do they still pass?

    Yes, they’ll validate. That’s the beauty of conditional comments: to a compliant HTML/XML parser, a conditional comment (and its contents) looks just like a standard comment (i.e. it starts with <!-- and ends with -->).

    In many respects, conditional comments resemble microformats–a standard built on a standard.

  • http://www.321resources.com 321web

    Wouldn’t it be funny if we designed our sites to detect browsers and tell people this site can only be properly view in Mozilla FF. I have seen the same thing telling me that I need IE to view a site but never FF. I wonder how much of the web would switch when they tried it out?

  • http://www.deanclatworthy.com Dean C

    mrsmiley – that’s because no CSS hacks have been applied yet. All the changes come in Beta 2 :)

  • Pingback: J ‘K’ K » IE7 chaosu początek

  • Dr Livingston

    Well… well… well… Hasn’t Microsoft got a damn hard neck to ask [I]us[/I] to change things… They’ve got a damn cheek I can tell you.

    If they had released a browser that actually complied with the standards in the -BEEP- first place with out bugs, then we wouldn’t be in this -BEEP- -BEEP- mess. Would we?

    You can imagine what I would like to print in response to Microsoft, but I can’t since this isn’t really the place for me to begin to express my anger and resentment :mad:

  • Dr Livingston

    > Wouldn’t it be funny if we designed our sites to detect
    > browsers and tell people this site can only be properly view in
    > Mozilla FF.

    The choice is yours… If it is something that you believe in doing for the greater good of the web – screw microsoft in other words – then go for it.

    Unfortunately in doing so you will alienate your visitors, depending on your sites business, this could be costly. If I could get away with it, then yes I would do just that. If the clients browser is microsofts internet explorer, then redirect to a blank page with a link pointing to mozilla.org :D

    Proberly with a very blunt message – internet explorer sucks at web standards, so upgrade to firefox ;)

  • mikehowell

    I think MS needs a reality check and all the people saying WE, the developers, need a reality check need to stop living in Microsoft’s reality and come back to planet. IE6 was fine… in 2001/2002. I only use it to access my Sony Station account for Star Wars Galaxies Forum. I develop ONLY for Standards and use ONLY Firefox/Mozilla and occasionally Safari. I think IE7 will be nice once it comes out but I am not into the mood to switch again… I will test it out just as I do Safari but I Firefox is my browser until it goes down the tube like IE6 did.

  • http://www.atexmediacommand.com mcahill

    It really would have been nice if they’d provided this bit of info years ago when the issue first arose. Now I am supposed to go back and “fix” the work arounds I had to do to make IE 6 work on all my sites? Are they going to pay? My clients?

    Also, their little “ie only” css trick won’t account for Macs – so I’ll still have to hack, won’t I?

    And why should I as a webmaster have to maintain numerous separate versions of style sheets? I think one standards adherent sheet should be enough.

  • http://www.dyeweb.com porkozone

    Sounds to me like MS is just going on record so they can cover their butt when their new browser breaks hundreds of existing sites…they can come out with a press release at that point stating that they gave web designers an option that wasn’t utilized.

    Who is the average person going to believe? Unfortuantely MS most likely…

  • Dr Livingston

    > they can come out with a press release at that point
    > stating that they gave web designers an option that wasn’t
    > utilized.

    I wouldn’t even go as far as to say it’s an option. Not a viable option anyways :mad: -BEEP- -BEEP- -BEEP- :mad:

  • Anonymous

    The entire point being that from now on we may actually be able to make websites that CAN render correctly on all browsers. I dont care if I have to change my code for that.

    Well that and they’re trying to cover their asses.

  • mwolfe

    i think microsoft should just give up and bundle firefox with windows instead of IE….

    but that’ll never happen.

    on the bright side (eventually) it should be a lot easier to make tableless designs, without hacks, that work in IE browsers.. of course we’ll have to wait until everyone updates..

    I remember seeing those tags all the time that said ” this site works best in IE ” and for some reason i saw that so much i used to think IE was the only real web browser and the others were just trying to be like IE.. As I started learning CSS I realized differently. I think a lot non techy people still have that notion, that IE is the only real browser..
    its a shame. Bring on the firefox links.. or opera.. i just dont want to see anymore blue e’s on the net

  • Pingback: CSS Best Practices — SyntheticRabbit

  • Pingback: Mind Chatter » SitePoint Blogs » Microsoft says: de-hack your CSS

  • http://www.crystalcleardesigns.com ccdesigns

    Ohh . . . the development of standards. Such a headache. As I don’t want to get into the nuts and bolts discussion on this very day – a possible recommendation for those looking to have well tested sites:

    http://www.browsercam.com

    If you create production quality websites on a regular basis, the service is well worth the cash. I am sure they will have an IE7 browser when it is released and you will be able to thoroughly test your site there for all the expected and unexpected new bugs.

  • Anonymous

    Write in standards ,validate your HTML/XMTML and CSS. Dont care about buggy browsers.

  • bkemper@providen

    It is not practical for me to edit every page of every site that uses my stylesheet, and some partner sites only let me change the single css file and not any html. What I need is a conditional statement to use within the CSS, instead of just in the HTML. Of course, I would have less need of hacks and conditionals is IE7 only used the standard box model (or the box-sizing CSS 3 declaration), and eliminated its bugs with floating et al.

    http://channel9.msdn.com/wiki/default.aspx/Channel9.InternetExplorerProgrammingBugs

  • bkemper@providen
  • EOBeav

    It amazes me how MS takes the fun out of web design. Kevin, your article here is telling me that we just need to add another layer of hacks (ie7.css) onto the hacks that are already there. Is there ever going to come a day when a single, validated page with no hacks will work in both IE and FF?

  • Pingback: SitePoint Blogs » Cross-browser XForms

  • theharmonyguy

    I disagree with Microsoft on this one. My approach has been to code my CSS according to specs, then if specific changes are needed for IE5.x or IE6, I use the * html hack. Most of my changes are for IE5.x, and I use hacks within the * html definition to undo those changes for IE6. This way I don’t have to maintain multiple CSS files and my changes are right there with my original code, though still separated.

    As I recall, the bugs that I’ve targeted are ones that IE7 will fix. And even if there are still issues to fix, as has been mentioned, that would happen with conditional comments anyway, since none of us really know what changes to make to our code until IE7 gets here. If I still need to hack for it, I may have to use a conditional comment for IE7 – but I prefer to use * html for IE5-6.

  • angry developer

    With the 10.4.3 update, Safari is now the only browser to pass the acid 2 test. Atleast some major companies are moving in the right direction. Not to discount Mozilla foundation and Opera, they are doing a great job as well. This idea really upsets me and I agree with the posts above. Should I charge all of our clients to update this? We have been in business for 10 years. Do you know how long that will take to add that to every page? Putting it in the css would have been better but still a pain. Kevin Yank how can you just accept this almost like awesome news. Its like you are saying “Stabbing yourself in the hand is awesome guys!” Does it even matter what we say as developers? Doesn’t seem like some people listen.

    This is where you need to hold back a product and make it work first, then release. I started out with microsoft back in the DOS days and learned to love computing because of them. But as the years have gone buy they have forced me to find different software because theirs wasn’t up to par. What happened to the Microsoft that pioneered the way instead of crapping on it? Now I’m a Apple convert and loving every minute of it.

    Sorry to rant but oh well.

  • wolfix

    If a site is built to comply with FF1.07 shouldn’t it comply with IE7 which would not require any hacks or conditional statments?

    I build all my sites to comply with FF1.07 and IE6 so I’m hoping I wont have to make any changes to my old sites and IE7 will render scc just like FF.

  • rick_g22

    Quote from the IE blog:

    In IE7, we will fix as many of the worst bugs that web developers hit as we can, and we will add the critical most-requested features from the standards as well. Though you won’t see (most of) these until Beta 2, we have already fixed the following bugs from PositionIsEverything and Quirksmode:

    * Peekaboo bug
    * Guillotine bug
    * Duplicate Character bug
    * Border Chaos
    * No Scroll bug
    * 3 Pixel Text Jog
    * Magic Creeping Text bug
    * Bottom Margin bug on Hover
    * Losing the ability to highlight text under the top border
    * IE/Win Line-height bug
    * Double Float Margin Bug
    * Quirky Percentages in IE
    * Duplicate indent
    * Moving viewport scrollbar outside HTML borders
    * 1 px border style
    * Disappearing List-background
    * Fix width:auto

    In addition we’ve added support for the following

    * HTML 4.01 ABBR tag
    * Improved (though not yet perfect) fallback
    * CSS 2.1 Selector support (child, adjacent, attribute, first-child etc.)
    * CSS 2.1 Fixed positioning
    * Alpha channel in PNG images
    * Fix :hover on all elements
    * Background-attachment: fixed on all elements not just body

    (End of quote)

    Seems to me that we’re safe, guys. There was a lengthy discussion on slashdot about this.

  • http://www.limshengming.com pocketsized

    I’m a bit confused. I use the child-selector hack (eventhough I wouldn’t call it a hack) but in a slightly different way from the Slashdot example given in the IEBlog post.

    Instead of

    html > body #footer .search { margin: 0; }

    #footer .search {
    text-align: left;
    position: absolute;
    top: 0;
    left: 1em;
    margin: -1.6em 0 0 0;
    padding: 0;
    }

    i use something along the lines of

    #footer .search {
    text-align: left;
    position: absolute;
    top: 0;
    left: 1em;
    margin: -1.6em 0 0 0;
    padding: 0;
    }

    html > body #footer .search { margin: 0; }

    By switching the order of declarations, it would seem to me that all my bases are covered (assmuing that IE7 does interpret the child selector and renders the corresponding code properly). In essence, everything in the child selector block re-defines the properties in the preceeding block for non-IE6.0 browsers. Yes, it can mean redundant code (like having to re-declare the height property to simulate min-height in IE) but I’m fine with that.

    This was actually brought up by the very first comment but I don’t have access to the IE7 beta so I’d just like someone to confirm if my above method is fine.

    While I have nothing against conditional comments I find it a tad troublesome. In the event that IE7 has some bugs fixed by IE8, that would mean I’d have to add another conditional comment for IE8 in all my pages. That means manual “Copy & Paste” labour (unless I have server-side scripting). I mean, MS is already asking us to add a conditional comment for IE7 so I how isn’t this possible?

  • http://allbutt.net/mike mikeall

    I will be striving to get even more people to use other browsers now! This has the potential to cause big headaches.

  • baseiber

    What about when we want something to work for everything except IE browsers.

    example:

    
    h1 
    {/* for ie only*/
         filter:shadow(color=#001933,direction=-115);	  
    }
    	
    h1:before 
    {/* creates shadow for non-ie browsers */
    	display:block;
    	margin:0 0 -1.3em .15em;
    	padding:0;
    	color:#001933; 
    	content:'some text';
    }

    I prefer how the IE shadow looks but it’s not supported by other browsers.

  • http://www.sitepoint.com AlexW

    What about when we want something to work for everything except IE browsers.

    In the case you mentioned the browsers would happily ignore each other. wouldn’t they? IE doesn’t understand ‘:before’ and the others don’t get ‘filter:’.

    Hupothetically speaking, there is a ‘not’ operator too () but it’s only really useful for telling which IE should read the rule — not which browser brand.

    To target code to only non-IE browsers I’d think you’d write it to all browsers, then cancel it out inside the conditional comments.


    <style text="css/text">
    /* All browser code */
    ...
    <!--[if IE]>
    /* reset code to defaults for IE */
    ...
    <![endif]-->
    </style>

    Personally I wouldn’t use the ‘before’ hack to do shadows. Non-scalable. Needs a new rule for each heading shadow.

    I published a DOM based method to do text shadows earlier in the year that renders a much nicer finished product and is as scalabe as you want it to be. Non JS browsers leave the text plain. No disaster.

    It’s only drawback is an accessibility issue — multiple instances of the heading text that all get recited like an echo. But since all screen readers that I know of use IE as their rendering engine (so we assume screen readers understand conditional comments too) you could use the IE shadow filter there and the DOM method everywhere else.

  • baseiber

    I think IE7 is suppose to support “before”. Frankly I’d prefer to use text-shadow as it’s suppose to be a standard but only Safari supports it.

  • http://www.sitepoint.com/ Kevin Yank

    I think IE7 is suppose to support “before”.

    I’m afraid not. Generated content (using the :before/:after pseudoclasses and the content property) has been confirmed as one of the features that won’t make it into IE7.

  • Nick Gagne

    There is a css hack that works for all versions of internet explorer, including ie7. You can read about it here:
    The IE7 CSS Hack

  • chad

    So, if I’m getting this right…

    I can make a site that works in everything except IE, or I can make a site that works only in IE, so the answer is to essentially make two versions of my site by including hacks or filters that cause my code to be read differently. Making two versions of the same site is a pain.

    Microsoft’s answer with IE7 is essentially: That’s an easy fix! Just make two versions of your site!

  • bkemper@providen

    You’re clearly not getting it right.

    You do not have to make two versions of your site. Instead, they want us to add code (the “conditional” statements) to every page that links an Explorer-only CSS file into that page. There would be only one extra CSS for the whole site, or perhaps a couple more if you wanted to use the same method to target other versions of Explorer.

    And then when IE version 7.5 or 8.0 or whatever comes along, you get to do this all over again, editing every single darn page in every site you’re responsible for, to link to its own separate IE-only CSS file(s).

  • http://www.sitepoint.com/ Kevin Yank

    And then when IE version 7.5 or 8.0 or whatever comes along, you get to do this all over again, editing every single darn page in every site you’re responsible for, to link to its own separate IE-only CSS file(s).

    Agreed, this is the painful downside of conditional comments. If Microsoft were smart, they’d include a similar mechanism within CSS itself (an @x-browser rule, for instance), which would permit filtering within the CSS code itself.

  • bkemper@providen

    Yes, something like this is what I was thinking:


    /*[if lte IE 7]/
    .ieOnly { margin-left:2px; }
    /[endif]*/

    …which would be great, except it would kind of need another way of commenting within that block, since */ would close off what other browsers would see as comments. Maybe they could substitute a tilde for the asterix or something.