In my previous posts, I mentioned my trip around the world. In this and the next few posts, I’d like to share a few demos and resources from my presentations.
Test cases to improve interoperability
I will start with the IE Testing Center, where you can find over 7,200 test cases we contributed to the W3C; these tests cover the CSS 2.1 specification in depth, plus a few other specs from other W3C Working Groups. Because there are ambiguities, options, and misinterpretations in any specification, the IE Team created these tests to verify that a browser supports what you are trying to do before you depend on it.
To get a sense of how these tests work, let’s run some of them using the latest builds of the browsers as of this writing: Firefox 3.5.3, Safari 4.0.3, Chrome 18.104.22.168, Opera 10.00 (1750) and IE 8 RTM. It’s important to understand that there is no winner or loser here, just different browsers that are working with the same goal: better interoperability.
1. Border applied to element with 'display' set to inline-block The test passes if there is a box below. Run it here.
All browsers pass the test
2. Inline box containing block boxes The test passes if there are blue borders around the top, left, and bottom, but not the right side of the text "First line," and borders around the top, right, and bottom, but not the left side of the text "Last line." Run it here.
All browsers but Firefox pass the test
3. Margin collapsing - element with clearance The test passes if there is no red visible on the page. Run it here.
Only Opera and Internet Explorer pass the test
If you look at the source code of the pages (on IE8, right-click the page and select View Source), you will notice some recurring elements such as author, help, flags, and assert. These elements are standard components of all tests in the suite, which also include a simplified scenario to validate the assertion.
To make your life easier, the Expression Team also developed and released a new tool for Web developers: Expression Super Preview.
During the Auckland Web Meetup, I demonstrated how to use Expression Super Preview to perform cross-browser debugging, and to help sites migrate from earlier versions of IE to Web Standards in IE8. I was excited to hear the very positive responses from the user group audience, including Rob O’Callahan and his colleagues from the Firefox team--between a pizza and a beer (or maybe more?) I heard some very interesting feedback and got great ideas for future scenarios!
Expression Super Preview for IE is available for FREE here. Once installed, you can run this demo:
In this demo, the site hit a well-known IE6 bug (double margin), that can be fixed by setting the display property to inline.
You can find other Training Kits, Tutorials, and Videos about Expression Super Preview here.
In my next posts, I’ll share other demos from my roadshow. Stay tuned!
You should feel embarrassed that you had to go out of your way to hand pick examples of your browser passing tests. Try running all of the browsers mentioned above on this website: http://acid3.acidtests.org/. IE8 fails horribly, yet all the other browsers do just fine. Chrome sprung up over night and passes with a 100% rating, yet IE, which has been around since the dawn of the internet, scores the lowest rank. Why does Microsoft continue to make browsers that lack core functionality? As a web developer, I consistently struggle to make my sites IE compatible, but rarely experience problems with any other browser.
Nice blog! ...
Errors found while checking this document as XHTML 1.0 Frameset!
Result: 270 Errors, 13 warning(s)
One more thing: IE8 can not emulate itself! :)
This will not work:
<!-- Make IE browsers CSS 2.1 compatible-->
<!--[if gte IE 7]>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" >
<meta http-equiv="X-UA-Compatible" content="IE=8" > <!-- IE8 mode -->
<!--[if lte IE 7]>
At least I think so. One can really not be sure, since its about MS...
@webdeveloper: "IE8...lack core functionality" - " I consistently struggle to make my sites IE compatible"
Please let me help you. What functionality (not sure what you mean with 'core') are you missing? Where does your site break with IE8?
@Sara: I agree with your comment, the blogging platform we are using is a product developed by third party. We are currently exploring new blogging engines, as the standards compliant platform Oxite (find source code here: http://www.codeplex.com/oxite). Hopefully the IT team will upgrade all the blogs soon. :)
On the Meta tag issue, I'm not sure to understand your question. Do you have a page where I can repro your issue?
Thanks for the feedback!
@gisardo: Thank you for your reply. The purpose of a browser is to, of course, effectively browse web pages, and this is what I was referring to when I said "core functionality". IE (all versions) have poor core functionality in the sense that they do not correctly render code (html, css, js, etc). I do not have specific examples, but one vague, general, well known example is making a div tag's height equal to 100% when it is nested in other content (also with a height of 100%). In this scenario, IE typically does not render the div tag to be 100% of the height of the browser window unless you apply some sort of "hack". I recently set up a page containing divs set up in this manner and it rendered correctly in FireFox, but not in IE. In fact, when I write UI code, my pages almost always have a nice clean, consistent look to them in every browser except IE - I always have to spend hours modifying code to accommodate IE. IE also ignores certain CSS options, such as -ms-border-top-left-radius. FireFox renders the rounded corners perfectly - why doesn't IE8? Didn't Microsoft have a big enough budget to hire a guy to make that functionality work? Have you tested IE at this site? http://acid3.acidtests.org/. Why does IE fail so horribly when all other browsers score very high marks? The focus of the next release of IE should be making it pass the acid test, not adding extra frills (addons, skins, etc).
On the first issue, I'm surprised we work differently from Firefox (given the fact that we did lot of testing to comply CSS 2.1). Looking around, I could find many people complaining on a similar issue even with Firefox: http://www.bing.com/search?q=firefox+div+height+100%25+nested&form=QBRE&qs=n
Now the question is: who is doing it right? I'll investigate, it would be very helpful if you already had a reference to the w3c spec that cover this detail. It might be a case where the spec let the user agent decide or it is not clear...
CSS Corners are coming soon...have a look at http://blogs.msdn.com/ie/archive/2009/11/18/an-early-look-at-ie9-for-developers.aspx
With regards to Acid 3, you will find various opinion. I like the one from Mike Shaver (VP Engineering at Mozilla) where he talks about Acid 3 as a "marketing thing": http://shaver.off.net/diary/2008/03/27/the-missed-opportunity-of-acid-3/
I kind of agree with him, having a developer heart :-)
Hi Giorgio, i installed the superPreview tool but my question is how do you add other browsers like firefox and chrome to this tool i don't find the option to add browsers
Sven: at the moment there are two versions of SuperPreview.
The first is a stand-alone tool and allow you to test on IE6, IE7, IE8 and static visuals. This version is FREE.
The second is integrated with Expression Web and allow you to test on Firefox as well. You can get this version either with Expression Web, or Expression Suite or an MSDN Subscription.