It’s been a while since I’ve posted about the Emulate IE7 Compatibility View feature.

My first gripe…

Granted, the position of the ‘Emulate IE7′ button in Beta 1 was ugly as hell, I can only assume that this button re-posiiton (and re-size) goes to show the apparent lack of thought that has gone into how users will identify with what this button actually does. Instead of a fairly prominent ‘Emulate IE7′ button positioned near the top right of Beta 1, the IE team have placed the new UI button for Compatibility View in an inconspicuous area to the right of the address bar. Chris Wilson has said, however , that they may move the button position based on user feedback. The underlying issue though is that the target audience of IE8 won’t have the first clue what all this fuss is about.

Compatibility View based on user feedback?!

The main reason for me writing this post is down to an article the IE team released yesterday relating to a new extension of Compatibility View, that will make the experience of defaulting to standards mode better for the end user. Essentially they collect the data, relating to what high-volume sites other users clicked the Compatibility View button on (i.e which TLDs most commonly prompt a user to manually switch to Compatibility Mode). A list of the TLDs that prompt the highest number of switches is compiled, and then users who download the next update of IE8 (or install the Beta of Windows 7) have a choice as to whether they want to opt-in to the aforementioned list of sites that should be displayed in Compatibility View (check out the screenshot of the installation prompt).

What prompted the IE team to implement this ‘community-powered’ solution?

Apparently, according to the article, high-volume sites such as facebook.com, myspace.com, bbc.co.uk, and cnn.com have been specifically flagged (presumably as a result of this collated user data) as not working correctly in the standards compliant default mode. As this user data has come from Beta 2 (and perhaps more worrying Beta 1?), which still has an alarming amount of rendering bugs still active, it’s highy likely that what end-users are actually seeing are Beta 2 (or Beta 1’s) rendering bugs, not as a result of a badly-coded website which relies on IE7’s quirky layout rendering.

Arguably, the most worrying situation for authors of these sites would be if MS decided not to refresh the data that the TLD list is based on, once the release candidate is distributed. Not refreshing this data (i.e wiping the data collected from the two Betas), would mean that authors of sites that appear in the ‘blacklist’ would presumably have to use the version targeting <META>/HTTP Header together with the newly introduced IE=EmulateIE8 value to remove their site from this blacklist – I presume this since there was a similar mechanism proposed back in August. So we are back to a similar scenario to the one where it was proposed Compatibility Mode be enabled by default, where even though a site is standards-compliant, the <META>/HTTP Header reset will need to be added by default to prevent these standards-compliant sites being viewed in Compatibility Mode.

I am still intrigued as to why sites such as Facebook, BBC etc were flagged, so I did a quick browse in Beta 2 and couldn’t find one rendering issuze on any the sites mentioned- I’d suggest that the apparent issues that end-users have experienced are down to performance (Javascript/AJAX) issues as opposed to layout bugs.

How does this new feature tie-in with the user-specific blacklist

The latest post doesn’t actually mention whether this ‘community-powered’ blacklist will work alongside the user-specific blacklist mention in the initial article on Compatibility View. I imagine that if they were to run in paralell, then the user-specific blacklist would overwrite the community-driven one.

Overall, an interesting concept I’m sure you’ll agree. And this after Chris Wilson thinks Gerard was overplaying how many people will push that [Compatibility View] button

Beautiful picture and sound quality thanks to two additional URL parameter values (‘fmt=22′ & ‘fmt=18′), but obviously dependant on what quality the video was uploaded at, in the first place.

They’ve also changed the aspect ratio of their videos (whether captured in HD or not), to glorius widescreen.

Check out a 720p demo.

A new theme was in the pipeline ever since I started this blog, as I’d used a hacked Kubrick one before this. As you can tell the design is very simple; I didn’t want a design that would either take months and months to design or that would be a hassle to maintain, in the long run; the homepage is deliberately pretty bare, and Categories have been removed altogether and replaced with Tags.

