Is there a simple conditional statement, css command, html, jquery, javascript or simple PHP dynamic way of detecting the current browser?
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.
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}';
}
// 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";
}
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) {
}
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
}
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
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...
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;
?>