web-dev-qa-db-ja.com

ユーザーのブラウザを検出して特定のCSSファイルを適用するにはどうすればよいですか？

ブラウザを検出し、一致したCSSファイルを適用する必要があります。

3つのcssファイルを作成しました：__ie.css、ff.css、opera.css。次に、良いものを含めるためにブラウザを検出する必要があります。

私はこれを知っている

<!--[if IE]>
     <link rel="stylesheet" href="css/ie.css" type="text/css"/>
<![endif]-->

しかし、FirefoxとOpera/Chromeで同じことをするにはどうすればよいですか？

cssuser-agent
14
Sourav

CSSを適用するためだけにブラウザーを検出する必要がある場合は、ブラウザー固有のスタイルシートに進む前に、CSSを再考することをお勧めします。必要なのは、あるブラウザが別のブラウザのユーザーエージェント文字列を模倣すること、または新しいバージョンがリリースされることであり、すべてが壊れます。現在の標準を使用してコードを検証（ http://validator.w3.org/ ）すると、クロスブラウザーの問題がはるかに少なくなることを心配する必要があります。バージョン番号なしで<!--[if IE]><![endif]-->を使用するだけでも、それ以降のバージョンではレイアウトが壊れる可能性があります。

そうは言っても、利用可能なCSS機能に基づいてページのスタイルを変更したい場合は、 Modernizr をご覧ください。この方法では、機能をチェックするだけであり、ブラウザーの新しいバージョンがリリースされても機能は損なわれません。

他のすべてが失敗し、訪問者のブラウザーを本当に検出する必要がある場合は、jquery.browserを試してください。 jQueryに組み込まれており、使い方は簡単です。 http://api.jquery.com/jQuery.browser/ 。

8
derekerdmann

純粋なCSSで実現できる最も近いのはfeature queryです。ブラウザのタイプ/バージョンを検出する代わりに、特定のプロパティ/値の組み合わせがブラウザでサポートされているかどうかを確認できます。

以下は、垂直方向のセンタリングに変換プロパティを使用する例です。ブラウザーが変換をサポートしていない場合、その位置を調整する必要はありません。

@supports (transform: translateY(-50%)) {
    .foo {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }
}

ブラウザによる機能クエリのサポート

5
cimmanon

Firefox、OperaおよびChromeでブラウザを検出する必要がある場合は、何か問題があります。同じCSSがすべてで機能するはずです。

もちろん、これには例外があります。すべてのブラウザには、他のブラウザには見られない機能やバグがありません。例は text-overflow:EllipsisこれはFirefoxではサポートされていません 。

ただし、一般的に使用される機能を使用している場合、これらのケースはほとんどなく、一般的に、さまざまなバージョンのIEを除いて、最近はブラウザー検出を行う必要はありません。

使用したい機能がほとんどのブラウザでサポートされているかどうかわからない場合は、 CanIUse.com または Quirksmode で確認できます。

真剣に最先端の機能を使用している場合、はい、クロスブラウザーのサポートに問題があります。ただし、この場合、ブラウザ検出よりも Modernizr のような製品を使用して機能検出を行う方が一般的です。これは、将来を含むすべてのブラウザとすべてのバージョンを確実にカバーするためのより信頼できる方法だからです。バージョン（これはブラウザー検出の固有の弱点です）。

3
Spudley

IE以外のブラウザには条件付きコメントはありません。

しかし、javascriptでそれを行うことができます： http://www.quirksmode.org/js/detect.html

1
easwee

場合によっては、各ブラウザがそれらの接頭辞に基づいて独自のプロパティを適用し、その他を無視する接頭辞付きのプロパティを使用できます。次のコードは、CSS3グラデーションで背景を塗りつぶします。

background-color: green;
background-image: url(my-img.png);
background-image: -webkit-linear-gradient(top right, #b51111, #eeeeee);
background-image: -moz-linear-gradient(top right, #b51111, #eeeeee);
background-image: -ms-linear-gradient(top right, #b51111, #eeeeee);
background-image: -o-linear-gradient(top right, #b51111, #eeeeee);
background-image: linear-gradient(top right, #b51111, #eeeeee);

このコードでは：

  • -webkit-はWebKitベースのブラウザー（ChromeおよびSafari）用です
  • -moz-はFirefox用です
  • -ms-はInternet Explorer用です
  • -o-はOpera用です

しかし、一般的に言えば、新しいブラウザでは簡単に失敗する可能性があるため、ブラウザスニッフィングは最善の方法ではありません。このように、ブラウザのユーザーエージェント文字列を取得して解析する必要があります。次に、サポートされている機能に基づいて、各ブラウザーに特定のCSSルールを適用します。新しいバージョンでブラウザーのユーザーエージェント文字列が変更された場合は、ブラウザーのスニッフィングコードを変更する必要があります。複数のブラウザをサポートしたいと考えており、それぞれが1年間でいくつかの新しいバージョンをリリースする可能性があるとします。ブラウザが特定の機能をサポートしているかどうかを照会できます。例えばHTML5ビデオ：

if(!!document.createElement('video').canPlayType === true) {
// run some code that relies on HTML5 video
} else {
// do something else
}

JavaScriptに基づいて記述された Modernizr という名前の機能検出ライブラリがあります。あなたはそれをダウンロードして、あなたのHTMLページにそれを含めることができます。また、「no-js」クラスを要素に追加する必要があります。 Modernizerは、すべての機能検出テストと、要素へのいくつかのクラスを実行します。このようなもの：

<html lang="en-gb" class=" js no-flexbox no-flexbox-legacy canvas canvastext 
webgl no-touch geolocation postmessage websqldatabase no-indexeddb
hashchange history draganddrop no-websockets rgba hsla multiplebgs
backgroundsize borderimage borderradius boxshadow textshadow opacity
cssanimations csscolumns cssgradients no-cssreflections csstransforms 
no-csstransforms3d csstransitions fontface generatedcontent video audio  
localstorage sessionstorage webworkers applicationcache svg inlinesvg 
smil svgclippaths">

したがって、CSSルールを選択的に適用できます。たとえば、サポートされているブラウザでアニメーション3D変換を適用したり、他のブラウザで何かを表示したりしたいとします。次のコードを検討してください。

#my-div:hover {
  transform: rotateY(90deg);
}

デフォルトの場合と代替の場合：

.no-csstransforms3d #my-div:hover {
  position: relative;
  right: 200px;
}

これは良い概念です 記事 。

1
Abdollah

遅すぎるかもしれませんが。より良い解決策は CSS/JSブラウザー決定子 （4kb縮小）を使用することです。 免責事項：これは商品です売っています。

CSSファイルとJSファイルを分離するには、このコードを<html> 鬼ごっこ：

<head><script src="js/cssjs-browser-determiner.min.js"></script>

<!-- Old Browsers -->
<script>
browser.is_old && document.writeln(
  '<link href="styles/old-browser.css" rel="stylesheet">'
);
</script>

このファイルは、古いブラウザー（デフォルトでは、CSS3移行をサポートしていないブラウザー）に対してのみロードされます。特定のブラウザごとにファイルを分離したい場合は、同じことを実行できますが、browser.is_oldからbrowser.chromeまたはbrowser.webkitなど...

次に、old-browser.css（またはその他のCSSファイル）内に特定のブラウザーのCSSを記述します。

.opera9 .my-el { ... }
.firefox1_5 .my-el { ... }
.ie8- .el { ... } // IE8 or less
.ios .el { ... } // iPhone, iPad, iPod
etc...
0
artnikpro