IE8 will be the only browser not to support opacity

I recently blogged about that IE8 beta1 currently doesn't have any support for the CSS3 opacity property or the alpha filters that is used in IE5.5/IE6/IE7. Microsoft had noted in one of their whitepapers that they would plan on adding some CSS3 support based on customer feedback. The lack of opacity is one of the most requested features in their bug tracking system, so natually I figured that they were going to add opacity to a future beta.

However, this week the IE team wrote that they are NOT going to include this in IE8 but will consider it for a future version.

This would make IE8 the only browser to not support any form of opacity, and "break" A LOT of exisiting websites, tools etc. that rely on this (including several of Microsoft's own websites and API's). I'm flabbergasted.

If you as me think this is wrong, go and sign up for the IE8 beta program and vote and comment on this issue.

Click here to sign up for the IE8 beta program. Afterwards you should be able to see, vote and comment on the opacity bug entry:

https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=331735

Update: Beta 2 just released and Scott Dickens had promised the filters would be back in IE8 for beta2. Doesn't seem like it though! (and why the filters anyway??? why not do it like everyone else and use opacity)

Internet Explorer 8 whitepapers


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."

Notes from Mix08

Virtual Earth announced during their session that they will release a Silverlight Control for embedding maps in your silverlight app. It will be interesting to see if the silverlight adds any benefit over the HTML/JS control.

Deep Zoom: This is an unmanaged part of SilverLight and not very customizable. The tilingscheme is hardcoded. You cannot create images larger than 4x4billion pixels. That's still enough for having a sub-millimeter precision image of the entire earth, so I think that should be sufficient!

The Steve Ballmer Keynote was very entertaining. It was more of a live interview than a keynote. Rumour has it that the questions he got really upset him, but he hides it very well. WATCH IT!

Other sessions worth watching:
Developing ASP.NET applications using the Model View Controller Pattern
Scott Hanselmans' presentation on WPF user controls was the best session that I attended, and also very entertaining. I talked to him today and he admitted to be nervous which was partly why he kept shooting off jokes. It turned out to be be the best presentation, so it worked out :-)

Developing Cutting Edge Web Applications With Internet Explorer 8
Lots of good tips on changes from IE7 to IE8. Espcially the part about the stuff they fixed that will break existing apps is a must read. Also a bit about new features, XDomainRequest objects, new accessibility features etc.

Creating Rich, Dynamic interfaces with Silverlight 2

 

Checking browser version in IE8

IE8 comes with an "Emulate IE7" button, which will revert the page back to run as IE7. This is great for developers who can quickly test their apps in both versions (I just wish we could have an IE6 button too!).

Furthermore you can place a tag in the page that will force IE8 to render the page as IE7 would have. However this poses a problem. Lets say you make some javascript that takes IE8 into account with version checking, but the page has this IE7-compatibility tag embedded. The JavaScript browser version check would still report v8. Instead for IE you should use 'document.documentMode' to get the version number. That means that if you set your browser to run as IE7, this would return version 7 (even though it really is 8), and if you set in quirks mode, you will be getting v5. It would be safer to adjust your javascript using this property.

I ran some few tests on the fresh IE8 beta1. It still looks pretty much like IE7. This blog runs with only one minor problem. I have a gallery page that relies on AjaxControlToolkit, and this really broke on IE8. Hopefully the AjaxControlToolkit team will quickly get all those issues fixed.

There are 4 IE8 specific sessions at the Mix conference. Keep an eye on them at the Mix Website when they come online (about 24 hours after the session):

  • BCT08 - Welcome to Internet Explorer 8  Wed March 5 at 1:30 PM to 2:45 PM
  • CT07 - Cross-Browser Layout with Internet Explorer 8  Wed March 5 at 3:00 PM to 4:15 PM
  • T21 - Integrating Your Site With Internet Explorer 8  Thursday March 6 at 8:30 AM to 9:45 AM
  • T04 - Developing Cutting Edge Web Applications With Internet Explorer 8  Friday March 7 at 8:30 AM to 9:45 AM
  • Here's a picture from the first session, showing the Acid2 test:

    IE8beta1 and Silverlight 2.0 beta 1 available

    Reporting live from the Mix08 conference in Vegas :-)

    Internet Explorer 8 beta1 and Silverlight 2.0 beta1 will be available from today !

    IE8 comes with a much improved Developer tool with full debugger and style tracing, CSS2.1 and HTML5 support. You better get testing in IE8, because your existing website might be broken in IE8 (since it now finally follows the standards).

    Silverlight will also be available for Mobile, and is supported by Nokia who will add it to their S40 and S60 series. You can already see a mobile silverlight app here: silverlight.weatherbug.com. This app was developed in less than 3 weeks and works cross-platform, cross-browser, cross-mobile, cross...