New site detects compatibility problems and deviation from best practices.

For some months now, Microsoft has been promoting the use of standard HTML5 that avoids targeting specific browsers—particularly WebKit-based browsers like Chrome and Safari—and instead works well in any browser, including its own. The company today launched a new site, modern.ie, to further promote this agenda and provide tools to help Web developers.

The site has three main components to it. The first is a scanner that examines sites and detects a laundry list of compatibility concerns. These cover a range of issues, from using out-of-date versions of popular JavaScript libraries such as jQuery to using browser-specific CSS without also including standard cross-browser fallbacks.

One slight peculiarity of this system is that if the scanner detects certain compatibility issues, rather than reporting them directly it requests that you get in touch with Microsoft engineers after demonstrating that it's your site, apparently for "security and privacy reasons."

The second component is a tie-in with a company called BrowserStack. BrowserStack offers a service that lets you view your site in different browsers running on virtual machines hosted in the cloud. It's a commercial service, but through modern.ie developers can sign up for a three-month free trial.

If you'd rather do your cross-browser testing in-house, Microsoft is providing a bunch of virtual machines for various virtualization platforms (Hyper-V today, VMware, Parallels, and VirtualBox coming soon), each containing Windows and Internet Explorer, with VMs for Internet Explorer 6, 7, 8, 9, and 10 all available.

Third, the site is providing guidelines on coding best practices.

Underscoring all this is Microsoft's continued push to get Web developers to start thinking about Internet Explorer 10, while at the same time not giving Internet Explorer 10 special treatment. That's not a contradiction; Microsoft wants developers to stop doing things like detecting specific browsers and instead detect the presence of specific features.

Internet Explorer 10 has better standards compliance than any of its predecessors, but sites doing browser detection will ignore its new features and capabilities, because they'll implicitly assume that Internet Explorer 10 offers the same functionality as version 9 or older. With feature detection, sites will automatically take advantage of newly supported features, whatever browser is being used.

When it comes to CSS, many sites use WebKit-specific properties, prefixed with -webkit. Many of those properties have equivalents that work in Firefox (with a -moz prefix), Opera (with -o), and Internet Explorer (with -ms); many more are available as standard CSS without any prefix at all. Encouraging developers to use more than just -webkit means that their pages will offer more features in more browsers.

As with the rest of Microsoft's HTML5 standards advocacy, modern.ie may be a little self-serving—Internet Explorer happens to be particularly hard-hit by bad browser detection, for example, and some of modern.ie's advice is tailored specifically to improving Internet Explorer compatibility—but the best practices that Microsoft is espousing are genuine. The guidance Redmond is providing is useful and its advice is legitimate. Whether developers take notice remains to be seen.

In principle I agree with Microsoft's desire to code only to standards and not use browser specific code of any kind. But in reality, I want to use features which are only currently available in browser specific implementations.

So there you have the issue. I don't think Microsoft is going to solve it this way, and I'd like to see them just keep pushing IE to be more and more on parity with the other browsers. They've done good work so far, they should keep pushing.

In principle I agree with Microsoft's desire to code only to standards and not use browser specific code of any kind. But in reality, I want to use features which are only currently available in browser specific implementations.

So there you have the issue. I don't think Microsoft is going to solve it this way, and I'd like to see them just keep pushing IE to be more and more on parity with the other browsers. They've done good work so far, they should keep pushing.

part of the problem is everyon was pushing for standards compliance and yelling that MS wasn't following along. Then when MS goes for the standards everyone turns to WebKit. Well that's what it seems like anyway, I've got no solid numbers to back that.

If you'd rather do your cross-browser testing in-house, Microsoft is providing a bunch of virtual machines for various virtualization platforms (including Hyper-V, VMware, Parallels, and VirtualBox) each containing Windows and Internet Explorer, with VMs for Internet Explorer 6, 7, 8, 9, and 10 all available.

In the results, the scanner recommended adding two things, both IE specific [...] Ironic isn't it?

Actually I think it's perfectly reasonable.

Double Tap to zoom forces every single tap to sit around and wait for a moment before actually acting on the tap. It has to wait a long time, since some users double tap very slowly. The result is every button and link you press is slowed down by a quarter of a second.

