I was looking into some of the IE8 issues we are having, and found this great site full of Microsoft white papers on IE8.
http://code.msdn.microsoft.com/ie8whitepapers
There are a lot of nice tips and tricks, both about what to be aware of that might have broken your website in IE8, but also tips and tricks on how to optimize your code to utilize some of the new features of IE8.
Opacity NOT supported
IE8 beta 1 does not support adding semi-transparency to any object, neither by using the proprietary filter object or using the CSS3 opacity style property. However, I found this interesting comment in the CSS2.1 compliance paper:
While one of Internet Explorer 8 Beta 1 for Developers' main goals is CSS 2.1 compliance, it is also forward looking towards CSS3. […] Internet Explorer 8 hopes to implement some of the most requested CSS3 features by web developers and designers'.
'opacity' is part of CSS3, and there is a feature request for it on Microsoft connect, and has already gotten a fair amount of votes. Although everyone cannot submit bugs, everyone can vote, so go vote for this missing feature here!
See update here
VML NOT supported
Microsoft heavily Improved Namespace Support, but I think they didn't think about where that leaves VML. Basically there is no VML support (or SVG for that matter). For GIS apps this is a must. I would prefer seeing an SVG engine instead (saves us having to make two graphics APIs), but VML will do. You can vote for it here.
Here are a couple of things I found interesting in the white papers that I post here for my own reference, but you might find them useful too:
Outline (CSS2.1 compliance paper)
Outline allows you to highlight an element without affecting its size or the layout of the rest of the web page. You can think of outline as an enhanced border that is allowed to overlap other elements without changing the layout of a page. An outline is drawn right outside the border edge, and unlike the border attribute, it won't cause the size of objects to change and move around.
Syntax is the same as with border. Example:
<div onmouseover="this.style.outline='5px solid yellow';" onmouseout="this.style.outline='';">
or
myElement.outline = '5px solid red';
An interesting property of ‘outline' is the ability to set the color to invert. This causes the outline to take on the color which is the inversion of the pixels it is overlapping. This guarantees that the outline is always visible, no matter what type of element (even an image) it overlaps. Here is an example of an element with color set to invert: div { outline: thick solid invert }
document.getElementById (DOM Core Improvements)
In Internet Explorer 7, this method searches for and returns the first element that has an ID attribute or name attribute that case-insensitively matches the parameter string.
In Internet Explorer 8, this method finds only elements that have ID attributes that match the given parameter value in a case-sensitive manner. (ID attributes should be interpreted as case-sensitive as per the HTML 4.01 specification).
If you tested with FireFox and do the same in both browsers, this might not be an issue for you, since FireFox is case-sensitive and doesn't use the name tag.
Selecting elements by class (Selectors API)
You can now look up elements very fast by using their class name. So if you know you are doing a lot of searching for specific elements, give them a unique class name and search for them using:
var oneElement = document.querySelector('myClassName');
var elementCollection = document.querySelectorAll('myClassName');
Search for multiple classes at once:
var elementCollection = document.querySelectorAll('myClassName1, myClassName2');
You can limit the scope of the search by using the querySelector/querySelectorAll methods on the individual elements.
Neat! This is one API I hope the other browser vendors will copy!
Switching to IE7 mode (Selectors API)
You probably already know this one, but add this metatag to the page, and everything that works with IE7, should work with IE8 (but this is cheating ;-)
<meta http-equiv="X-UA-Compatible" content="IE=7">
Looping through elements within a node (Platform Performance Improvements)
Modify any chain of lookups to cache the intermediate values, so that the final lookup is the only one made repeatedly (this one is not really new to IE8, but IE8 introduces some internal caching of nodes to improve look-up).
Bad:
function badLoop(div1) {
for(var i=0; i < div1.parentNode.childNodes.length; i++) {
var node = div1.parentNode.childNodes[i];
// Do something with node.
};
}
Better:
function betterLoop(div1) { // Cache length and array to prevent multiple lookups.
var childLength = div1.parentNode.childNodes.length;
var childNodes = div1.parentNode.childNodes;
for(var i=0; i < childLength; i++) {
var node = childNodes[i];
// Do something with node.
};
}
Use the nextSibling method to traverse the children of an element. For example, improve betterLoop with this (nextSibling is a new property, and this is very similar to the best practice for traversing XML nodes in .NET):
function bestLoop(div1) {
for(var node = div1.parentNode.childNodes[0]; node != null; node = node.nextSibling) {
// Do something with node.
}
}
String concatenation (Platform Performance Improvements)
We were taught to use Arrays for joining strings efficiently. Now we don't have to worry about that anymore:
Before:
var smallStrings = new Array(); // Fill array with smaller strings
var largerString = smallStrings.join('');
After:
var smallString1 = "string1";
var smallString2 = "string2";
// String concatenation using the "+" operator
var largerString = string1 + string2;
Working with arrays (Platform Performance Improvements)
Array now comes with built-in Push and Pop methods.
var standardArray = new Array();
standardArray.push("Test String");
standardArray.pop();
More connections for broad-band users (Better AJAX Development)
So here's actually one where Microsoft breaks with the standards:
"An increasing number of users have broadband connections, so client-side bandwidth is not always a gating factor for performance. Typically, the time required to set up a connection and send a request dominates the time spent retrieving individual objects. The limit of two connections was set by the HTTP 1.1 specification (RFC 2068). By increasing the number of concurrent connections, Internet Explorer 8 Beta 1 for Developers allows Web sites to amortize that cost and churn through the list of pending objects more quickly, leading to an increase in user-perceived download time. Internet Explorer 8 Beta 1 for Developers consequently includes logic that detects whether the connection is narrow-band or broadband and increases the number of connections per host to six if it's a high speed connection. This maximum number of connections applies to any connection to a Web server, not just to downloads."