Internet Explorer opět změní User-Agent řetězec

Včera vyšlo nové sestavení Windows 10 preview, které obsahuje Internet Explorer mající celkem hodně z toho, co se připravuje pro IE 12. Podstatnou novinkou je další změna v řetězci, který slouží v protokolu HTTP pro identifikaci prohlížeče. Připomeňme, že IE 11 odebral compatible a MSIE. IE 12 půjde ještě dál a odebere Trident. Naopak přidává Edge. Výsledek je takový, že některé systémy rozpoznají IE 12 jako Chrome. Je to účel, protože hodně vývojářů pro IE blokovalo moderní techniky.

Jak tedy User-Agent string v Internet Exploreru na Windows 10 preview nyní vypadá?

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

Je to v podstatě stejný Uset-Agent řetězec, který používá Chrome, jen má na konci ještě přilepenou poznámku Edge/12.0.

Používejte feature detection

Základní princip feature detection je nezjišťovat verzi prohlížeče a na základě toho rozhodnout, zda danou techniku podporuje. Správné je zjistit podporu dané techniky přímo.

HTML

V případě technik, ke kterým se přistupuje přes HTML, je to přímočaré. Jako v případě HTML5 videa:

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

JavaScript

V technikách přístupných přes JavaScript se pak používá detekce potřebných metod:

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

CSS

Když se jedná o CSS, není to tak snadné. Je potřeba použít JavaScript. Princip je ale obdobný, tentokrát se detekují vlastnosti. Tento příklad zjišťuje podporu 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
}

Používejte responzivní design

Nevšímejte si User-Agent řetězce. Používejte responzivní design, přesněji media queries, konkrétně min-width. Pokud si s tím nevystačíte, máte k dispozici ještě screen.orientation. Skutečně potřebujete vědět, jestli má uživatel telefon, nebo stolní počítač? Nepotřebujete náhodou jen zjistit, jak je displej široký a jestli má víc na šířku, nebo na výšku?