In my opinion double-tap to zoom is a huge mistake, and if your website doesn't need it then you should turn it off. There is no standards compliant way to turn it off (Apple/the Safari Team doesn't acknowledge the issue at all, and Google/Chrome merely hands out a massive chunk of open source javascript code for working around it, and unfortunately it's too buggy to use in my experience).

I didn't know Microsoft had a solution for their browser until now (but I'll be implementing it for sure on all my sites), and there certainly isn't any standard solution. So promoting their proprietary one is fine.

Start screen tiles are the same. No other operating system has a "start screen tile", so of course it has to be platform specific. And every website should have one. Every website. Safari has something similar, but it's not a tile, it's an icon, so you need to provide separate images for each. I'm a bit disappointed they only promote their own however. They should promote their own and the one in Safari.

In principle I agree with Microsoft's desire to code only to standards and not use browser specific code of any kind. But in reality, I want to use features which are only currently available in browser specific implementations.

The standard specifically allows for non-standard extensions, and these ones are following the standard method of implementing those.

You are coding to the standard when you implement these particular "non-standard" features.

ebbv wrote:

So there you have the issue. I don't think Microsoft is going to solve it this way, and I'd like to see them just keep pushing IE to be more and more on parity with the other browsers. They've done good work so far, they should keep pushing.

Parity? It doesn't look to me like they're aiming for parity, it looks like they've left parity behind long ago and are forging new territory in touchscreen user interfaces.

Before anyone calls me a windows fanboi, I will point out that I have never owned a single windows device in my life, and don't intend to change that any time soon.

Are you kidding me? The button for registering to the trial of BrowserStack works on IE, but not on Chrome... did that seriously just happen? I thought the whole point is about websites being compatible with ALL browsers?

Are you kidding me? The button for registering to the trial of BrowserStack works on IE, but not on Chrome... did that seriously just happen? I thought the whole point is about websites being compatible with ALL browsers?

I thought the same thing. There's literally a blob of text that says, "We understand. It can be hard to write code that works across so many browsers. Let us help." with a button underneath. That button doesn't work in Chrome.

Are you kidding me? The button for registering to the trial of BrowserStack works on IE, but not on Chrome... did that seriously just happen? I thought the whole point is about websites being compatible with ALL browsers?

You may have some sort of script blocking running. It is connected to facebook which I block with ghostery. Works on Firefox and Chrome for Mac if I have script blocking off.

part of the problem is everyon was pushing for standards compliance and yelling that MS wasn't following along. Then when MS goes for the standards everyone turns to WebKit. Well that's what it seems like anyway, I've got no solid numbers to back that.

You've got it backwards. First everyone turned to WebKit, then several years later MS started going for standards.

WebKit's overall marketshare might only just be overtaking IE now, but it has had close to 100% marketshare among web developers for a very very long time.

Are you kidding me? The button for registering to the trial of BrowserStack works on IE, but not on Chrome... did that seriously just happen? I thought the whole point is about websites being compatible with ALL browsers?

What version of IE are you using? It is disabled for me in IE9 as well.

The standard specifically allows for non-standard extensions, and these ones are following the standard method of implementing those.

You are coding to the standard when you implement these particular "non-standard" features.

Don't be pedantic. You know what I meant; I'd like to use standard specs and not browser specific specs and have them supported everywhere, just like everyone else.

Quote:

Parity? It doesn't look to me like they're aiming for parity, it looks like they've left parity behind long ago and are forging new territory in touchscreen user interfaces.

Ugh. No. If you had experience working with modern CSS/JS you'd know that Even IE10 is not in feature parity with Firefox, Chrome, Safari and Opera. It's a lot closer than ever before, and I applaud the IE team's efforts there, but it's still not there. All the other browsers have been more or less keeping in parity with each other for the last couple years, and it's time for IE to join them.

Are you kidding me? The button for registering to the trial of BrowserStack works on IE, but not on Chrome... did that seriously just happen? I thought the whole point is about websites being compatible with ALL browsers?

