Anubhav Ranjan dives into details of what has changed in the new Modern web & how to learn and unlearn as appropriate.
Microsoft Edge (formerly Project Spartan) is the name of Microsoft's next-generation web browser built into Windows 10. Over the past year, Microsoft Edge Team has worked hard to give us something better than ever before.
Let’s look at the challenges that Edge solves for a Web Developer. The biggest challenge that Web Developer faces is to create Web Apps which is compatible across all the browsers. Earlier, we had to determine the browser by using their User-Agent. Once we get to know about the browser, we try to tweak the code (Html, CSS and JS) so that it can be supported by almost every browsers. There is a major problem with the backward compatibility – which means that the same proper site can’t be rendered in an older browser version or the version of the site earlier supported will not be supported by the new browsers because of the old content specifics.
Given a site, you can divide structure into HTML Tags, CSS and JavaScripts. Now if I have to develop a site, I would try my best to support at least Internet Explorer (IE), Google Chrome and Mozilla FireFox. The reasons are very simple – they are most used browsers across. With the advent of Windows 10 and Edge, along with it, many new changes have come in here. Edge has brought in many changes in comparison to IE.
Let’s look at the challenges and how Edge tries to solve them.
Changes in the User-Agent String
We all know that User-Agent strings allow us to get information about a web browser like type, engine, version and various other things. Using this, a large number of Servers deliver content based on the type of browser or similar criteria which can be sniffed out using the User Agent. The goal is just to serve the right content. What Microsoft Edge has done is undergoing the simplicity of changing the User Agent to get the most latest and updated content.
Let’s look at the User Agent strings of both IE and Microsoft Edge:
- Internet Explorer 11:
Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko
- Microsoft Edge:
Mozilla/5.0 (Windows NT 10.0) AppleWebKit/537.36 (KHTML, like 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 detect if certain features are supported by the web browser then just a few lines of script might get you the result in easy ways. Now Microsoft Edge, matches the ‘WebKit’ behaviors which means that Microsoft Edge runs best when given the content intended for Browsers based on WebKit.
No more ActiveX!
In order to make sure that Microsoft Edge is not detected as Internet Explorer, things like ActiveX has been removed completely.
Support for WebKit CSS
Generally, as a web developer we should write interoperable content which means that it should contain prefixed and un-prefixed CSS, which is not the case however.
Due to this, the support for WebKit prefixed CSS was added in IE to render a very large number of modern (mobile) sites, which showed an improvement on more than 40% of mobile web sites. This proved that rendering a usable Web now depends on your browser supporting WebKit CSS prefixes.
Microsoft Edge now accepts WebKit CSS, however, it is trickier that just parsing CSS.
Heading towards the future!
Microsoft has spent considerable amount of time in making sure that Web Developers get a consistent feature set across browsers. They have managed to get us the most requested features like ES6 (ECMAScript 6), HTTP/2, responsive images and, Media Capture.
Handle actual web content
It is said that sometimes standards don’t describe the actual web content. What this means is that, interoperability is more than fully implementing a specification to the letter. There have been numerous cases where the standard doesn’t actually describe what web developers do. Because of these instances, chances of a page not getting rendered properly increases.
An example of this is:
- ‘Malformed’:
<meta http-equiv="refresh" content="0;http://foo.com" />
- ‘Correct’:
<meta http-equiv="refresh" content="0;url=http://foo.com" />
A simple solution to this was to parse the above ‘malformed’ markup.
Similar cases are there when page defines the <meta charset=”utf8”> instead of <meta charset=”utf-8”> to define the charset set of the page. Because of this as well some unwanted results happen which makes the rendering improper. However, Microsoft Edge is now more permissive in accepting the “utf8” value resulting in the correct rendering of the page.
Fixing Browser bugs
It has been found that many times, web developers start to depend on the incorrect behavior in one browser, leading to ugly hacks or UA-sniffing to patch the issue. An example of this is the scrollTop bug. Because of this a large number of sites started to depend on non-interoperable behavior till the point that it became impossible to fix the issue across all browsers without breaking the web content. If this is fixed, it will probably break most of the behavior for many sites. The best path is to offer the alternatives to broken APIs which in this case was document.scrollingElement property.
Microsoft Edge getting ready for the Web
These are just some examples of the thousands of large and small interoperability changes that have been made to the new browser engine. During development, Microsoft Edge has consistently been more interoperable with the broader Web than any previous Microsoft browser. It is seen that Edge is trying it’s best to align with other browsers where it is the best thing for the Web. The long-term hope is that web content, all browsers, and the specifications align to a single well-defined well-designed behavior.
Test your site for Future
Head over to https://dev.modern.ie/tools/staticscan/?WT.mc_id=16749-DEV-digit-cs3-article&CR_CC=200687477 and perform a Site Scan for free.
This site runs a quick code scan on any URL to check for out-of-date libraries, layout issues, and accessibility. You can also write to Microsoft India team at modernweb@microsoft.com
I have tested my site http://www.tvshowsreminder.com for the issues and fixing them one by one to ensure the interoperability across browsers.
Follow Us
