Emulating IE7 in IE8 Beta 1

Tagged in: ,

Forgive me for possibly coming across as ignorant – but when the IE team decided to implement this function, who did they think would use it? Is this a half-hearted attempt at a tool aimed at developers to allow them to test on both IE7 and IE8 on the same browser? Or is it a feature that they think their target market group are going to make use of?

Paul Cutsinger, IE’s Lead Program Manager explains over on the IE Blog that “it will help you with everyday browsing and with quickly checking your site as you work on it”; let me break his quote down:-

“it will help you with everyday browsing…”

How will it help someone with everyday browsing? If a site looks broken in IE8, the odds are that users aren’t going to wait around while the emulation process takes place (requires a complete browser restart); they’re just going to leave the site. I want to make my feelings quite clear – if a web developer doesn’t want to (or doesn’t know how to) create cross-browser compliant code then as a user, I shouldn’t expect to have to compromise my browsing experience due to their ignorance of standards-compliancy (or lack of knowledge) by having to take the regressive step of using the IE7 user agent string, version vector and layout modes.

Isn’t the ‘average joe’ going to be a bit bemused by the appearance of this shiny new button on their IE8? I have no doubt that they’ll disassociate themselves with it, as they’ll have no idea as to what it actually does.

“…and with quickly checking your site as you work on it”

Completing the backwards step of going from IE8 to IE7’s layout requires a complete restart of the browser. Even with the fastest PC, a user is still going to have to physically click buttons to complete the steps to switch layout modes. I hope this laborious process is simply down to the unpolished nature of a Beta; if we really have to go down the route of version emulation in the RC, the IE team needs to add an automatic close/open process- we shouldn’t expect end users to do this themselves.

So, who’s it actually for?

Well if I’m honest, I’m still not sure. Below I’ve highlighted the two possibilities:-

  • For developers- Why then is the emulation button in the position it is within the browser window? I recognise it’s a Beta, but if this feature does makes it through to the RC (which I fear it probably will do), this button needs to be removed from the main viewport and into the developer tools. The ‘average joe’ won’t understand what this feature does anyway, so leaving it on the main viewport is likely to lead to confusion as to what it actually is and does. Looking back over the history of emulation software, is MS unaware that just by simply emulating IE7 you shouldn’t expect to gain a true representation of an IE7 standalone. There’s no substitute to virtualisation and running a cloned base image alongside the original, with IE7 on one and IE8 on the other; failing that multiple versions of IE would be the second best solution; in the instance of IE6/7, it was down to a third party to provide developers with a solution for running two standalones side by side- it would be great if MS developed an official standalone version which doesn’t automatically overwrite IE7 and doesn’t muck with registry files.
  • For IE’s target market group- If in fact IE is marketing this feature directly to their target audience, then for a start they need to illustrate this feature (and the button) better. ‘Emulate IE7′ is likely to mean very little to the users that IE is targeting IE8 for.

Another agenda?

It’s no secret that MS are engaged in talks with the EU over anti-competition laws. I share the same opinion as others in that the sudden reverse decision to remove the opt-in standards mode days before the public Beta release of IE8 could have partly been down to MS taking note of what the EU were ultimately looking for them to do. I’m not complaining though; I’ve already expressed my delight before that the initial decision was reversed. From MS’s point of view it’s killed two birds with one stone; from the EU’s point of view it could be seen as a step towards opening up the browser market more. For us developers ultimately more vendors means more healthy competition, which means faster adoption of standards (think if FF hadn’t have come along, where would we be now; forced into using defacto standards and proprietary properties devised by IE?), and of course, the IE team now suggests IE8 is standards compliant (like we haven’t heard that statement enough times already).

NOTE:-The ‘Emulate IE7′ feature was specific to Beta 1 and has since been replaced by ‘Compatibility View‘, which I discuss in my review of Compatibility View

IE8 Beta 1 – some additional notes and a bit of QA

Over the past couple of days, the IE Blog has become a hot bed of activity, with some readers complaining about recent “article floods”- at least it’s better than the drought we’ve had up until recently!

First off I have to congratulate IE – my personal opinion is that IE6 was pretty terrible and IE7 was a bit of a let down, but this time round they seem to have been keeping their ear to the ground in the web community and have now gone on to build a standards compliant (actually I’m not so sure about the ’standards-compliant’ part yet, as it’s only a Beta 1 and is currently pretty lacking) browser. There’s a history of many developers slating MS about not taking a proactive approach with regards to web standards; in fact, they’ve been taking an active role within many of the W3C WG’s (including chairing the HTML WG), and been working with WaSP along the way so kudos to them. As Dean Hachamovitch has commented in response to several posts, the IE team have submitted over 700 tests under a BSD license to the W3C “for possible inclusion in the official W3C test suite”.