I thought the same thing. There's literally a blob of text that says, "We understand. It can be hard to write code that works across so many browsers. Let us help." with a button underneath. That button doesn't work in Chrome.

This is is hilarious.

I just downloaded firefox and chrome to try this out, and it worked fine for me. Maybe because they're fresh installs? You might be running some extension that's killing compatibility, that'd be my best guess.

( snippage! )Start screen tiles are the same. No other operating system has a "start screen tile", so of course it has to be platform specific. And every website should have one. Every website. Safari has something similar, but it's not a tile, it's an icon, so you need to provide separate images for each. I'm a bit disappointed they only promote their own however. They should promote their own and the one in Safari.

I disagree - not every site should have a start screen tile. In fact, no site should have one. They should be promoting a particular size and resolution built into favicon.ico, a file that already exists at every site worth visiting, and which already supports multiple sizes and resolutions.

I don't mind the generally self-serving nature of modern.ie until they get to things like that.

jQuery 2.0, in fact contains fewer workarounds for Internet Explorer issues than any other browser.

Note that JQuery 2.0 drops support for IE8 and lower completely as supporting it would slow down all the other browsers too much.

This. The article is VERY misleading due to this. The reason jQuery 2.0 has so few IE hacks is because they reached such a critical mass that they've dropped support for IE8 and below, which really hints at the opposite of what Microsoft is pushing for, but doesn't want to admit was never a part of their sordid past...

( snippage! )Start screen tiles are the same. No other operating system has a "start screen tile", so of course it has to be platform specific. And every website should have one. Every website. Safari has something similar, but it's not a tile, it's an icon, so you need to provide separate images for each. I'm a bit disappointed they only promote their own however. They should promote their own and the one in Safari.

I disagree - not every site should have a start screen tile. In fact, no site should have one. They should be promoting a particular size and resolution built into favicon.ico, a file that already exists at every site worth visiting, and which already supports multiple sizes and resolutions.

I don't mind the generally self-serving nature of modern.ie until they get to things like that.

Well - the Favicon option is pointless as well since Mozilla dropped support for it claiming security issues.

This. The article is VERY misleading due to this. The reason jQuery 2.0 has so few IE hacks is because they reached such a critical mass that they've dropped support for IE8 and below, which really hints at the opposite of what Microsoft is pushing for, but doesn't want to admit was never a part of their sordid past...

How is that relevant? The point was that IE 9 and 10 have fewer hacks in jQuery 2.0 than Chrome and Firefox etc.

#1 is promoting the touch functionality that MS has submitted to W3C without patent encumberance (or at least free to use without paying). The alternate version found in Safari is a Apple specific version that has not been submitted to the W3C, and it is unknown if Apple will be friendly with the IP that they have that covers it.

Only if the world were really black and white instead of shades of grey.

THis is NOT an HTML5 compatibility checker - it's the opposite. A nuber of the suggestions are for Microsoft-specific features. Those features are non-standard and won't work in any other browser. Microsoft is just trying to tie people in to their platform. Please do not do this.

Well - the Favicon option is pointless as well since Mozilla dropped support for it claiming security issues.

I know they stopped showing the favicon in the address bar (to avoid malware sites creating fake "secure" padlock icons), but current versions of Firefox still show them on tabs and bookmarks, and I've not heard of any plans to change this. It's a slight UI change, dedicating the icon in the address bar specifically to the security status of the page, and leaving the custom icons in places where they're more appropriate. In fact, to save space, "pinned" tabs show only the favicon, not the title.

They're recommending you use a non-standard, browser-specific CSS prefix. That's a bad idea. Those things are not to be recommended or used regularly, they're supposed to be beta features.

It does suggest you use the non-standard CSS prefixes in addition to the standard, unprefixed properties, as a way to enhance compatibility with browsers that have support for the prefixed properties but not the standard ones. Support might be "beta" but it's usually pretty solid and better than nothing, so I make this standard practice for newer CSS properties.

On a side note, I think it's nice that MS is getting their act together with regards to web standards, but I live in the real world where I still have to support IE7, and only just recently got to drop support for IE6. So I'm not exactly feeling the love.