Internet Explorer changes the User-Agent string again

Yesterday, a new build of Windows 10 preview was released, which includes Internet Explorer having quite a lot of what is being prepared for IE 12. A significant new feature is another change in the string that is used in the HTTP protocol to identify the browser. Recall that IE 11 removed compatible and MSIE. IE 12 will go even further and remove Trident. On the contrary, it adds Edge. As a result, some systems recognize IE 12 as Chrome. This is a purpose because a lot of IE developers have blocked modern tech.

So what does the User-Agent string in Internet Explorer on Windows 10 preview look like now?

Mozilla/5.0 (Windows NT 6.4; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.143 Safari/537.36 Edge/12.0

It’s basically the same Uset-Agent string that Chrome uses, but it still has a Edge/12.0 note stuck to it at the end.

Use feature detection

The basic principle of feature detection is not to detect the browser version and based on that to decide whether it supports the technique. The correct way is to find out the support for the technique directly.

HTML

In the case of techniques 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>

JavaScript

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

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

CSS

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 looks at CSS Transitions support:

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
}

Use responsive design

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?