Granted, they should have done all this with previous versions of IE but that’s another topic entirely…

First off before I inform you of some additional info IE have released; something that I came across when I was taking IE8 for an initial test ride which I found quite humorous, was that the Windows Marketplace site looks pretty badly broken in IE8 (notice the pic); either there are still major layout bugs in IE8, or that site was coded based on quirks in previous versions of IE – funny nevertheless.

Anyway, on to the new stuff – let me warn you first off, there is virtually nothing new that isn’t already in the CSS 2.1 Compliance whitepaper that I mentioned in another . However, details of pseudo-class support was something that the whitepaper left out, but they’ve now released some more information about those additions amongst other things:-

  • Data URI
  • Floats- it was always a given that what with all this standards compliancy talk, that the proprietary concept of Layout was going to be removed.
  • Margin collapsing -previous of versions of IE had a fair few issues, but is now in line with the CSS 2.1 spec.
  • :focus dynamic pseudo-class – in addition to the :before and :after pseudo elements (the page incorrectly describes these as pseudo-classes), :focus is now supported. It’s nice that this class has finally been given support, however I’d to see support for additional for more typographical pseudo-elements such as first-child, first-line and first-letter by the time IE8 becomes a public release candidate. EDIT: I’ve been doing some testing over at IE’s new test suite and found that it does support :first-child and :lang() – weird that IE haven’t mentioned this in their whitepaper?
  • ‘overline’ text-decoration value - behaviour now conforms to CSS 2.1 spec.
  • border-spacing
  • z-index – IE8 now doesn’t treat the value auto as if it were 0 (zero); this was a bug in IE7.
  • white-space – ‘pre-wrap’ and ‘pre-line’ values now supported.

Text Resizing

Currently (as of Beta 1) IE8 still doesn’t resize text that is sized using a pixel value, which is very frustrating – text resizing of fixed size values should certainly be implemented within the next couple of betas.

Saying goodbye to Firefox

Tagged in: , ,

Up until now I’ve been impressed by Firefox for several reasons; what with it’s once pioneering level of standards compliancy I’ve found it a great platform to preview my sites on, going with the principle ‘code for FF, hack (workaround) for IE’. A biproduct of FF’s success has resulted with the guys at IE pulling their finger out and .

But recently however, I’ve become a bit discontent with it; as far as I’m concerned it’s lagging behind the competition somewhat.

In a , I investigated its latest nightly build and compared it to the competition- I found the results to be surprising. Using CSS.Info’s Selector Test, the latest nightly at that time only passed 36 out of the 43 tests, compared to Opera 9.5 Beta and the latest Webkit nightly with both of them passing all 43 tests. Being an advocate of progressive enhancement, I try and use these cutting-edge selectors wherever possible in my projects (nth-child rocks!). But with FF now having inferior CSS support, I need to move on to using another browser.

Really the only thing that was stopping me using another browser was FF’s superb Firebug. Opera’s David Storey has been recently mentioning on his blog about a current Opera project codenamed Dragonfly. Both Opera and David are being very secretive about what it actually is and the secrecy surrounding it has sparked much discussion in the web community as to what it could be- kudos to David and the Opera guys for building this hype; as far as I’m concerned it’s a breath of fresh air for vendors to be generating this kind of hype surrounding a product release.

I’m with the majority here, by thinking it’s probably some neat web developer tool – if this is the case, I’d switch to using Opera as my main browser immediately, saying goodbye to Firefox for good.

The Q tag, cross browser compatibility and the Content property

Tagged in: ,

After browsing Eric’s site the other day, I came across a thread notifying readers that he had put together an amended reset stylesheet to help in the battle for cross browser compliancy. A List Apart also describes the same solution in more detail.

One thing that caught my eye was a declaration that Eric had input on from Paul Chaplin. The purpose of this particular declaration was to remove the quote marks that standards compliant user agents automatically generate around a Q tag using the :before and :after pseudo elements; the author then has a ‘blank canvas’ to work with where he/she can manually input the relevant ampersands into the markup.

