IE11 has a new User-Agent string

Internet Explorer 11 differs from previous versions, among other things, in several important details. One of them is to change the string that the browser identifies itself and that it sends in each HTTP request. While in previous versions the changes were conservative and more or less only the version number was changed, now the identifier MSIE has been removed and the note like Gecko has been added. As a result, some systems recognize IE 11 as Firefox.

Why did the change happen?

However, there is no omission, joke or inconsistency behind it, but it is intentional. The idea is to free IE 11 from poorly written or outdated algorithms for recognizing old versions of the browser that are so flawed that they would consider Internet Explorer 11 archaic.

Some pages are poorly written or do not have regularly updated JavaScript libraries. The most common mistake is to recognize the browser and decide which technology to use. For example, if it is IE 8 and later, the proprietary Silverlight will be used instead of the video tag. The correct way to use feature detection is to see if the browser supports the video tag. Internet Explorer is most often identified by the substring MSIE. Therefore, IE 11 does not include it, so that web servers return code for modern browsers, which rightly include it.

What does it affect?

While the change will solve user problems on most broken pages, the situation can get worse on a handful of poorly written pages.

The user-agent string of Internet Explorer 11 is intended to indicate that it is a modern browser. It looks like this:

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

Tokens outside the bracket are compatible in nature. Only tokens in parentheses make sense. The Windows version is determined first, followed by the processor architecture, then the rendering engine version, and finally the browser version.

How to recognize technology support correctly in principle?

If you really know how to write websites, you use feature detection and don't solve anything. Therefore, you may not be interested in this change at all. However, if you let a framework find out the type and version of the browser, you have to take into account that you can do more harm than good. Any algorithm counts on a limited number of inputs. Individual inputs (in this case browser versions) increase over time and it is necessary to update the decision-making mechanisms accordingly, whether it is jQuery or Browser Capabilities in ASP.NET.

The basic principle of feature detection is not to detect the browser version and to decide whether it supports the technology. The correct way is to find out the support for the technology directly. In the case of technologies that are accessed via HTML, this is straightforward. As in the case of HTML5 video:

<video src="video.mp4">
    Aktualizuje si prohlížeč nebo si kupte novější zařízení.
</video>

In technologies accessible via JavaScript, detection of the necessary methods is used:

function isCanvasSupported() {
    var elem = document.createElement('canvas'); 
    return !!(elem.getContext && elem.getContext('2d'));
}

When it comes to CSS, it’s not that easy. JavaScript is required. But the principle is similar, this time the properties are detected. This example finds support for CSS Transitions:

function firstSupportedPropertyName(prefixedPropertyNames) {
    var tempDiv = document.createElement("div");
    for (var i = 0; i < prefixedPropertyNames.length; ++i) {
        if (typeof tempDiv.style[prefixedPropertyNames[i]] != "undefined")
            return prefixedPropertyNames[i];
    }
    return null;
}

transitionName = firstSupportedPropertyName(["transition", "msTransition", "MozTransition", "WebkitTransition", "OTransition"]);

if (!transitionName) {
    // prohlížeč nepodporuje transitions
}

Only discover a device when you really need to know it

Ignore the User-Agent string. Use responsive design, more precisely media queries, specifically min-width. If that’s not enough, you also have screen.orientation. Do you really need to know if a user has a phone or a desktop computer? Don't you just need to find out how wide the display is and whether it is more wide or tall?

Only in a few cases is it really necessary to find out the type of device. Often this is for performance reasons. For example, if you're programming a server that provides video streams, then you'll probably want to find devices with ARM processors and limit their bitrate, because adaptive streaming could start sending too much bitrate through the network, but it might not be able to handle the processor.