One CSS module that I wanted to utilise in this theme was Web Fonts – I recently discovered the stunning Museo font from Jos Buivenga which I’ve incorporated into all my <h*>s.

I need to really get a logo made up for the site as I’m pretty awful at Graphic Design, so if you feel you’re up to the challenge, please drop me an email at james [at] idreamincode.co.uk.

Kudos also goes to Mark James at FamFamFam for allowing the free distribution of his beautiful Silk icons.

I have identified a some outstanding integration issues which I’ll be sorting out over the next few days; so for now, I’ll slap a big Web 2.0-style Beta badge on the site (hypothetically-speaking, of course )

Daniel Glazman/Dave Hyatt and now fantasai have proposed specs for Variables/Constants in CSS. Read my article on CSS3.Info which essentially sums up and compares both proposals with one another.

I’m currently trying to drum up some ideas for a new theme for the site – not sure how long it’s going to take, but since handing in my notice at National Strategies, I have ample time to at least come up with some conceptual ideas.

Whilst there was me thinking the IE team were going to be sticking rigidly to 2.1 compliance and nothing else, it was announced on the IE Blog that a number of proprietary and level 3 properties are going to be implemented yet again on an experimental basis (using the -ms- prefix).

Most of the level 3 properties deal specifically with text layout (layout-grid, line-grid, line-break, word-wrap), but they’ve also prefixed some non text layout-specific properties including background-position-x & background-position-y and overflow-x & overflow-y.

One thing I was surprised to see was the amount of proprietary properties that they are continuing to support; in case you’re not already familiar with the functionality of these properties, I’d thought I’d come up with a brief intro for each of the most interesting properties (full property list):-

• -ms-interpolation-mode – Introduced in IE7, this property deals with smooth image scaling; this gives the author the ability to de-scale large images using CSS, without losing definition. The two keyword values that can be used are nearest-neighbor (using nearest neighbor interpolation mode) and bicubic (using high-quality bicubic interpolation mode). MSDN page
• -ms-filter – Probably the most used property on the list as it is currently the only way to emulate opacity in versions of IE. NOTE: MS have recognised that the former syntax used to emulate opacity was illegal, so they have no re-written the value.
• -ms-accelerator – As far as I’m aware, this is a brand new extension for IE8 and there is currently no specification from MS on it’s function.
• -ms-behaviour – This property allows a script to be attached to the element to which it is applied; the script that is specified in the property is saved as an HTC file (HTML Component). I’d hazard a guess that the most common purpose of this property is getting semi-transparency in PNGs working in IE5+. MSDN page
• -ms-scrollbar-* – This set of properties has been with us since IE5 and the property name is pretty self-explanitory; they’re used to control the colour of the browser window scrollbars.
• -ms-text-underline-position – Supported since IE6, this property sets the position of the underline that is set through the text-decoration property.
• -ms-zoom – sets the maginfication scale of an element.

Some of you may already be aware that IE6 has a limitation of reading only up to 30 external stylesheet declarations (when using either the style element, link element or @import rule). This figure may seem ridiculously high, and you might be thinking that an author with that many individual declarations doesn’t have a clue about organization, but this is what out-of-the-box Drupal serves you (Drupal.org related post).If you’re working on a fairly large Drupal site which employs a number of different modules, then you may well experience this problem. The issue is that many Drupal modules that have any kind of theming side of them include their own (sometimes very hacky) stylesheets; so when one of these modules is installed, Drupal adds a link to this stylesheet by means of a style element declaration – yes thats right, one for every module.

I’m currently working on a large-scale Drupal site which includes a large number of modules, each with their own styleshee. As already mentioned, IE6 (and below) ignore any stylesheet declarations (using style or link elements) after 30 instances. Add to this the numberous non-module stylesheets (Drupal core & IE-specific) and you’re well on your to reaching IE6s limit.

So, what are the solutions?

Aggregate & Compress CSS within Drupal