Although this method does mean that cross-browser compatibility is achieved, it is by no means an elegant solution. Yes, there is simply no other way to achieve this in IE6/7 but think about this; after reading the W3C guidelines concerning the Q tag, you’ll see it mentions that it is the user-agent’s responsibility “… that the content of the Q tag is rendered with delimiting quotation marks”. The fundamental problem I have with Eric’s method is that you are having to use a fairly advanced pseudo element and property(that only user agents that abide by the Q element spec support) to go and remove their correct default behaviour- in a nut shell, bringing standards compliant browsers inline with IE6/7 when it should be the other way round.

I’d personally not use such a style reset, but be more in favour for ignoring IE6/7’s needs for authors to include additional markup in the form of ampersands, and rather include a conditional IE style declaration that indicates to those IE6/7 users that it is indeed a short quote – perhaps italic font style? Think of it as an element of progressive enhancement if you will.

IE8 Beta 1 released & it’s CSS support

Tagged in: ,

A few hours ago, the guys at IE released the first beta of IE8. First off, it was a surprise to me that they decided to release it before SxSW; also because only a couple of days ago they released details on how they reversed their initial decision regarding the proposed opt-in standards compliancy mode.

After frantically copying over a Parallels base image to create a test bed soley for IE8, I installed it – the UI looks virtually exactly the same as IE7, with the notable addition of an ‘Emulate IE7′ button (more on IE7 emulation in IE8) and the address bar highlighting the domain name (I’m guessing to try and combat phishing attacks).

While I think it’s great that MS has bitten the bullet and , I wonder how much this new IE7 emulator feature will actually be used. Take this example for instance- the average joe uses IE8 to visit a site and notices that the site’s layout is broken, since it relies on IE7 quirks. Is the user really going to think, “Oh yeah, the site looks broken as the developer who built it has coded it with only IE7 in mind, so I’ll use the IE7 emulator – that’ll work.” Of course they won’t; they’ll simple get discontent and leave the site. My personal opinion is that this new emulator function is a half-hearted attempt by MS for them to be seen to be proactive about backwards compatibility, what with all those millions of sites that rely on IE7’s buggy CSS implementation (not to mention IE6). Similarly, developers who have coded a site with only IE7 in mind will probably not be ’savvy’ enough to even be aware of the new proprietary meta tag that switches IE8’s rendering to ‘IE7 mode’.

In terms of CSS, their really isn’t too much additional support which is disappointing to see, after all the buzz the IE guys created about passing Acid2; yes, it does for me (although a lot of people are noticing it doesn’t for them), however after carrying out some provisional tests using CSS3.Info’s Selector Test it’s frustrating to see that only 14 out of the 43 selectors passed (yes, you read that number correctly!). The press release on IE’s blog which accompanies the news does however mention quite clearly to expect “full CSS 2.1 support in the final IE8 product. After all, considering that this version is indeed a public beta, I would have liked to have seen more CSS support out of the box.

Something that has been bugging the web community up until now is that MS hadn’t released any details to date as to what support IE8 will include for CSS3. However, after trawling through MSDN I came across a whitepaper detailing CSS 2.1 Compliance. In this paper, it mentions that while one of IE8’s main goals is CSS 2.1 compliance, it is also forward looking to CSS3. It goes on to mention, that IE8 “hopes to implement some of the most requested CSS3 features by web developers and designers”.

Peter G beat me to it, by posting on the CSS3.Info site regarding CSS improvements in IE8. He did however, miss out some notable new properties- they include:-

  • Generated content (including ‘counters’)
  • Outline
  • New ‘display’ values (supports all ‘display’ values as per the CSS 2.1 spec)
  • Box-sizing (utilises new IE-specific ‘-ms-box-sizing’ until spec has been further clarified)
  • Writing-mode

One nice little feature they’ve added with developers in mind is the first installment of “… great, built-in developer tools” – again, they promise more is on the way.

Webslices are another new feature debuting in IE8; they’re basically portions of arbitrary websites to which a user can subscribe to. The HTML annotations for which Webslices relies on, are derived from the hAtom microformat.

Update: Since publishing this article, MS have released a new document outlining planned CSS3 support in the public release candidate of IE8; I also discuss this document in .

MS reverse decision on IE8’s opt-in standards compliancy mode

Tagged in:

Yesterday, Dean Hachamovitch announced that IE8 will, by default, interpret web content in the most standards compliant way it can. This decision is a change from what they announced initially which prompted a huge amount of feeback (good and bad) within the web community.

Dean goes on to mention that the change of heart was due to MS recently publishing a set of and suggesting that “…IE8’s default is a demonstration of the interoperability principles in action”.

Full blog post

My feedback to the CSS WG for CSS3

