By Kevin Yank

Standards Support in Internet Explorer 8 beta 1

By Kevin Yank

When Microsoft’s best and brightest took the stage at MIX08 last week, we all knew we’d be hearing about Internet Explorer 8. If we were lucky, we might even get to see Internet Explorer 8 in action. But Microsoft took us all by surprise, releasing a public beta of the new browser for is to download immediately and try for ourselves!

Though it is still a work in progress, IE8 beta 1 already represents a huge leap forward in standards support. The new layout engine makes incredible strides in the area of Cascading Style Sheets (CSS), and for JavaScript developers there are significant gains in performance and compatibility with Document Object Model (DOM) standards.

For the first time since IE6’s release, Microsoft has even managed to leapfrog standards support provided by the other major browsers in some areas!

There are plenty of details available for interested developers. In CSS Improvements in Internet Explorer 8, Microsoft details the new style features in the browser:

  • support for data URIs, which let you embed small images directly within your style sheets for improved performance
  • much less buggy CSS floats, which has enabled Microsoft to abolish the hasLayout hack previously used to work around these bugs.
  • correct support for margin collapsing
  • support for generated content, including automatic counters, using :before and :after pseudo-elements.
  • support for the :focus pseudo-class
  • support for CSS outlines (borders that don’t affect layout)
  • orphan, widow, and page break control in print output
  • support for CSS tables, enabling much easier and more powerful page layout with CSS
  • and many more smaller improvements!

The addition of CSS tables support, as I predicted last issue, will radically simplify the process of page layout using CSS. I was pleased to see that my three-column layout example using CSS tables renders perfectly in IE8 beta 1.

In addition to the improvements already in beta 1, Microsoft has announced it plans to have full support for CSS 2.1 by the time Internet Explorer 8 is released! If it succeeds in this, it will be the first browser vendor to do so.

And these CSS improvements are just the tip of the iceberg. Improvements for developers in IE8 beta 1 can be seen in almost every part of the browser:

  • The IE Developer Toolbar has been greatly enhanced. Its CSS debugging and live editing features are now just about on par with the much-loved Firebug extension for Firefox. And the toolbar is now built into the browser by default!
  • JavaScript has gotten a big speed boost, and Microsoft has fixed the notorious circular reference memory leak.
  • The Document Object Model (DOM), the primary API used by JavaScript developers, is now much more standards compliant, bringing it up to the same level found in the other major browsers.
  • IE8 supports the W3C’s new Accessible Rich Internet Applications (ARIA) standard, enabling accessibility tools like screen readers to work with slick, JavaScript-powered user interface elements.

There simply isn’t room to give all the improvements in IE8 beta 1 their due in this space. If you want to get up to speed, the best place to start is the What’s New In Internet Explorer 8 article at MSDN.

