Determine what browser is being used, then style a class dependant on that

Question

Is there a way to check what browser the site is being viewed in, and then based upon that change certain elements within a CSS class so that it looks the same on all browsers?

Is there a way to do this in CSS?

EDIT:

Right ok I have gotten it to work in IE and firefox now, but it looks slightly off in chrome....is there some Javascript to detect if I am using chrome, and then based upon this change the margin-bottom of the class #titleAreaBox?

you can't do that will CSS can I give you an answer on jQuery? or JS? — Mohammad Areeb Siddiqui, Jun 11 '13 at 18:04
There are better ways of handling most incompatibilities. Can you be more explicit in your question as to what behavior you are trying to modify, error or effect you are experiencing? — Rob Allen, Jun 11 '13 at 18:07
Don't do this. Instead, use Modernizr to do _feature detection_. — SLaks, Jun 11 '13 at 18:08
check [this](http://www.sitepoint.com/detect-css3-property-browser-support/) — MaNKuR, Jun 11 '13 at 18:09
I would read up on the concept of [Progressive Enhancement](http://en.wikipedia.org/wiki/Progressive_enhancement), so that the basic features work in older browsers, and you can add CSS3 styling, and browsers which support CSS3 will use them. — Nick R, Jun 11 '13 at 18:12

score 3 · Answer 1 · answered Jun 11 '13 at 18:08

3

You can have progressively-enhanced CSS by using Modernizr:

Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.

answered Jun 11 '13 at 18:08

Alex W

37,233
13
109
109

score 1 · Answer 2 · edited Jun 11 '13 at 18:37

How about using Conditional CSS?

It runs server side and lets you put conditions in your CSS code here's an Example from the project's website:

body {
    font: 90%/1.45em "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #fff;
}

body, html {
    height: 100%;
    width: 100%;
}

.container {
    text-align: center;
    font-size: 3em;
}

[if IE].container {
    height: 100%;
    width: 100%;
    text-align: center;
    line-height: 2em;

    [if gte IE 7]background: url('ie7.png') no-repeat center center;
    [if lte IE 6]background: url('ie.jpg') no-repeat center center;
}

[if Webkit].container {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 70px;
    width: 400px;
    margin-top: -125px;
    margin-left: -200px;
    padding-top: 180px;

    -webkit-border-radius: 30px;
    -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);

    background: url('webkit.png') no-repeat center 30px;
    background-color: #eee;

    -webkit-text-stroke: 1px #555;
    text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
}

[if Opera].container {
    position: absolute;
    top: 50%;
    height: 60px;
    width: 100%;
    margin-top: -100px;
    padding-top: 140px;

    background: url('opera.png') no-repeat center 10px;
    background-color: #ccc;
}

[if Gecko].container {
    position: absolute;
    top: 0;
    left: 50%;
    height: 100%;
    width: 300px;
    margin-left: -150px;

    font-size: 32px;
    line-height: 2em;

    background: url('moz.png') no-repeat center center;
    background-color: #ddddff;
}

score 0 · Answer 3 · answered Jun 11 '13 at 18:07

You can do this for Internet Explorer with conditional comments, for example:

<!--[if IE 6]>
    // IE6
<![endif]-->
<!--[if lte IE 8]>
    // IE8 or below
<![endif]-->

For other browsers, you will have to use JavaScript. (Hint: try using navigator.userAgent, which on my computer is "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.110 Safari/537.36".) For more information, see this link.

score 0 · Answer 4 · answered Jun 11 '13 at 18:07

0

You need the navigator object for this

answered Jun 11 '13 at 18:07

Jayram

18,820
6
51
68

score 0 · Answer 5 · 2013-06-11T18:18:07.123

For Internet explorer you can add this inside the head html tag:

<!--[if IE 6]>
...include IE6-specific stylesheet here...
<![endif]-->
<!--[if IE 7]>
...include IE7-specific stylesheet here...
<![endif]-->
<!--[if lte IE 8]>
    // IE8 or below
<![endif]-->

For mozilla you can add this to your stylesheet to specify css code only for mozilla browser

<style type="text/css">
@-moz-document url-prefix() {
    h1 {
        color: red;
    }
}

/***** Selecor Hacks ******/

/* IE6 and below */
* html #uno  { color: red }

/* IE7 */
*:first-child+html #dos { color: red } 

/* IE7, FF, Saf, Opera  */
html>body #tres { color: red }

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }

/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez  { color: red  }
}

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
 #veintiseis { color: red  }
}

/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece  { color: red  }

/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red  }

/* Everything but IE6-8 */
:root *> #quince { color: red  }

/* IE7 */
*+html #dieciocho {  color: red }

/* Firefox only. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red }

/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red  }



/***** Attribute Hacks ******/

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* Everything but IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
</style>

I'm guessing for IE10 he wont need that, only for older versions, because IE10 sucks less i guess :) — , Jun 11 '13 at 18:12
Ah ok that has worked for mozilla thanks....is ther any other code like this for chrome, safari etc? — Callum Holden, Jun 11 '13 at 18:15
Here you go i edited the Answer i hope it helps or look at http://browserhacks.com/ for more — , Jun 11 '13 at 18:18

score 0 · Answer 6 · edited May 23 '17 at 11:50

You can do it via PHP using $_SESSION['HTTP_USER_AGENT']

It is also possible to target IE browser via HTML : Try:

<!--[if IE 6]><link rel="stylesheet" href="path_to_style_ie6.css" type="text/css" media="screen, projection"><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="path_to_style_ie7.css" type="text/css" media="screen, projection"><![endif]-->

Or within the CSS file see overflow question: Apply CSS rules if browser is IE

Mohammad Areeb Siddiqui · Answer 7 · 2013-06-12T06:54:54.223

0

Do it in jQuery like this:

$(document).ready(function(){

    if(navigator.userAgent.indexOf("Mozilla") > 0 )
        $(".titleAreaBox").css("margin-top", changed_value);

    if (navigator.userAgent.indexOf("MSIE") > 0 )
        $(".titleAreaBox").css("margin-top", changed_value);

    if (navigator.userAgent.indexOf("Chrome") > 0)
        $(".titleAreaBox").css("margin-top", changed_value);

    if(navigator.userAgent.indexOf("Opera") > 0 ) 
        $(".titleAreaBox").css("margin-top", changed_value);

});

edited Jun 12 '13 at 06:54

answered Jun 11 '13 at 18:12

Mohammad Areeb Siddiqui

9,795
14
71
113

Ah ok, is there a way to instead of going to a different css file. Reference a class on the page, and then change it dependant on the browser? – Callum Holden Jun 11 '13 at 18:17
yeah there is! just check it out in a minute or two! – Mohammad Areeb Siddiqui Jun 11 '13 at 18:18
@CallumHolden check it out now! – Mohammad Areeb Siddiqui Jun 11 '13 at 18:20
for example i am trynig to set the margin-top position, so that it is the same in all browsers. I need to change it now for chrome....how would I do this? – Callum Holden Jun 11 '13 at 18:41
and also what is target_object? – Callum Holden Jun 11 '13 at 18:41
so what I have is a class called titleAreaBox, what I want to be able to do is change the margin-top property within this class using your method? – Callum Holden Jun 11 '13 at 18:44

score 0 · Answer 8 · answered Jun 11 '13 at 18:22

As someone else mention, Modernizr is ideal for this. Checking for browser version isn't recommended anymore. Instead you should test for functionality that is needed. You can use a library like Modernizer to aid you in this.

EG: To check for geolocation functionality you can use this check:

if (Modernizr.geolocation) { 
    //your code 
}

If you are checking browser version, odds are you are looking to get a certain piece of functionality out of it, like geolocation or AJAX (IE uses different libraries to accomplish this over its lifetime for some reason).

Determine what browser is being used, then style a class dependant on that

8 Answers8