With the closing date for developers able to feed back to the CSSWG regarding it’s revised charter being only a week away, a few of us at CSS3.Info are discussing among ourselves about what we would like to see in CSS3.

Whilst I have no real hands-on experience of developing on mobile platforms, I’ve been doing quite a bit of research on the subject recently, particularly with regards to proposed CSS3 support. With regards to Media Queries, I think we can take it as a given that FF Mobile (proposed release to follow general release of FF3) will support at least the relevant part (in relation to mobile environments) of the module. It would be a fairly regressive step for FF Mobile to rely on conventional methods of stylesheet designation. However, I’ve tested some simple, relevant Media Queries in the latest nightly FF 3b Pre4, and as of yet there’s no support for them, which is slightly worrying if they are to stay in line with what their other vendors are using (supported by Opera & Safari) – FF needs to get a move on! With the recent surge of the iPhone etc, I deem this module to be of the upmost importance.

My personal opinion is that the W3C were right in leaving out Text Level 3 out of their Snapshot; I think a lot of these properties (text-shadow, word-wrap) should have a pretty low priority – I feel there’s far more pressing modules (Advanced Layout etc) to get out the door first. It seems that developers at Firefox are taking a similar stance to mine – View the bug status.

I’d like to see the Backgrounds & Borders module to be formalized, prioritising the ‘background-size’ property at least. I can see the obvious benefits to using this property in combination with SVG’s, to create a more flexible alternative to using the ‘box-shadow’ property – multiple backgrounds would be cool too.

The Basic UI module includes some innovative yet practical properties that should be implemented – the one I deem most important is ‘box-sizing’, for obvious reasons of using borders in conjunction with fluid width elements.

… and we have lift-off!

I’ve finally succumbed to the wonders of CMS’s for blogging, and now I have made the switch, I don’t know why I didn’t sooner! Wordpress is a breeze to mod on a theming level – all in all, it took me around 10 hours to theme it into what it looks like now from it’s standard off-the-shelf theme.

In terms of CMSs I’ve a good deal of experience dealing with Drupal theming; granted, Drupal is a far more complex CMS distribution and leaves Wordpress (more of a blog anyway) in the dark when it comes to expansion capabilities. But seriously, Wordpress is sooo easy to theme.

Read the rest of this entry »

CSS3 Tooltips

Tagged in:

I recently published an article on CSS3.Info about a new technique I devised for creating tooltips using CSS3. The method uses the :before (or :after) pseudo element combined with the :hover pseudo class.

So is Firefox finally cracking under the pressure?

Tagged in: ,

With the imminent public Beta release of IE8, which will be with us in the first half of this year and with Beta versions of the other major browsers already released, the next-generation, standards-compliant browsers are starting to become widely available – and with new versions, come new support for CSS amongst other things.

A lot of credit I feel has to be given to the Firefox project, which has acquired a significant share of the browser market as a by-product of actively pushing web standards and by doing so, has forced IE to play catch-up. Initial reports indicate that the IE team have been keeping their ear to the ground – Dean Hachamovitch, General Manager of IE Development noted that the latest version of IE from the industry heavyweight has passed the Acid2 test. This is a sign that at last even Internet Explorer is taking note of what the web community has been requesting for a long while.

However, where before Firefox was considered to be one of the front-runners in terms of standards-compliancy, I can’t help feeling that the Firefox team are starting to let things slip, judging by my latest evaluation.

I’ve recently been testing out the nightly builds of FF 3 Beta (namely Beta 2 Pre 4), and was disappointed to discover that it passed only 32 out of the 43 tests in our Selector Test, having tripped up on a number of tests relating to several structural pseudo-classes. Repeating the same test with the latest Webkit nightly build and even the Opera 9.5 Beta release candidate, the results showed that both browsers passed all 43 tests, showing that Safari and Opera are at least surpassing the long-standing industry leader in terms of standards-compliancy, leaving Firefox somewhat in the dark.

Yes, I am comparing nightly builds, which by their very nature change daily, but I think this news is highlighting a sign of the times. You might be surprised to know that between the Firefox General Release version 2.0.0.12 and the Beta 2 Pre 4 version I was evaluating, only 8 additional selectors have been given support (26 & 36 passes respectively) – Beta 2 Pre * now includes full support for all six variations of the attribute selector. Whereas Opera 9.5 Beta which became a release candidate before the latest FF nightly build, comes with more selector support out of the box.

I’ll certainly be keeping a keen eye on Firefox’s development and will be interested to see what selector support we can expect in the next Beta version.