14

Is there a simple conditional statement, css command, html, jquery, javascript or simple PHP dynamic way of detecting the current browser?

<!if firefox>
    .element { top:4px; }
<![endif]>
<!if chrome>
    .element { top:6px; }
<![endif]>
<!if ie>
    .element { top:8px; }
<![endif]>
<!if opera>
    .element { top:10px; }
<![endif]>
<!if safari_webkit>
    .element { top:12px; }
<![endif]>

Can this Psuedo code be done in jQuery/JS/HTML or CSS PHP etc?

TheBlackBenzKid
  • 26,324
  • 41
  • 139
  • 209
  • Some useful info here http://stackoverflow.com/questions/952861/targeting-only-firefox-with-css – Billy Moat Aug 23 '12 at 10:51
  • I find it a bit... suspicious, to say the least, usage of four style rulesets instead of just two (one for IE8-, another for web browsers). Isn't the question about CSS3 (vendor-specific) rules, I wonder? – raina77ow Aug 23 '12 at 10:59

4 Answers4

19

With CSS there is no way you can achieve browser detection. However with PHP, ASP and other programming languages you can get browser detection within the page. I am not here to tell you the pro or cons about it - I take it you know about the bad and good about browser detection and web standards but here is the list.

PHP solution.

if(isset($_SERVER['HTTP_USER_AGENT'])){
    $agent = $_SERVER['HTTP_USER_AGENT'];
}

Then, compare it to what you want

For compare with, for example "firefox" you should do:

if(strlen(strstr($agent,"Firefox")) > 0 ){      
    $browser = 'firefox';
}
if($browser=='firefox'){
    echo '<style type="text/css">.element{top:2px}';
}

jQuery solution.

// Safari CSS and Webkit Google Chrome
if ($.browser.webkit) {
   $("#element").css('top', '2px');
} else if ( $.browser.safari ) //not fully supported on 1.7 jQuery {
   $("#element").css('top', '2px');
// Opera CSS
} else if ( $.browser.opera ) {
   $("#element").css('top', '2px');
// Internet Explorer CSS
} else if ( $.browser.msie ) {
   $("#element").css('top', '2px');
// Mozilla FireFox CSS
} else if ( $.browser.mozilla ) {
   $("#element").css('top', '2px');
// Normal Revert, careful and note your the use of !important
} else {
   $("#element").css('top', '2px');
   // You can have normal JavaScript between these too
   document.getElementById("element").style.top="2px";
}

Mootools solution.

if (Browser.ie){
    // This code will only run in IE
}

if (Browser.firefox2){
    // This code will only run in Firefox 2
}
if (Browser.firefox){
    // This code will only run in Firefox 
} 
if (Browser.chrome){
    // This code will only run in Chrome
} 
if (Browser.opera){
    // This code will only run in Chrome
}   
if (Browser.ie6 || Browser.ie7){
    // Please upgrade your browser
}
// Also notice you can use Engine.trident
if(Browser.Engine.trident) {

}

Prototype solution.

if(Prototype.Browser.IE){
  // do something IE specific
}
if(Prototype.Browser.Opera){
  // do something Opera specific
}
if(Prototype.Browser.WebKit){
  // do something WebKit specific
}
if(Prototype.Browser.MobileSafari){
  // do something MobileSafari specific - iPhone etc
}
if(Prototype.Browser.Gecko){
  // do something Gecko specific
}
tbodt
  • 16,609
  • 6
  • 58
  • 83
AlphaApp
  • 615
  • 1
  • 7
  • 15
  • You could also use the Javascript variant: http://www.w3schools.com/js/js_browser.asp – Tom Naessens Aug 23 '12 at 10:56
  • 1
    +1 for detail and approach. It works very well. At last a simple jQuery way to detect the current browser. Brilliant. – TheBlackBenzKid Aug 23 '12 at 11:57
  • 2
    $.browser is deprecated since 1.3 and removed since 1.9 http://api.jquery.com/jQuery.browser/ – Helto Mar 28 '13 at 15:27
  • @Helto what is the new alternative as I cannot seem to find it? – TheBlackBenzKid Apr 02 '13 at 09:09
  • @TheBlackBenzKid jQuery dropped support for this because it is unreliable. The solution is to just use straight up javascript, but keep in mind you can't count on it 100%. The consensus seems to be to look for features that you need instead of just browser name This question has some good links on it referencing testing for features: http://stackoverflow.com/questions/2490452/using-javascript-to-detect-browser-type To test features with jquery look at .support: http://api.jquery.com/jQuery.support/ – Helto Apr 05 '13 at 16:29
  • I noticed support has gone. Is there an alternative. I would prefer to stick with existing library. – TheBlackBenzKid Apr 09 '13 at 13:39
3

To do this with CSS only.

You can target Firefox with this 'hack':

@-moz-document url-prefix() {...}

And Chrome & Safari together like this: 

@media screen and (-webkit-min-device-pixel-ratio:0) {...}

But not necessarily recommended...

Matthew Felgate
  • 166
  • 12
1

Using javascript: 

navigator.appCodeName

Stores the browser codename:

navigator.appName

Is the name of the browser.

But I would recommend using jQuery for more efficiency and less headaches:

if ($.browser.webkit) {
   $("#div ul li").css( "display","inline-table" );
} else if ( $.browser.msie ) {
   $("#div ul li").css( "display","inline" );
} else {
   $("#div ul li").css( "display","inline-table" );
}

EDIT: According to jQuery.com:

  • webkit (Chrome and Safari)

  • safari (deprecated)

  • opera

  • msie (Internet Explorer)

  • mozilla (Firefox)

Source: JQuery Site

Evandro Silva
  • 1,392
  • 1
  • 14
  • 29
  • Can you show me a full sample of how to add css and html inside the elseif and all the elseif combinations, for example adjusting the top or left or margin property values – TheBlackBenzKid Aug 23 '12 at 11:30
0

In php you can use this code to detect browsers

<?php
  $msie = strpos($_SERVER["HTTP_USER_AGENT"], 'MSIE') ? true : false;
  $firefox = strpos($_SERVER["HTTP_USER_AGENT"], 'Firefox') ? true : false;
  $safari = strpos($_SERVER["HTTP_USER_AGENT"], 'Safari') ? true : false;
  $chrome = strpos($_SERVER["HTTP_USER_AGENT"], 'Chrome') ? true : false;
?>
Sohail Yasmin
  • 498
  • 5
  • 16