javascript - 使用されているブラウザを特定し、それに依存するクラスのスタイルを設定します

Question

サイトが表示されているブラウザを確認し、それに基づいて CSS クラス内の特定の要素を変更して、すべてのブラウザで同じように見えるようにする方法はありますか?

CSSでこれを行う方法はありますか？

編集：

IEとFirefoxで動作するようになりましたが、クロムでは少しずれているように見えます....クロムを使用しているかどうかを検出するJavascriptがありますか？これに基づいて、クラスのマージンボトムを変更します#titleAreaBox?

Answer 1

条件付き CSSを使用するのはどうですか?

サーバー側で実行され、CSS コードに条件を入れることができます。これは、プロジェクトの Web サイトの例です。

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

Answer 2

$_SESSION['HTTP_USER_AGENT'] を使用してPHP経由で実行できます

HTML 経由で IE ブラウザをターゲットにすることも可能です:

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

または、CSS ファイル内でオーバーフローの質問を参照してください: ブラウザーが IE の場合は CSS ルールを適用する

Answer 3

次のように jQuery で実行します。

$(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);

});

Answer 4

他の誰かが言及しているように、Modernizr はこれに最適です。ブラウザのバージョンを確認することは推奨されなくなりました。代わりに、必要な機能をテストする必要があります。これを支援するために、Modernizer のようなライブラリを使用できます。

EG: 位置情報機能を確認するには、次のチェックを使用できます。

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

ブラウザのバージョンを確認している場合、地理位置情報や AJAX などの特定の機能を取得しようとしている可能性があります (IE は、何らかの理由で、さまざまなライブラリを使用してこれを実現しています)。

Answer 5

Internet Explorer では、条件付きコメントを使用してこれを行うことができます。次に例を示します。

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

その他のブラウザでは、JavaScript を使用する必要があります。(ヒント: を使用してみてください。navigator.userAgent私のコンピューターでは"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.110 Safari/537.36"です。) 詳細については、このリンク を参照してください。

Answer 6

Internet Explorer の場合、これを head html タグ内に追加できます。

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

mozilla の場合、これをスタイルシートに追加して、mozilla ブラウザー専用の css コードを指定できます。

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

Answer 7

これにはナビゲーターオブジェクトが必要です