It’s been a long time since Internet Explorer exceeded anyone’s expectations, but with IE8 beta 1 it has certainly done that and more. Now it’s up to all of us web developers to start playing with all these new features to discover what will be possible once Internet Explorer 8 hits the streets!

  • It’s a bit strange to have an Internet Explorer version that I am actually looking forward to!

    Let’s hope they keep up the support for various things, and do just as well with future versions too.

    No 1 request for IE now from me is proper XHTML support… here’s hoping :/

  • Matt Wilcox

    “support for generated content, including automatic counters, using :before and :after pseudo-elements.”

    All of these things are not working in IE8 beta 1. I was most disappointed by that.

    Here’s a two year old test case – look at the thumbnails on the right. They should have rounded corners (as with Firefox, Safari, and Opera), a trick using generated content (CSS explained on the page). In IE8 they do not. You will also find that the counters are completely broken – the comments on the same page are all numbered ‘0’ (again, CSS explained on the page).

  • @Matt: You should forward that on to the IE team, they have been looking for test cases for some of the new CSS rendering. Based on talking with the guys, I’m sure this kind of thing will be taken care of before the release.

    One thing I liked most about MIX in reference to IE was honesty. There was a lot less of the PR fueled question dodging that we sometimes get from Microsoft. Balmer even admitted that keeping IE6 for so long and tying IE7 to Vista were both mistakes. Future browsers (like IE8) won’t be tied to OS upgrades and should be coming sooner.

  • Matt Wilcox

    Forward that on where? I can’t see a ‘report broken website’ button or anything on IE8?

  • Matt Wilcox

    OK, I installed the IE “Roport broken webpage” tool.

    As an additional note: IE8 is not appearing to understand XHTML 1.1 sent as application/xhtml+xml, my site is getting output as XHTML 1.0 Strict because IE8 isn’t claiming to want the proper XML MIME. (I use Content Negotiation as per Authentic Cuckoo: )

  • funkdaddy

    Is this a stand-alone app or will it replace my current version of IE?

  • madr

    No standalone. But luckily, it can emulate IE7.

    I will not play around with these “new” features more than I have done so far (pretty much actually) since IE6 still is the most dominated web browser. IE8 might be nice, but it is very important that Microsoft release IE8 in such manner that everyone get rid of IE6 and IE7 as soon as possible.

    The greatness of IE8 will go pretty much unnoticed until IE5, IE6 and IE7 stops annoying us by their dominating marketshare. According to W3Schools statistics and similar, IE5 currently outnumbers Safari users. That’s really depressing.

  • Liam

    The greatness of IE8 will go pretty much unnoticed until IE5, IE6 and IE7 stops annoying us by their dominating marketshare.

    The problem is though, there are alot of people who cant update from IE6 – I know many people who have copies of Windows XP which are not totally legit, shall we say – and thus, with the new OS authentication system that Windows put in place, it doesn’t let them update the browsers, so until they update their OSs – so in other words, until they replace their PCs most probably, there will still be a large marketshare…

    DISCLAIMER: I accept no association to anyone who is using an aformentioned version of Windows – I am using a compltly legit OEM version.

  • If you’re worried about upgrading and losing IE6 or 7, download VirtualPC and the different hard disk images from Microsoft and test the browsers in VM environments.

  • krdr

    What about png32 support?

  • logic_earth

    PNG32 support was added in IE7

  • Well I’m staying positive and looking to the future :)

    Finding problems with the :before and :after pseudo-elements though :(

  • okparrothead

    Has anyone installed an IE7 standalone

    along with the beta IE8?

    Just wondered if it was too early to try such a thing….

  • okparrothead

    Sorry, wrong link

    for the IE7 Standalone

  • Sorry, wrong link

    for the IE7 Standalone

    Tredosoft have a well established track record, but I’d be very skeptical about downloading and installing executable from sites you don’t know anything about. How do you know they didn’t grab Tredosoft’s IE7, attached their own trojan and popped it up for people to happily install?

    Their ‘About Us’ page doesn’t even work.

    Steer clear.

  • LetterAfterZ

    Actually Liam,

    Microsoft have removed the verification out of the IE7 upgrade, which I presume was a push to get all users, including the less legal types, away from using IE6 for the greater good.

  • David D.

    After reading the Sitepoint praise for the stated change for I.E. 8 to be standards compliant by default rather than the earlier announced I.E. 7 compliant the arguments put forward seemed sound and reasonable. However, since then I have read the comments by Joel from fame which has made me change my mind. This issue definitely requires some serious consideration.

  • okparrothead

    Thanks AlexW!

    Are there any trusted implementations of Standalone IE7?
    Would it be advisable to install one and update my current installation with IE8 Beta? Or is it still too early to get into this new browser?

  • Are there any trusted implementations of Standalone IE7?
    Would it be advisable to install one and update my current installation with IE8 Beta? Or is it still too early to get into this new browser?

    The Tredosoft IE7 download is fine. Personally I wouldn’t want to commit to a full install of such an early beta. It may well be quite solid, but it could also have bugs that potentially effect the way your system operates.

    Ideally you need to keep it isolated.

    I did a quick run-through of setting up Virtual PC and IE8 in the Design View.

  • Finlay

    I was worried when I read that IE8 would ‘break’ many sites, so I’ve been playing with the beta for IE 8 throughout most of today, principally because I’m interested to see what changes, if any, it will make to my client’s sites.

    In the main they all display perfectly OK, but there is one positioning anomaly which has caused me great concern, principally because it spoils the layout of a particular page but doesn’t reveal the reason as to why!

    I’ve been struggling with it now for several hours and cannot find the reason for what’s happening, so curiosity (and worry for the future when this browser becomes commonplace) has prompted me to share it here in search of clues to the location of the answer.

    The test page below displays perfectly well, with the centre of the crosshairs lined up on the exact corners on the central map image, in over 40 different browsers through which it’s been tested. It also validates perfectly for CSS and HTML through W3C. Yet in IE 8 the layout position is wrong on the central map and the crosshairs appear displaced downwards by about 5 millimetres!

    (The significance of the crosshairs is that, in the non-IE8 version of this page, red dots which show the positions of affiliates are displayed on the map and the dots need to be pixel-perfect in alignment. The crosshairs help to check this alignment.)

    Removing the DOCTYPE completely resolves the problem in IE8, so obviously it’s a compliance issue, but for the life of me I cannot see which bit of the existing code or CSS is causing IE 8 to shout ‘Non Compliant’ when the Doctype is in place. Furthermore, I can’t get any hint from IE 8 to suggest what is non-compliant, so have no hints at all as to what should be investigated/changed in this or similar pages. Very worrying!

    Other than W3C, is there anywhere on the web where one can load a web page and have any non-compliant elements highlighted, so that one knows what to fix in a situation like this? In particular, is there somewhere to check for IE8-specific anomalies like this?

    Alternatively, does anyone have any idea what the problem is?

    At this stage of the IE 8 release this is all pretty academic, but I thought I ought to get a head start on checking compliance because over 90% of this site’s visitors currently use IE 6 or 7 and that group will slowly migrate to IE8, rendering the graphical section of the site redundant unless this positioning issue is solved at some stage.

Get the latest in Front-end, once a week, for free.