Drupal recognises the issue of an additional HTTP request required for each module stylesheet. Fortunately this feature gets around the IE6 issue by aggregating all module and core stylesheets into one instance for each stylesheet media type defined. You can access this feature by logging in as an Admin and going to Site Configuration > Performance

However this method caches CSS too, which means it’s far from ideal whilst theming development is taking place.

Unsetting stylesheets within template.php and using @import

You can disable any module stylesheets from being included by unsetting them from within template.php. First get the stylesheet array by using $css = drupal_add_css() and then go ahead and unset all stylesheets (which will then all be linked to from within just one). Your snippet will look something like this:-

# get array of stylesheets
$css = drupal_add_css();
unset($css['all']['module']['modules/system/system.css']);
unset($css['all']['module']['modules/system/defaults.css']);
unset($css['print']['theme']['themes/mytheme/print.css']);

Now you would go ahead and use the @import rule to import your stylesheets through one of your theme-level stylesheets. The issue however, still exists that if you have more than 30 being imported within a single document, stylesheets that are <30 will be ignored. To only workaround is to create a new stylesheet in this case, specifically for importing the remaining stylesheets.

OK, maybe a bit of a haphazard title for a post (but it is very late in the day, and I really should be getting to bed) . Anyway, the anticipated release of Beta 2 was sometime this month (August) and it was finally released yesterday.

It was always a given that Beta 2 was going to be focused on delivering an enhanced and more seemless user experience, rather than concentrating on ‘under the bonnet’ enhancements like Beta 1 tried to deliver. However, on the surface of things, they appear to be very similar; one feature that I immediately noticed had gone (at least from the top toolbar) was the ‘Emulate IE7′ button- to me, this wasn’t much of a suprise as I simply could never see a practical use of that feature for end-users.

To coincide with this latest release, the IE team have also released a whitepaper detailing CSS improvments in Beta 2. For me, arguably the most major enhancement is support of the box-sizing property without the need for the -ms- prefix.

Beta 2 also supports the shorthand syntax for the filter property which can be used to emulate opacity – this must mean that IE8 don’t intend to implement the Level 3 opacity property.

Although I haven’t played around with Beta 2 for long, I have had time to put it through it’s paces on CSS3.Info’s Selector Test Suite; expecting a much better score than Beta 1s measley 14 out of 43, Beta 2 surprisingly only supports 13 selectors out of the 43.

This is only a quick write-up so will write a more concise post when I have some more time. Right, off to bed.

I’ve been watching the status on the Connect ticket almost daily as this is probably one of the most popular tickets in the whole system, I imagine (along with this one, this one, and this one.

The call for supporting the Opacity property in IE8 stems from the team removing the proprietary ‘Layout’ concept, which renders the filter property useless (as this document explains), although there had previously been some talk of the longhand value working – this means there is currently no way to emulate opacity in IE8 (the first browser for 10 or so years that doesn’t support a way of emulating this)!!!

A few days ago now, the status on the bug ticket changed – it’d remained closed ever since I was given access to Connect, but its status had changed from ‘By Design’ to ‘Postponed’. Until I got my first copy of the IE8 Beta News pdf through, I had been trying to hunt down exact definitions of these statuses, but to no avail; however now, I have them (word for word):-

‘Won’t fix’ –

generally means we know that we will not be addressing the reported issue, ususally becuase it risks breaking the code in other, more serious ways or because the effort to fix the issue is not justified for the improvement.

‘By Design’ –

generally means the feedback you provided is, at this time, expected behaviour for Internet Exlorer

‘Postponed’ –

means unfortunately we will not be fixing this in IE8, but we will considering it for the next release of IE

Our only hope now is that it includes support for the filter property (that we all know and love), by re-engineering the property application itself. UPDATE:- They’ve announced that IE8 will be able to emulate Opacity using the filter property but only by prepending the property with the -ms- prefix.

The list will gradually be updated – it can be seen at the top of the right column on every page on the site