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:
html > bodydetails* htmldetailshead:first-child + bodydetailshead + bodydetailsbody > elementdetails
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).
Related posts:
- Support for IE6: It’s all About Accessibility With the release of IE8, there's excitement in the air...
- 5 Reasons to Avoid CSS Hacks and Conditional Stylesheets CSS hacks and conditional style sheets can cause more problems...
- How to Override Inline CSS Styles Inline CSS can be applied to any HTML element using...
- How To Style Your Type With CSS Jennifer demonstrates how to use CSS to style type and...
- Microsoft Slams Google Chrome Frame It's hardly surprising, but Microsoft is advising IE users not...
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.
October 13th, 2005 at 3:20 am
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.
October 13th, 2005 at 3:29 am
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.
October 13th, 2005 at 4:40 am
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+..
October 13th, 2005 at 5:16 am
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 :/
October 13th, 2005 at 5:57 am
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.”
October 13th, 2005 at 6:42 am
[...] Bron: IEBlog, SitePoint [...]
October 13th, 2005 at 6:54 am
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!
October 13th, 2005 at 7:15 am
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.
October 13th, 2005 at 7:31 am
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?
October 13th, 2005 at 7:32 am
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.
October 13th, 2005 at 10:25 am
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.
October 13th, 2005 at 10:47 am
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.
October 13th, 2005 at 11:02 am
^^^ wel said ^^^
October 13th, 2005 at 11:08 am
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
October 13th, 2005 at 2:47 pm
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 :)
October 13th, 2005 at 3:36 pm
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
October 13th, 2005 at 5:10 pm
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?
October 13th, 2005 at 6:33 pm
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.
October 13th, 2005 at 6:45 pm
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?
October 13th, 2005 at 7:52 pm
mrsmiley – that’s because no CSS hacks have been applied yet. All the changes come in Beta 2 :)
October 14th, 2005 at 5:15 am
[...] Microsoft says: de-hack your CSS Autor: Janusz W: Gdańszczanin w Krakowie, To i owo z sieci, (x)html i okolice, css, Warto przeczytać Komentarzy: [...]
October 14th, 2005 at 7:11 am
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:
October 14th, 2005 at 8:41 am
> 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 ;)
October 14th, 2005 at 8:54 am
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.
October 14th, 2005 at 9:10 am
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.
October 14th, 2005 at 12:37 pm
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…
October 14th, 2005 at 3:33 pm
> 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:
October 14th, 2005 at 6:19 pm
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.
October 14th, 2005 at 11:32 pm
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
October 15th, 2005 at 12:44 am
[...] Dealing with Internet Explorer is always at least a little unpleaseant, but the situation is considerably easier to deal with if you use Conditional Comments. I’m glad I came across this when I did. I don’t know how people get by without it. Basically, for any version of IE greater than 5, you can give IE any special stylesheet you want. You can really fine-tune it, and you don’t need to use hacks. Only IE understands conditional comments. And when IE7 comes out, you probably don’t want to be using hacks that might mess things up. The conditional comment that I use is this: [...]
October 16th, 2005 at 3:51 pm
[...] SitePoint Blogs » Microsoft says: de-hack your CSS [...]
October 17th, 2005 at 12:07 pm
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.
October 17th, 2005 at 1:10 pm
Write in standards ,validate your HTML/XMTML and CSS. Dont care about buggy browsers.
October 18th, 2005 at 11:12 am
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
October 18th, 2005 at 3:44 pm
Sorry, here is a link to IE’s current CSS bugs:
http://channel9.msdn.com/wiki/default.aspx/Channel9.InternetExplorerSupportforCSS
October 18th, 2005 at 3:46 pm
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?
October 21st, 2005 at 10:02 am
[...] And that’s just the tip of the iceberg. Until better standards are developed in this area, you’ll basically need a separate style sheet for each of the XForms implementations you wish to support. For this case, we can use Internet Explorer’s conditional comments feature to apply the FormsPlayer style sheet in that browser only: [...]
October 27th, 2005 at 6:02 am
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.
November 8th, 2005 at 6:33 pm
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.
November 8th, 2005 at 6:59 pm
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.
November 8th, 2005 at 7:24 pm
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.
November 8th, 2005 at 7:50 pm
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
i use something along the lines of
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?
November 8th, 2005 at 7:53 pm
I will be striving to get even more people to use other browsers now! This has the potential to cause big headaches.
November 9th, 2005 at 2:55 am
What about when we want something to work for everything except IE browsers.
example:
I prefer how the IE shadow looks but it’s not supported by other browsers.
November 9th, 2005 at 2:41 pm
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.
November 9th, 2005 at 9:46 pm
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.
November 10th, 2005 at 6:25 pm
I’m afraid not. Generated content (using the
:before/:afterpseudoclasses and thecontentproperty) has been confirmed as one of the features that won’t make it into IE7.November 11th, 2005 at 1:20 am
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
February 1st, 2006 at 10:08 am
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!
February 3rd, 2006 at 4:12 pm
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).
February 3rd, 2006 at 10:48 pm
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.
February 5th, 2006 at 8:47 pm
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.February 5th, 2006 at 9:02 pm