Billups Design

As IE 6 starts fading into the soft glow of the sunset in the distance we need to start looking ahead to IE 8 compatibility. Internet Explorer 8 was released a few weeks ago and according to the W3Schools.com its already climbed to 1.4% market share. There’s no doubt its going to gain traction and become one of the most used browsers on the planet. So what new quirks of IE8 are out there, what about our good friends quirks and standards mode, and what about Microsoft’s latest proprietary IE 8 features?

CSS Improvements

The day IE 8 came out we posted a blog entry detailing how it stacks up against the latest Firefox and Safari builds out there and were quite surprised how well its doing. Now I’ll be the first to admit that while we all begged for CSS 2.1 implementation, its just no longer good enough. All the other more “standards compliant” browsers have moved on to CSS 3. However, CSS 2.1 is a start and we should be aware of all the things we can now use in IE 8 that have been tucked into that “doesn’t work in IE” frame of mind.

:before and :after psuedo classes

Some other psuedo elements that were added are :focus, :lang(c), and :active (not applies to all elements, not just the a element).

New attributes for generated content:

content, counter-increment, counter-reset, and quotes. This can allow you to do something like this:

Three words: display: table-cell;

This allows any element to have the same display properties as a table cell. I know tables are bad for layout, but what about all the great layout properties, e.g. like easy vertical centering. There’s been a whole book written about this property alone.

Other table related layouts supported are table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, and table-caption.

Floats.

Straight from the horse’s mouth,

Many changes have been made to float behaviors, fixing many of the most troubling float issues encountered with prior versions of Internet Explorer, including those caused by the requirement of the hasLayout property. The hasLayout functionality has been removed in Internet Explorer 8. The following are some of the issues fixed:

Cleared elements don’t clear other nested floats when they don’t share a parent.

Cleared elements after floats have doubled top padding.

Quirks, Standard, and Compatibility Modes.

With all the advancements that IE 8 has made there is still obviously going to be some crazy IE 8 bugs, I’ve already noticed some issues with fieldsets and legends displaying differently in Firefox/Safari and IE 8 and Teddy Zetterlund has found some other bugs concerning fieldsets and legends . So what are the latest developments on modifying your pages just for IE 8?

Now with IE 8 there is a new browser to use in conditional comments

If you don’t want to put in the time quite yet to get your site IE 8 ready you can simply specify the document compatibility mode with one line of html.

This will cause IE 8 to mimic IE 7 when rendering your page. It might not be perfect, but in most cases you should take care of any rendering bugs that IE 8 is introducing on your pages.

To explain this tag a little better you can replace IE=EmulateIE7 with any of the following:

• IE=Emulate IE8 – This is the default mode for IE 8 that renders the page according to IE 8’s rendering engine if there is a <!Doctype>, if no <!Doctype> is declared than your site is displayed in quirks mode which is similar to IE 5 rendering.
• IE=EmulateIE7 – Renders content as if it were displayed in Internet Explorer 7 if you have a <!Doctype> declared, if no <!Doctype> is declared than your page is displayed in IE 7’s quirks mode.
• IE=5 – renders content as if it were displayed by Internet Explorer 7’s quirks mode, which is very similar to the way content was displayed in Internet Explorer 5.
• IE=7 – renders content as if it were displayed by Internet Explorer 7’s standards mode, whether or not the page contains a <!DOCTYPE> directive.
• IE=8 – renders the content with the IE 8 engine regardless if you have a <!Doctype> declared.
• IE=edge – This will tell Internet Explorer to render the page in the highest mode available. So when IE 9 comes out it’ll use IE 9’s engine, and IE 10, and so forth.

NOTE: This will not change the user agent string, if you depend on the user agent string you’ll need to update your code for that as well. IE8 specific instructions are at the MSDN.

Proprietary Features

CSS expressions are depreciated in IE8 and are no longer supported in standards mode. These have been pretty performance heavy as outlined by Yahoo’s Optimization page, and as noted by Microsoft the main usage of these were to simply workaround bugs in IE’s own CSS shortcomings, most of which have been fixed in IE 8.

IE 8 and the -ms property prefix. IE 8 introduces quite a few new css properties that aren’t standardized yet, and like Safari and Firefox, MS has added the -ms prefix to those properties. There’s not many new properties that weren’t available before, but now MS is recommending that you put -ms in front of the following properties, note that filter and behavior are included here.

• -ms-accelerator
• -ms-background-position-x
• -ms-background-position-y
• -ms-behavior
• -ms-block-progression
• -ms-filter
• -ms-ime-mode
• -ms-layout-flow
• -ms-layout-grid
• -ms-layout-frid-char
• -ms-layout-grid-line
• -ms-layout-grid-mode
• -ms-layout-grid-type
• -ms-line-break
• -ms-interpolation-mode
• -ms-overflow-x
• -ms-overflow-y
• -ms-scrollbar-3dlight-color
• -ms-scrollbar-arrow-color
• -ms-scrollbar-base-color
• -ms-scrollbar-dark-shadow-color
• -ms-scrollbar-face-color
• -ms-scrollbar-highlight-color
• -ms-scrollbar-shadow-color
• -ms-scrollbar-track-color
• -ms-text-align-last
• -ms-text-autospace
• -ms-text-justify
• -ms-text-kashida-space
• -ms-text-overflow
• -ms-text-underline-position
• -ms-word-break
• -ms-word-wrap
• -ms-writing-mode
• -ms-zoom

As much as we would all love to procrastinate on all things IE, it’s probably a good idea to at least throw it into compatibility mode if not do some serious browser testing in IE 8 to ensure it’s all working as expected. It took IE 7 about a year to climb the charts into being one of the top 3 browsers and it’s reasonable to expect the same from IE 8. So its best to get ahold of it early and iron out all the kinks before its too late.

Last 5 posts by steve

• Why 2010 is Going to be a Great Year for HTML/CSS Developers - February 5th, 2010
• Being a More Efficient Web Designer - October 18th, 2009
• Taming Firefox's Button Element - October 5th, 2009
• Flash & HTML Website Integration - Best Practices - May 1st, 2009
• Review: MacRabbit's Espresso - April 14th, 2009