CSS では、ブラウザの検出を実現する方法はありません。ただし、PHP、ASP、およびその他のプログラミング言語を使用すると、ページ内でブラウザーを検出できます。私はそれについて賛否両論を伝えるためにここにいるわけではありません - ブラウザの検出と Web 標準の良い点と悪い点については知っていると思いますが、ここにリストがあります。
PHP ソリューション。
if(isset($_SERVER['HTTP_USER_AGENT'])){
$agent = $_SERVER['HTTP_USER_AGENT'];
}
次に、それを必要なものと比較します
たとえば「firefox」と比較するには、次のようにする必要があります。
if(strlen(strstr($agent,"Firefox")) > 0 ){
$browser = 'firefox';
}
if($browser=='firefox'){
echo '<style type="text/css">.element{top:2px}';
}
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";
}
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) {
}
プロトタイプ ソリューション。
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
}