Blog We love to talk!

Jun Tue
Cross Browser Testing/Web Development

Make Your Website Microsoft Edge Ready

  •  6-16-2015
Microsoft Edge

At the end of July Microsoft will officially launch their new operating system Windows 10 which includes the new web browser Microsoft Edge. Because many windows users can get the update for free it is highly likely that we’ll soon see many users visiting our websites using Microsoft Edge. The big question now is, does your website work flawlessly with this new browser? In this post I’ll walk you through the steps to test your website for Microsoft Edge.

The Test Environment

To make sure the website works and renders as expected we’ll need a proper testing environment. While you could install the Windows 10 technical preview on your device today I would suggest to try out Windows 10 in a virtual machine using VMWare Player or Virtual Box. You can get the latest version of Windows 10 by joining the Windows Insider Program and download the image for the language of your choice here.

Simply create a new virtual machine with at least 40 GB of free space available and install the Windows 10 Preview. This process is straight forward and described here in detail.

A First Test

Now you can fire up the virtual machine and open Microsoft Edge to take your website for a test drive. Take your time to test any functionality in detail to make sure it still works as expected. In the latest build (as the time of writing 10130) the browser is still named “Project Spartan”.

edge-browseemall

It may be entirely possible that your page works out of the box without the need to do anything as it was in our case. But not everybody will get so lucky especially if your page is more complicated or somewhat older. So let’s run down the most common and easily solvable problems and their solutions.

X-UA-Compatible

Pages that are using the X-UA-Compatible meta tag to force Internet Explorer into an older document mode may not render properly in Microsoft Edge if the page relies on the behavior of older Internet Explorer versions to work right. Of course these pages most likely won’t work in other browsers correctly. In this case you might have to do quite some work to get it working again in Microsoft Edge as Edge does no longer support the X-UA-Compatible modes. If you are able to force a specific browser onto your users you might want to look into Internet Explorer 11 Enterprise mode instead of supporting Microsoft Edge. This will not be a viable option for public facing websites.

New User Agent String

While it’s no longer state of the art to detect browsers instead of features it is still done in some code. This means that the completely reworked User Agent string of Microsoft Edge will through some scripts in a loop to detect it correctly. The IE 11 User Agent was still different from other browsers:

Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko

Microsoft Edge now used a User Agent String very much like Google Chrome and Opera which makes it harder to detect Edge correctly. The benefit of this is that older script will detect it as Chrome or Safari instead of just throwing errors for an unknown browser.

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.9600

So if your code still relies on browser detection by User Agent String you might need to update your code accordingly.

attachEvent / removeEvent

Up until Internet Explorer 10 you could attach and remove events from specific HTML elements using attachEvent or the method addEventListener:

// old API
button.attachEvent ("onmouseup", OnButtonUp);

// new API
 button.addEventListener ("mouseup", OnButtonUp, false);

The attachEvent and removeEvent API has been removed in Microsoft Edge and will no longer work. If you are still using this old API make sure to update and use addEventListener for Microsoft Edge and other modern browsers. As IE 8 does not support addEventListener you might need to use both.

currentStyle

Up until IE 11 you could use the currentStyle API to access the calculated style information for any HTML element. As this is a non-standard API it was removed in Microsoft Edge. You can use the commonly supported getComputedStyle() method.

var elem1 = document.getElementById("elemId");

// old
var currentStyle = elem1.currentStyle;

// new
var style = window.getComputedStyle(elem1, null);

There should no longer be any need for you to use currentStyle unless you need to support Internet Explorer 8.

Conditional Comments

Sometimes it is necessary to do special things so you can continue to support old version of IE. For example you might add special JavaScript to your page if the user uses Internet Explorer so you can simulate some features that this browser does not support. Most likely you will be able to just leave these conditional comments alone because, while Microsoft Edge does not support these, they should not be necessary for it to correctly display your page.

That said you might want to look into the places you are using these comments just to be on the safe side. We are using conditional comments like so:

<!--[if lt IE 9]>
<script src="/Content/plugins/html5shiv.js"></script>
<script src="/Content/plugins/jRespond/js/respond.min.js"></script>
<![endif]-->

Summary

These are the most common problems that can come up if your website is displayed in Microsoft Edge. As I said earlier most websites should continue to just work in Edge but of course you can never be sure so testing is the key. All in all I would say hands down Microsoft Edge is a big step forward for the browser made by Microsoft. Now if we could leave IE behind already that would be great.

As a side note: While testing with Microsoft Edge I was unable to get the developer tools to work at all. Hopefully this will be fixed in future versions to make a developers life easier. 

Cross Browser Testing

Browser Testing For Everyone

Automated & Manual Browser Testing - On Premise

Start 14-Day Free Trial

No Comments

Leave a Reply

Your email address will not be published.

Newsletter

Categories

Archive

Subscribe via RSS feed

Follow Us On