What’s New for CSS in Beta 2 Preview?

We have heard all your feedback asking us for full CSS compliance. With the now public available Beta 2 Preview build on XP, we get a big step closer to this goal. Chris talked about our priorities for IE7 before, but I want to give more detail on our work with CSS.  We had 3 objectives, in priority:

1. Fix some really nasty bugs posted on sites like positioniseverything.net
2. Revise parts of our existing CSS implementation to be true to the spec
3. Add the most-requested new CSS functionality to IE

Fix some really nasty bugs:

In IE7 we’ve been working hard to address the bugs in our engine:

• We fixed the most of the bugs reported on http://www.positioniseverything.net/explorer.html  (click on the links for detailed explanation of the bugs)
• We addressed several relative positioning issues (relative positioned elements do not have layout, an internal IE data structure, that sometimes caused calculation errors)
• We made the HTML element truly independent of the Body (Scrollbars are now belonging to the Canvas and you can align absolute/fixed positioned elements next to them)
• We addressed the auto alignment issue so you can more easily build 3 column layouts
• Resolved issues with 1 px borders

Revise existing CSS implementation to be true to the spec:

Our second priority was to complete or adjust our implementation to be in accordance with the CSS spec.

• We made major changes to our box model to support overflow correctly on non-replaced block level elements and inline-block elements.
• We enabled :hover on all elements, not just on <a> tag
• We make background-attachment:fixed work on all elements, not just body
• We fixed a number of parser bugs like * html, _property and the /**/ comment bug

Add most-requested CSS functionality to IE

Finally, for IE7 we added:

• Fixed positioning. This allows interesting layouts of sticky menus and sidebars.
• Enhanced Selector support: first-child, adjacent, attribute, and child selectors
  • As we were implementing attribute selectors we also added support for CSS 3 attribute selectors: prefix, suffix and substring.

Compatibility and our updated CSS behavior

Obviously, we have heard the feedback asking us to be more standards-compliant in our rendering behavior.  We must balance this ask with the need of our customers (and end users) to have their pages not be broken. To find a balance we introduced a strict mode in IE6 that lets authors opt in into the more standards compliant rendering (and, if you’re putting in a modern DOCTYPE declaration, you’re being opted in automatically).  Pages authored under non-strict mode (or “quirks mode”) will not change behavior in IE7 – so the fixes we’ve done to be more CSS compliant won’t appear under quirks mode. However, if your content is under “strict mode”, our behavior is more standards compliant, and your pages may break - for example, if you use some of the CSS hacks or rely on our old incorrect overflow behavior. We understand the pain this might cause in the short term but we believe a move to a more standard compliant implementation benefits everyone in the long run.

Last but not least, big thanks to the community: here on the blog (yes, we are paying attention to the comments), the WASP team and those out on the web reporting CSS issues with IE. We know we have a long road ahead but I am very excited with the progress we are making.

 - Markus Mielke

Update: We now have a MSDN article that walks you through CSS compatibility issues: http://msdn.microsoft.com/library/default.asp?url=/library/en-us/IETechCol/cols/dnexpie/ie7_css_compat.asp