ウェブサイトにアクセスしているブラウザに応じて自動的に読み込まれるCSSスタイルシートを個別に作成することはできますか？

Question

私は素敵なホームページのデザインを終え、osxのクロムとサファリでウェブサイトを閲覧した後にFirefoxを開こうと決めたため、特定のものが壊れたためです。

また、誤った色を表示している検索フィールドのプレースホルダテキストに問題があったため、Firefoxのスタイルシートで正しい色が表示されなくなりました。

ブラウザごとに別々のスタイルシートを作成したり、ブラウザに応じて正しい設定をトリガする条件文を作成したりできればすばらしいことでしょう。

また、複数のブラウザで自分のサイトを手動で表示するための優れたツールとなるでしょう。

Answer 1

通常、IEに問題があるので、解決策があります。
あなたはheadタグ内に置くことができ、次の行は、意志はあなたが他のIE用IE7

<!--[if IE 7]> 
    <link rel="stylesheet" type="text/css" href="http://your.css/my.css" /> 
<![endif]--> 

同じアプローチを使用する場合にのみ、特定のCSSをロードします。

Answer 2

CSSリセットファイルを使用して、これとは異なる方法でアプローチする方が好きな方もいます。基本的には、中立的な出発点が設定されているため、適用するCSSはすべてのブラウザで同じ結果を得ることができます。あなたの概念の一般的なアイデアを与えるだろう最も簡単なバージョンの

一つ、これは次のようになります。

* { 
    padding:0; 
    margin:0; 
    } 

this SO questionへの回答ではこのことについて多くの議論があります。

およびhere is a roundup of linksに様々な共通のアプローチがある。

：さまざまなブラウザでテストする場合は、this popular SO questionとthis oneをチェックしてください。

Answer 3

あなたが複数のブラウザ間であなたのサイトのスクリーンショットを表示するには、ユーザーエージェント

<script type="text/javascript"> 
var browser={ 
    msie:navigator.userAgent.indexOf('MSIE') > -1 ? true : false, 
    chrome:navigator.userAgent.indexOf('Chrome') > -1 ? true : false, 
    opera:navigator.userAgent.indexOf('Opera') > -1 ? true : false, 
    firefox:navigator.userAgent.indexOf('Firefox') > -1 ? true : false 
} 
if(browser.msie) document.write("<link REL='stylesheet' HREF='msie.css' TYPE='text/css'>"); 
if(browser.chrome) document.write("<link REL='stylesheet' HREF='chrome.css' TYPE='text/css'>"); 
if(browser.opera) document.write("<link REL='stylesheet' HREF='opera.css' TYPE='text/css'>"); 
if(browser.firefox) document.write("<link REL='stylesheet' HREF='firefox.css' TYPE='text/css'>"); 
</script>