Как изменить ссылку на стиль в зависимости от браузера и его версии?

Question

[Day]

Люди добрые и недобрые), подскажите в каком направлении идти дальше?) Только не на ***))

Есть код js определяющий браузер и его версию, c результатом допустим браузер chrome, сокращенная версия <=51, Необходимо изменить ссылку у стиля на новую. Т.е. в зависимости от браузера и его версии присваивать свой стиль.

function getBrowser() {
    var ua = navigator.userAgent;

    var bName = function () {
        if (ua.search(/Edge/) > -1) return "edge";
        if (ua.search(/MSIE/) > -1) return "ie";
        if (ua.search(/Trident/) > -1) return "ie11";
        if (ua.search(/Firefox/) > -1) return "firefox";
        if (ua.search(/Opera/) > -1) return "opera";
        if (ua.search(/OPR/) > -1) return "operaWebkit";
        if (ua.search(/YaBrowser/) > -1) return "yabrowser";
        if (ua.search(/Chrome/) > -1) return "chrome";
        if (ua.search(/Safari/) > -1) return "safari";
        if (ua.search(/Maxthon/) > -1) return "maxthon";
    }();

    var version;
    switch (bName) {
        case "edge":
            version = (ua.split("Edge")[1]).split("/")[1];
            break;
        case "ie":
            version = (ua.split("MSIE ")[1]).split(";")[0];
            break;
        case "ie11":
            bName = "ie";
            version = (ua.split("; rv:")[1]).split(")")[0];
            break;
        case "firefox":
            version = ua.split("Firefox/")[1];
            break;
        case "opera":
            version = ua.split("Version/")[1];
            break;
        case "operaWebkit":
            bName = "opera";
            version = ua.split("OPR/")[1];
            break;
        case "yabrowser":
            version = (ua.split("YaBrowser/")[1]).split(" ")[0];
            break;
        case "chrome":
            version = (ua.split("Chrome/")[1]).split(" ")[0];
            break;
        case "safari":
            version = (ua.split("Version/")[1]).split(" ")[0];
            break;
        case "maxthon":
            version = ua.split("Maxthon/")[1];
            break;
    }

    var platform = 'desktop';
    if (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase())) platform = 'mobile';

    var browsrObj;

    try {
        browsrObj = {
            platform: platform,
            browser: bName,
            versionFull: version,
            versionShort: version.split(".")[0]
        };
    } catch (err) {
        browsrObj = {
            platform: platform,
            browser: 'unknown',
            versionFull: 'unknown',
            versionShort: 'unknown'
        };
    }

    return browsrObj;
}

Результат функции:

Object {
platform: "desktop", 
browser: "chrome", 
versionFull: "51.0.2681.1", 
versionShort: "51"
}

Answer 1

[Ihor Gevorkyan]

<link id="styles" rel="stylesheet" href="/css/styles.css">

var browserObj = getBrowser(),
    linkElement = document.getElementById('styles');

    linkElement
      .setAttribute('href', '/css/' + browserObj.browser + '.styles.css'); // /css/chrome.styles.css

Comments

[Day]

Спасибо, интересное и простое решение, если не учитывать версию браузера

[Ihor Gevorkyan]

firstDay: точно таким же образом Вы можете встроить и версию браузера, прям в этот же пример.

Answer 2

[Александр]

А зачем, если не секрет, для каждого браузера/версии подгружать свой стиль?

Comments

[Day]

Все версии не надо, нужно только отсеить старые oper-ы от новых(т.е. до определенной версии) и старые firefox-ы от новых.