5 Ways to Make Your Site Rock on the Modern Web (and Microsoft Edge)

This article is part of a web development series from Microsoft. Thank you for supporting the partners who make SitePoint possible.

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.

Continue reading %5 Ways to Make Your Site Rock on the Modern Web (and Microsoft Edge)%

by Martin Beeby via SitePoint