RE: Call to action: The demise of CSS hacks and broken pages

Paul Kinlan
There is an interesting post over on MSDN Blogs (IEBlog) by the IE Team. It discusses that some of the CSS hacks that people have used to get around some of the issues with IE5 and IE6, wont work in IE7. They appear to be breaking changes so many peoples web pages will have to be changed to get the system working correctly. If you are a web developer and expect to target IE7, then I would recomend that you take a quick look to see if you are affected by the changes.

Here is a quick snippet of the IETeams Blog Entry.

We’re starting to see the first round of sites and pages breaking due to the CSS fixes we have made. We would like to ask your help in cleaning up existing CSS hacks in your pages for IE7. It is has been our policy since IE6 that under quirks doctype we will not make any behavioral changes so that existing pages will continue to render unmodified, but under the strict doctype we want to change behavior to be as compliant as possible with the web standards. For IE7, we introduced new CSS functionality (see Chris's blog post for the full list) and cleaned up our parser bugs. This leads now to several CSS hacks failing. If you are using IE7 (you are MSDN subscriber or received a copy at the PDC) you may notice major sites breaking due to the use of CSS hacks and the strict doctype.  


Example how easy it is to fall into the CSS hack trap


I was very happy to hear that Slashdot has their page rewritten using clean HTML 4.01 with a full complement of CSS. I immediately opened up IE7 to see how it would look like. It looked very good, but I noticed an odd behavior with their search box being moved into the footer of their page. I opened up the IE dev toolbar started to take a look, and found:

...


Call to action: Please check your pages


Here is a list of common CSS hacks to look out for (please also consider their variations):



  • html > body - http://css-discuss.incutio.com/?page=ChildHack
  • * html - http://css-discuss.incutio.com/?page=StarHtmlHack
  • head:first-child + body - http://centricle.com/ref/css/filters/tests/owen/
  • head + body - http://www.dithered.com/css_filters/css_only/ head_adjacent_sibling_body.html
  • body > element - http://css-discuss.incutio.com/?page=ChildHack

    • We ask that you please update your pages to not use these CSS hacks. If you want to target IE or bypass IE, you can use conditional comments .


    ...


    I would prefer a CSS solution too but currently there isn't one in the CSS standard.  Please help us spread the word so it is an easier decision for us in the future to make improvements to our standards implementation (even if it means breaking customers).  


    Thanks,


     - Markus Mielke

    [[posterous-content:iDtIjpfJjetjmyfyunHc]]

    [Via MSDN Blogs]