5 ways to make your site rock on the modern web…and Microsoft Edge too

Edge is Microsoft's new web browser sporting a new rendering engine – EdgeHTML – and an underlying OS to boot in Windows 10. Since upgrades from Windows 7, 8 and 8.1 will be free for most, you can expect a huge influx of Edge users hitting sites in the coming months. Edge is a departure from the past, actually to complete rewrite from past versions of Internet Explorer and I’m sure many web devs will welcome that. With that in-mind, I wanted to share five ways in which you can prepare your site for modern web interoperability and also test for Microsoft Edge in parallel:

Update your JavaScript Libraries

Common libraries like jQuery are often updated to address bugs when new browser versions are released. By simply updating your JS frameworks, you can avoid many compatibility bugs with Edge. In our internal research we found that 57% of the top 20,000 sites are using JavaScript frameworks that have issues that have been fixed in newer versions of the same library. You can use the site scanner to determine if you are using out of date JavaScript frameworks on your sites.

Avoid CSS Prefixes

CSS prefixes are used by browser vendors to implement new, emerging CSS features before they have been fully ratified by the W3C. If a vendor implements a CSS prefix, it will look something like the example below (this is an IE-specific implementation of the 'hyphens' feature to hyphenate text across multiple lines):

-ms-hyphens: auto;

It's really common for sites to have missing vendor-specific prefixes, or have implemented vendor-specific prefixes when they are not required in common CSS properties. This may cause a webpage to render incorrectly in Microsoft Edge or other modern browsers.

Browser vendors are using prefixes much less now because of the management problems associated with them. Some browsers, Microsoft Edge included, rarely if ever use prefixes at all.

Where possible, avoid the use of vendor-specific prefixes. However, if you absolutely must use vendor prefixes, use Grunt PostCSS to automate the management of prefixes within your CSS.

Avoid Browser Detection

Some webpages use browser detection techniques to determine how the webpage should render across many different versions of browsers. We recommend using feature detection; a practice that first determines if a browser or device supports a specific feature and then chooses the best experience to render based on this information.

Feature detection is a great alternative to browser detection and is commonly used via popular JavaScript libraries like Modernizr, or through feature detection code. Feature detection is often used with Polyfills to implement modern features in older browsers that do not support them natively.

For more details on how to use Modernizr, Polyfills and other compatibility techniques, see Martin Kearn's article on 'Tune, modernise and optimise your website'.

Become plugin free

Edge doesn't support plugins, so it's a good time to consider how to move away from proprietary plugins like Flash and Silverlight. Edge does support Flash, but rather than using a plugin architecture Flash is delivered with the browser, and is updated and patched centrally by the Edge team in collaboration with Adobe. For some sites, moving away from plugins is pretty straight forward. However, many sites will find this difficult, particularly those that are delivering media content. The Edge team have provided guidance on how to move to HTML for premium content over on the Edge Blog.

Ensure Edge Rendering Mode

If the <!DOCTYPE> directive is missing or doesn't specify a standards-based document type, Edge may incorrectly display your page. The scanner runs a simple test to determine that your site is set up correctly, so enter your site URL and find out quickly if it passes. If you want to see what the actual test looks like, you can view the code for the scanner over on GitHub.

Resources

• Announcing the latest improvements for the F12 developer tools in Windows 10
• Technical sessions on our new browser, Microsoft Edge
• Web development talks from Build 2015

More hands-on with JavaScript

This article is part of the web development series from Microsoft tech evangelists on practical JavaScript learning, open source projects, and interoperability best practices including Microsoft Edge browser and the new EdgeHTML rendering engine.

We encourage you to test across browsers and devices including Microsoft Edge – the default browser for Windows 10 – with free tools on dev.modern.IE:

• Scan your site for out-of-date libraries, layout issues, and accessibility
• Use virtual machines for Mac, Linux, and Windows
• Remotely test for Microsoft Edge on your own device
• Coding Lab on GitHub: Cross-browser testing and best practices

In-depth tech learning on Microsoft Edge and the Web Platform from our engineers and evangelists:

• Microsoft Edge Web Summit 2015 (what to expect with the new browser, new supported web platform standards, and guest speakers from the JavaScript community)
• Woah, I can test Edge & IE on a Mac & Linux! (from Rey Bango)
• Advancing JavaScript without Breaking the Web (from Christian Heilmann)
• The Edge Rendering Engine that makes the Web just work (from Jacob Rossi)
• Unleash 3D rendering with WebGL (from David Catuhe including the vorlon.JS and babylonJS projects)
• Hosted web apps and web platform innovations (from Kevin Hill and Kiril Seksenov including the manifold.JS project)

More free cross-platform tools & resources for the Web Platform:

• Visual Studio Code for Linux, MacOS, and Windows
• Code with node.JS and free trial on Azure