クロスブラウザCSSを実装する最良の方法は何ですか?
ルール:回答に対する1つのアプローチ。
条件付きコメント を使用して、Internet Explorerの問題を修正できます。それとは別に、Firefox/Chrome/Operaを個別にターゲットにする必要はないはずです。それらはすべて標準をサポートしています。
キャッシングはその中に入るべきではありません。すべてのブラウザで同じコードを提供する必要があります。
最も簡単な方法は、ライブラリを使用することです。 OOCSS、Blueprint、または960gsなどのライブラリは、主要なブラウザ間で表示を複製するように既に設計されています。その後は、ほとんどの場合、カスタムスタイルがクロスブラウザに準拠し、マークアップで問題が発生しないことを確認するだけです。
可能な限りペストのようなハッキングを避けます(はい、条件を使用します)。
このような質問と回答を読むと、私は夢中になるかもしれないと思うようになりますが、css3やその他のトリッキーを含むかなりのcssを使用して、かなり複雑なWebサイトを作成しました。
ただし、コーディング中は常に複数のブラウザー(主にChromeでコーディングし、firefoxとie7でテストします)で作業内容を確認します。問題が発生した場合は、一歩下がって、なぜレンダリングが異なるのかを理解し、しばしばわずかに異なるアプローチを選択します。
そうは言っても、これらのさまざまなハッキングや手法には知的関心があります。私はCSS3 PIEとmodernizrで使用されるテクニックについて読むのが特に好きです。
クロスブラウザーコーディングにアプローチする最善の方法は、異なるブラウザーがコードを解釈するさまざまな方法を認識し、正しい方法でしか助けられない方法で記述することです。
web標準を使用して設計および開発する
ドキュメントとスタイルシートを常に検証してください!
クロスブラウザ/クロスプラットフォームのテストを毎日!
少なくとも、プルリクエストを送信するか、リポジトリにコミットする前。
とにかく適合ドキュメントを書くべきですが、これはクロスブラウザ/クロスプラットフォームのCSSを書くために重要です。
注:検証の真の力は、100%準拠していません。検証する必要のないもの、延期できるもの、すぐに修正する必要があるものを理解すると、超大国が得られます。
and thats power:継続的な検証により、仕様のルールが強化され、精通します。絶えずクロスブラウザ/クロスプラットフォームのテストを行うことで、どのブラウザのユーザーエージェントスタイルシートで最もバトルしているのかを常に把握できます。スタイルをそのように適合させると、問題はさらに少なくなります。
必要に応じてライブラリとフレームワークを使用できますが、ワークフローのすべての苦痛と痛みを抽象化しているため、ここで要求しているスタイルを詳細に把握することはできません。ただし、libs/frameworksを使用すると、通常はページが肥大化しますが、その力を十分に発揮できます。
reset.css、normalizr.css、さらに*{border:none; margin:0; padding:0)
リセットは、スタイルをレンダリングするブラウザ間で、または独自のスタイルでプレイフィールドを均等化するための武器です。
はい、私は*
"hack"と他の2つのオプションを推奨しました。ユーザーエージェントとの戦いを行うとき、それぞれに独自の場所があります。
さらに、特定のユーザーエージェントが持っている欠陥を活用しないのは不合理です。なぜなら、その欠陥は100%の連続性でレンダリングされず、対処する必要があるからです。そうすることで、欠陥自体が機能を検出するための完璧なフックを提供するか、それらを探り出すので、それに応じて処理することができます!
ハック、欠陥、機能、非機能のすべてを使用して、domを曲げてブラウザをインラインに強制することができます。
......必要な場合。ただし、Web標準を使用して開発している場合は、以前ほど多くのWeb標準を必要としないことがわかります。
そして、あなたはそれらにあまり依存していないので、問題を解決するためにそれを使用する機会を得たとき、迅速にそれを使用してください!あなたはすでに問題が何であるかを知っています、そして、あなたは問題と他を何も対象としない解決策も持っています。
各ブラウザには、ターゲットを絞る独自の方法があり、最も明白なのは条件付きコメントです。
ie6-9には条件付きコメントを使用し、条件付きコンパイルを使用してie10およびie11のスタイルをレンダリングします。
[。 -100%を伸ばす(または伸ばさない)色など.
私がやっていることは、CSSをリセットしてから条件文を使用することです。 CSSをリセットすると、ほとんどすべての問題が修正され、条件付きでIEの問題が修正されます。他のブラウザーに違いがある場合は、通常、すべてのブラウザーの幅やフォントサイズを大きくするなど、それらを回避しようと試みます。
私は個人的にYUIリセットCSSを使用しています。
CSS3 PIE CSS3互換性レイヤーとしてかなり有望に見えます。もちろん、以前のCSSバージョンには他のクロスブラウザの懸念事項があります。
IE6に関する関連の質問、多くの有用な情報: IE6をサポートする必要がありますか?
CSSハックの使用に対する警告を前に付けます
純粋なパフォーマンスの観点からは、クライアントからの単一のHTTP要求に1回応答する以外の理由がない場合、単一のファイルでキャッシュがより効果的になります。ブラウザに関係なくすべてのユーザーに同じファイルを提供することに加えて、 条件付きコメントはダウンロードをブロックします 状況によっては。
1つのファイルですべての異なるInternet Explorerバージョンを対象とするために、さまざまなCSSハックがあります。これらがCSSを無効にすることに注意してください(検証が懸念事項の場合)。
body { color:red;/*すべてのブラウザ*/ color:green\9;/* IE8以下*/ *色:黄色;/* IE7以下*/ _color:オレンジ;/* IE6 */ }
条件付きコメントブロックは、条件付きコメントがあるIE8のsomeの場合にのみ問題になります。 Internet Explorerのサポートについてどう思うかによって、これが問題になる場合とそうでない場合があります。
私は個人的に条件付きコメントを使用しています。私は個人的に、CSSハッキングはひどいものであり、条件付きコメントが実際のまたは想像上のパフォーマンスヒットはCSSハッキングの価値がないと信じていますしばしば引き起こす。
条件付きコメントは比較的簡単に実装でき、Quirksmodeでの使用について great article があります。以下はIE6のみに対処します。
<!-[if IE 6]> <link rel = "stylesheet" type = "text/css" href = "/ media/css/ie6.css" /> <![endif]->
特定のバージョン番号に等しい、より小さい、より大きい、以下、またはそれ以上のバージョンのInternet Explorerをターゲットにできる構文があります。上記の例は、次のいずれかです。