Can you determine a line of code for each browser?

Question

Can you determine a line of code for each browser?

Asked 9 years, 9 months ago

Viewed 80 times

3

I want my Google Chrome site to have width: Xpx; and in Safari have width: Ypx;, this is possible?

By javascript I believe you can determine which file to load for each browser... examples you can adapt to your need: http://prodwebdigital.blogspot.com.br/2013/06/identificando-browser-para-uso-de-css.html and http://tableless.com.br/identificando-os-ies/

– Rafael Withoeft

2015/02/18 at 17:51

1 answer

Browser other questions tagged css google-chrome safari

You are not signed in. Login or sign up in order to post.

by Isvaldo Fernandes • **1,690** points · Answer 1 · 2015-02-18T18:29:26+00:00

You can do this in many 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>

modernize

Another alternative would be to use modernizr to determine the resources available in the client’s browser, with modernizr you can write styles arbitrarily according to the availability of resources, 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 appeal box shadow no browser support, 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 under 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']
    });