web-dev-qa-db-fra.com

PHP / HTML / CSS - Si FireFox, est Chrome ou Safari

Existe-t-il une instruction conditionnelle simple, une commande css, html, jquery, javascript ou une simple PHP méthode dynamique de détection du navigateur actuel?

<!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]>

Ce code Psuedo peut-il être fait en jQuery/JS/HTML ou CSS PHP etc?

cssfirefoxgoogle-chromeif-statementconditional
14
TheBlackBenzKid

Avec CSS, il n'y a aucun moyen de détecter le navigateur. Cependant, avec PHP, ASP et d'autres langages de programmation, vous pouvez obtenir la détection du navigateur dans la page. Je ne suis pas ici pour vous dire les avantages ou les inconvénients à ce sujet - je suppose que vous connaissez les mauvais et bon sur la détection de navigateur et les normes Web, mais voici la liste.

Solution PHP.

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

Ensuite, comparez-le à ce que vous voulez

Pour comparer avec, par exemple "firefox", vous devez faire:

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

solution jQuery.

// 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";
}

Solution Mootools.

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) {

}

Solution prototype.

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
}
19
AlphaApp

Pour ce faire avec CSS uniquement.

Vous pouvez cibler Firefox avec ce "hack":

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

Et Chrome & Safari ensemble comme ceci:

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

Mais pas forcément recommandé ...

3
Matthew Felgate

En utilisant javascript:

navigator.appCodeName

Stocke le nom de code du navigateur:

navigator.appName

Est le nom du navigateur.

Mais je recommanderais d'utiliser jQuery pour plus d'efficacité et moins de maux de tête:

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: Selon jQuery.com:

  • webkit (Chrome et Safari)

  • safari (obsolète)

  • opera

  • msie (Internet Explorer)

  • mozilla (Firefox)

Source: Site JQuery

1
Evandro Silva

En php, vous pouvez utiliser ce code pour détecter les navigateurs

<?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;
?>
0
Sohail Yasmin