特定のブラウザーに異なるCSSスタイルを使用する

StackOverflow https://stackoverflow.com/questions/1637534

  •  07-07-2019
  •  | 
  •  

質問

IEと他のブラウザーに別々のCSSを使用する最良の方法は何ですか？ IE、Firefox、Safariのユーザーのみをターゲットにすることを考えています。特に、IEを除くほとんどのブラウザでCSS3がサポートされるようになりました。

これを実現するためのさまざまな方法は次のとおりです

  1. 個別のスタイルシートのロード 条件付きで<!--[if IE] <！> gt;
    2. を使用
  2. アンダースコアハックおよびその他のさまざまなインラインIEハック

（1）は特に開発時の余分な作業であるため、（2）をお勧めします。ただし、（2）は常に機能するとは限りません。最も効率的な方法は何ですか？

役に立ちましたか？

解決

すべてがドキュメントの上部で取得するスタイルシートが1つあります。

この下で        [！-[IEの場合]] 条件付きスタイルシート。

ここでは、IEで問題を引き起こしているスタイルをオーバーライドします。 -ピックアップされる特定のクラスの最後のスタイルは、従うスタイルです。

他のヒント

私たちのチームは3つのルールに従ってCSSを処理します：

  1. すべてのブラウザで可能な限り近くで、一般/共通のCSSファイルが正常に機能することを確認します。
  2. すべてのIEを処理する<！> quot; bugs <！> quot;個別のファイルで、IE条件を含むスタイルシートの読み込みを制御します。
  3. 最初の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;

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top