Creating a more interactive web with Microsoft Edge

Microsoft Edge (formerly Project Spartan) is the name of Microsoft’s next generation web browser built into Windows 10. Over the past year, the Microsoft Edge team has worked hard to give us something better than ever before.

Let’s take a look at the challenges that Edge solves for a web developer. The biggest challenge for web developers is to create web apps that are compatible with all browsers. Previously, we had to determine the browser using their User-Agent. Once we know about the browser, we try to change the code (Html, CSS and JS) so that it can be supported by almost every browser. There’s a big problem with backwards compatibility – which means the same exact site can’t be rendered in the old browser version or the previously supported site version won’t be supported by the new browser due to the specificity of the old content.

Once a site is provided, you can share the structure in HTML tags, CSS and JavaScript. Now if I had to create a site, I would at least try my best to support Internet Explorer (IE), Google Chrome and Mozilla Firefox. The reasons are simple – they are the most used browser. With the advent of Windows 10 and Edge came a lot of new changes. Edge has changed a lot compared to IE.

Let’s take a look at the challenges and how Edge tries to solve them.

Change user-agent string

We all know that user-agent strings allow us to get information about a web browser such as type, engine, version and many other things. Using it, a large number of servers provide content based on browser type or similar criteria that can be sniffed out using user agents. The goal is to serve just the right content. What Microsoft Edge has done is through the simplicity of changing user agents to get the most up-to-date and updated content.

Let’s take a look at user agent strings used in both IE and Microsoft Edge:

  • Internet Explorer 11:

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

Mozilla / 5.0 (Windows NT 10.0) AppleWebKit / 537.36 (like KHTML, Gecko)

Chrome / 42.0.2311.135 Safari / 537.36 Edge / 12.10136

I would really recommend that web developers avoid UA sniffing as much as possible. If you really want to determine if certain features are supported by a web browser, then a few lines of script can get you results in a simple way. Now Microsoft Edge matches the ‘WebKit’ behavior, which means that Microsoft Edge works best when it comes to providing targeted content for browsers based on WebKit.

No more ActiveX!

To ensure that Microsoft Edge is not identified as Internet Explorer, things like ActivX have been completely removed.

Support for WebKit CSS

Generally, as a web developer we have to write interoperable content which means it should have prefixed and un-prefixed CSS, which of course is not the case.

For this reason, support for WebKit Prefixed CSS was added to IE to render a large number of modern (mobile) sites, showing an improvement of over 40% on mobile web sites. This proves that WebKit CSS preferences now depend on your browser to make a usable web render.

Microsoft Edge now adopts WebKit CSS, but parsing CSS is more complicated.

Going to the future!

Microsoft web developers have spent considerable time ensuring that they get a consistent feature set across browsers. They managed to get us the most requested features like ES6 (ECMAScript 6), HTTP / 2, responsive image and media capture.

Manage actual web content

It is said that sometimes the standard does not describe the actual web content. This means that interoperability is more than fully implementing a letter specification. There are many instances where the standard does not actually describe what web developers do. Because of these examples, the chances of a page not being rendered correctly increase.
An example of this is:

  • ‘Perverted’:

An easy solution was to parse the ‘distorted’ markup above.
There are similar cases when the page defines <মেটা অক্ষর সেট="utf8"> Instead <মেটা অক্ষর সেট="utf-8"> To define the character set of the page. This causes some unwanted results which makes the rendering inappropriate. However, Microsoft Edge is now more permitted to adopt “utf8” Value resulting from accurate rendering of the page.

Browser bug fixing

It has been found that many times, web developers begin to rely on misbehavior in a browser, resulting in ugly hacks or UA-sniffing to patch the problem. An example of this is Scrolltop This is why many sites start relying on non-interactive behavior until it becomes impossible to fix the problem in all browsers without breaking the web content. If this is fixed, it will probably break most of the behavior of many sites. The best way is to offer alternatives to the broken API which in this case was the document.scrollingElement property.

Microsoft Edge is getting ready for the web

These are just a few examples of the thousands of large and small inter usability changes made to new browser engines. During development, Microsoft Edge has consistently become more interoperable with the wider web than any previous Microsoft browser. It turns out that Edge is trying its best to align itself with other browsers where it is the best thing for the web. The long-term expectation is that web content, all browsers and specifications are aligned with a single well-defined well-planned behavior.

Check your site for future reference

Visit https://dev.modern.ie/tools/staticscan/?WT.mc_id=16749-DEV-digit-cs3-article&CR_CC=200687477 and scan a site for free.
This site runs a quick code scan on any URL to check for old libraries, layout issues, and accessibility. You can also write to the Microsoft India team on the modern web @ microsoft.com
I checked my site http://www.tvshowsreminder.com for issues and fixed them one by one to ensure interoperability across browsers.

Click here to see if your website meets the interoperable web standards and is ready for a variety of modern browsers, including Microsoft Edge.

Leave a Reply

Your email address will not be published.