特定のブラウザーに異なるCSSスタイルを使用する
-
07-07-2019 - |
質問
IEと他のブラウザーに別々のCSSを使用する最良の方法は何ですか? IE、Firefox、Safariのユーザーのみをターゲットにすることを考えています。特に、IEを除くほとんどのブラウザでCSS3がサポートされるようになりました。
これを実現するためのさまざまな方法は次のとおりです
- 個別のスタイルシートのロード
条件付きで
<!--[if IE]
<!> gt; を使用
- アンダースコアハックおよびその他のさまざまなインラインIEハック
(1)は特に開発時の余分な作業であるため、(2)をお勧めします。ただし、(2)は常に機能するとは限りません。最も効率的な方法は何ですか?
解決
すべてがドキュメントの上部で取得するスタイルシートが1つあります。
この下で [!-[IEの場合]] 条件付きスタイルシート。
ここでは、IEで問題を引き起こしているスタイルをオーバーライドします。 -ピックアップされる特定のクラスの最後のスタイルは、従うスタイルです。
他のヒント
私たちのチームは3つのルールに従ってCSSを処理します:
- すべてのブラウザで可能な限り近くで、一般/共通のCSSファイルが正常に機能することを確認します。
- すべてのIEを処理する<!> quot; bugs <!> quot;個別のファイルで、IE条件を含むスタイルシートの読み込みを制御します。
- 最初の2つのルールに従って動作させることができない場合を除き、ハッキングは許可されません。
すべてのコアCSSを単一のファイルに保存することに同意します。 ASP.NETを使用している場合、WebHandlerを使用して、実際に送信されるCSSを管理できます。他の言語にも同様のソリューションがあると確信しています。これにより、必要なものだけを送信し、キャッシュすることができます。もう1つの利点は、複数のcssファイルを組み合わせて(その方法である場合)、1つだけを表示できることです。これは、Webサーバーへのリクエストの数を減らすための良い習慣です。
[if lt IE 8] margin:0px;のようなものを書くことができます。 IE8やFFなどには送信されません。
HTMLのみを使用している場合は、上記の[!-[if IE]]スタイル条件を使用する必要があります。
非常に大規模なプロジェクトでWebHandlerを使用していますが、他の方法では使用しません。
http://www.conditional-css.com/download をご覧ください。 PHP、C#、Cで利用可能です
がんばって。
<!--[if !IE]><!--><link rel="stylesheet" href="non-ie.css"><!--<![endif]-->
<!--[if IE]><link rel="stylesheet" href="ie.css"><![endif]-->
Yandex(別名<!> quot; russian google <!> quot;)を広く使用してHTTPリクエストを減らすこのトリック。たとえば、 market.yandex.ru を使用します。
この方法も使用できます。コードの途中でスタイルを記述する必要がある場合、条件が機能しない場合があります。
<?php $browser = $_SERVER['HTTP_USER_AGENT']; ?>
<?php if (strstr($browser, "MSIE 6.0")) { ?>
<link rel="stylesheet" href="ie6style.css" type="text/css" media="screen" />
<?php }else{ ?>
<link rel="stylesheet" href="default.css" type="text/css" media="screen" />
<?php } ?>
$browser
を次のように確認します:
IE <!>#8211; <!>#8220; MSIE <!>#8221;
Firefox <!>#8211; <!>#8220; Firefox <!>#8221;
Safari <!>#8211; <!>#8220; Safari <!>#8221;
Opera <!>#8211; <!>#8220; Opera <!>#8221;
Chrome <!>#8211; <!>#8220; Chrome <!>#8221;