5 Ways to Ready Your Site for Microsoft Edge and Other Modern Browsers

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

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

2. 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):

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.

3. 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 ‘Tune, modernise and optimise your
website
‘.

4. 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 straightforward. 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
.

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

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:

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

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