Getting started with Microsoft Edge as a Developer

Edge is Microsoft’s newest browser for Windows 10. I genuinely dig it, the overall UX feels more like an “app” than a “browser” if that makes any sense. It’s still missing some key features like cloud sync’d favs and of course extensions (which are coming as they were announced at //BUILD but no official release date as of yet).

Microsoft Edge Platform Status

Is Edge better than Internet Explorer? Yes, 100%, mostly because it’s not Internet Explorer, it’s an entirely new ground up rewrite. Proof? It’s now my day to day browser, before was a mix of FireFox & Chrome which I still use as needed for development but my day to day browser is now Edge.

So will your site/app just work? Ideally yes, but in reality perhaps not ;) This is primarily due to a lot of legacy hacks/shims & agent-checks that we’ve had to use to get things working in IE in the past.

So here’s a few tips to get you started

User agent checks

Edge == Chrome;

Don’t do them for Edge! Yes you had to do it before, no you shouldn’t do it anymore. To try an enforce this behavior the Edge team has changed the user-agent (UA) string so that it identifies itself as Chrome/Webkit. Here’s my user-agent for Edge

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.10240 

And here it is for Google Chrome

Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.155 Safari/537.36

Well those look pretty similar ;) So why did the Edge team do this? The reality is often developers would check the UA to identify if the browser was Internet Explorer or Chrome or FireFox and decide which version of the content to send back (often a downgraded experience for Explorer). By simply changing the UA sites that aren’t explicitly looking for Edge in the UA are getting the same content (HTML, JavaScript, CSS etc.) as users of Chrome, and therefore are getting a better more modern experience (which works in Edge).

Frameworks & Libraries like jQuery

This one is pretty simple, keep them up to date. This can cause problems because new versions of libraries like jQuery might not be backwards compatible and so will require some effort. But think of it this way, ALL your users benefit when you are using the latest, fastest, most stable frameworks so yeah, just do it.

Use modern.ie

modern.ie has some awesome resources like

  • Virtual Machine Images
    • Test versions of IE from 6 through 11 & Edge using virtual machines you download and manage locally.
  • Remote App
    • Test your site with Azure Remote App which allows you to run IE & Edge as if it was local on Windows or Mac (but it’s running in the cloud)
  • Generate Screenshots
    • See how your site renders across 9 common browsers and devices.
  • Site Scan
    • Run a quick static code scan on any URL to check for out-of-date libraries, layout issues and accessibility.

It’s a handy site with loads of articles, tools, status updates etc. Well worth checking out.

Site Scan

I think the site scan feature is the most valuable resource on the modern.ie site. It will pull down the page and linked resources (js & css) and do static code analysis looking for outdated libraries, legacy css prefixes, browser checks that are no longer needed and more. Better yet it will give guidance on how to fix including the file, line number and related resources, try running it on your site now.

Microsoft Edge Site Check

Hrm, looks like I have some work to do on this blog…

Is “X” supported in Edge? If not will it?

For a complete list of Supported, In Development, Prefixed & Under Concideration or Not Currently Planned features check out the Platform Status page.

Microsoft Edge Platform Status

Questions, problems, need some help?

Post your questions to the Microsoft-Edge StackOverflow section (be sure to tag it as microsoft-edge). The community is super active in answering IE & Edge related questions to help you out.

@marc_gagne

Leave a Comment

Your email address will not be published. Required fields are marked *