Web Devout tidings

I have now finished testing the CSS 2.1 and CSS 3 support in Internet Explorer 7. The results are more significant than the previously reported HTML support improvements. CSS was the primary area of layout engine development in Internet Explorer 7, so this is where most of the layout engine changes reside.

Here are the major changes in Internet Explorer 7 as far as CSS 2.1 and CSS 3 support:

• !important is now properly supported.
• Much better support for selectors, including universal selectors, child selectors, adjacent sibling selectors, CSS 3 indirect adjacent sibling selectors, and all attribute selectors in CSS 2.1 and CSS 3. This is better support than Opera 8.5, although still behind Firefox 1.5 in some areas.
• More correct pseudo-class and pseudo-element grammar implementation.
• :first-child is now supported.
• :hover is now supported for all elements, although not perfectly.
• Backgrounds now correctly include border region.
• dotted border style is now properly supported for one-pixel-wide borders.
• bottom and right can now be used to stretch the box’s dimensions.
• Some float bugs were fixed.
• Box sizes are now properly constrained by the height and width properties.
• Several margin bugs have been fixed.
• max-height, max-width, min-height, and min-width are now mostly supported.
• overflow is now correctly supported.
• position:fixed is now supported.
• z-index property now behaves correctly with select elements.

Here are some things I was disappointed about:

• It still doesn’t support combined class selectors like p.foo.bar{} and still has other bugs with class and ID selectors.
• :hover has some bugs that cause the hover state to sometimes remain even after the mouse has moved away.
• :before and :after still aren’t supported, meaning counters, content, and quotes also aren’t supported.
• inherit (one of the fundamental features of CSS) still isn’t supported.
• Borders still aren’t supported for table row groups.
• border-spacing, caption-side, and empty-cells still aren’t supported.
• There was a nasty regression regarding the clear property that prevents elements from clearing floats under certain conditions.
• clip still isn’t supported.
• There were no improvements to the display property, meaning CSS table displays still aren’t supported.
• Some margin bugs remain.
• outline still isn’t supported.
• There are still a lot of problems with the vertical-align property.
• There were no improvements to the print properties.
• Alternate stylesheets still aren’t supported (a requirement for CSS conformance).
• There is still no option to disable author stylesheets (another requirement for CSS conformance).
• Other than basic selectors, there were no improvements to CSS 3 support. There is still no support for any CSS 3 pseudo-classes or pseudo-elements.

A lot of painful problems were fixed, but Internet Explorer is still miles behind the competition in CSS support. According to the Web Devout tables, Internet Explorer 7’s CSS 2.1 support has risen from 54% to 65%, compared to Firefox 1.5’s 93% and Opera 8.5’s 94%. Due to the added CSS 3 selector support, overall support for CSS 3 changes has risen from 7% to 13%, compared to Firefox 1.5’s 28% and Opera 8.5’s 8%.

The lack of support for inherit, :before and :after pseudo-elements, and table display values will continue to be thorns in the sides of web developers. Hopefully these problems will be fixed in Internet Explorer 8, which is planned for release within one year of the Internet Explorer 7 release.

I will test DOM support improvements next, although I haven’t heard of any changes in that area.

Edit: As a reminder, Microsoft has previously announced that the latest build of Internet Explorer 7 is layout complete, meaning no significant changes will be made to the webpage layout engine until the final release.