12

特定のブラウザ用に別のCSSファイルをロードする方法はありますか？

like（貧弱な擬似コード）：

if firefox
<link rel="stylesheet" type="text/css" href="includes/MyCssFirefox.css" />
if chrome
<link rel="stylesheet" type="text/css" href="includes/MyCssChrome.css" />
if Safari
<link rel="stylesheet" type="text/css" href="includes/MyCssSafari.css" />
4

3 に答える 3

22

あなたが望む理想的な解決策は存在しません：

残念ながら、HTML自体でそれを行おうとしている場合、クロスブラウザソリューションは存在しません。ただし、IEのほとんどのバージョンで機能します。そのようなように：

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="includes/myIEGeneralStyle.css" />
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="includes/myIE6Style.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="includes/myIE7Style.css" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="includes/myIE8Style.css" />
<![endif]-->

したがって、最善の解決策：

このようなJavascriptソリューションはどうですか：ブラウザ検出。このクラスについて少し読んで、より明確にします。そのファイルが基本的に行っているのは、次のような概念です。

var browser = navigator.userAgent.toLowerCase().indexOf('chrome') > -1 ? 'chrome' : 'other';

明らかに、ブラウザの種類を検出するだけではありません。実際、バージョン、OS、およびそのリンクで読むことができるはるかに詳細な情報を知っています。ただし、「chrome」を「mozilla」、「explorer」などに置き換えることで、すべての種類のブラウザをチェックします...

次に、cssファイルを追加するには、次のような条件文をフォローアップします。

if (BrowserDetect.browser.indexOf("chrome")>-1) {
document.write('<'+'link rel="stylesheet" href="../component/chromeCSSStyles.css" />');
} else if (BrowserDetect.browser.indexOf("mozilla")>-1) {
    document.write('<'+'link rel="stylesheet" href="../component/mozillaStyles.css" />');
} else if (BrowserDetect.browser.indexOf("explorer")>-1) {
    document.write('<'+'link rel="stylesheet" href="../component/explorerStyles.css" />');
}

幸運を祈ります。これがお役に立てば幸いです。

于 2013-01-09T02:49:03.217 に答える
0

条件付きコメントを使用して、IEブラウザーをターゲットにすることができます。これを見てください：http：//css-tricks.com/how-to-create-an-ie-only-stylesheet/。Firefoxをターゲットにするには、次の回答を確認できます：https ://stackoverflow.com/a/953491/1941910 。しかし、Firefox、Chrome、Safariをターゲットにする必要はないと思います。これらはすべて、CSSを適用するのに適しています。

于 2013-01-09T02:50:46.277 に答える
0

これはサーバー側で実行できます。

if(Request.UserAgent is chrome){        
    //here output chrome stylesheet
}
于 2013-01-09T03:04:53.663 に答える