Can you determine a line of code for each browser?

Navigation
3

I want in Google Chrome my site has width: Xpx; and in Safari it has width: Ypx; , is it possible?

    
asked by anonymous 18.02.2015 / 18:47

1 answer

1

You can do this in several ways ...

Javascript "pure" 

var BrowserDetect = {
        init: function () {
            this.browser = this.searchString(this.dataBrowser) || "Other";
            this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown";
        },
        searchString: function (data) {
            for (var i = 0; i < data.length; i++) {
                var dataString = data[i].string;
                this.versionSearchString = data[i].subString;

                if (dataString.indexOf(data[i].subString) !== -1) {
                    return data[i].identity;
                }
            }
        },
        searchVersion: function (dataString) {
            var index = dataString.indexOf(this.versionSearchString);
            if (index === -1) {
                return;
            }

            var rv = dataString.indexOf("rv:");
            if (this.versionSearchString === "Trident" && rv !== -1) {
                return parseFloat(dataString.substring(rv + 3));
            } else {
                return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
            }
        },

        dataBrowser: [
            {string: navigator.userAgent, subString: "Chrome", identity: "Chrome"},
            {string: navigator.userAgent, subString: "MSIE", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Trident", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Firefox", identity: "Firefox"},
            {string: navigator.userAgent, subString: "Safari", identity: "Safari"},
            {string: navigator.userAgent, subString: "Opera", identity: "Opera"}
        ]

    };
    
    BrowserDetect.init();
    document.write("você está usando <b>" + BrowserDetect.browser + "</b> na versão <b>" + BrowserDetect.version + "</b>");

Example of use 

var BrowserDetect = {
        init: function () {
            this.browser = this.searchString(this.dataBrowser) || "Other";
            this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown";
        },
        searchString: function (data) {
            for (var i = 0; i < data.length; i++) {
                var dataString = data[i].string;
                this.versionSearchString = data[i].subString;

                if (dataString.indexOf(data[i].subString) !== -1) {
                    return data[i].identity;
                }
            }
        },
        searchVersion: function (dataString) {
            var index = dataString.indexOf(this.versionSearchString);
            if (index === -1) {
                return;
            }

            var rv = dataString.indexOf("rv:");
            if (this.versionSearchString === "Trident" && rv !== -1) {
                return parseFloat(dataString.substring(rv + 3));
            } else {
                return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
            }
        },

        dataBrowser: [
            {string: navigator.userAgent, subString: "Chrome", identity: "Chrome"},
            {string: navigator.userAgent, subString: "MSIE", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Trident", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Firefox", identity: "Firefox"},
            {string: navigator.userAgent, subString: "Safari", identity: "Safari"},
            {string: navigator.userAgent, subString: "Opera", identity: "Opera"}
        ]

    };
    BrowserDetect.init();


if (BrowserDetect.browser === "Chrome") {
 
  $("body").css('background','lightblue');
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><body></body>

modernizr

Another alternative would be to use the modernizr to determine the resources available in the client browser, with modernizr you can write styles arbitrarily depending on resource availability, look at the example

modernizr Example css 

.loginBox {
    box-shadow:0 10px 10px rgba(0, 0, 0, 0.3);
}

.no-boxshadow .loginBox {
    border: 1px solid #CCC;
    border-bottom: 3px solid #CCC;
}

If the box-shadow feature is not supported by the browser, alternative style will be .no-boxshadow .loginBox

Yepnopejs

You can combine any of the features mentioned above with Yepnopejs to load css or js files over some special condition.

Example with modernizr 

yepnope({
  test : Modernizr.fontface && Modernizr.canvas && Modernizr.cssgradients,
  yep  : 'normal.js',
  nope : ['polyfill.js', 'wrapper.js']
});

Example with function js 

 BrowserDetect.init();
  yepnope({
      test : BrowserDetect.browser == Chrome,
      yep  : 'normal.js',
      nope : ['polyfill.js', 'wrapper.js']
    });
    
18.02.2015 / 19:29
Clear document write Creating custimized authorization message