web-dev-qa-db-ja.com

クロスブラウザCSSを実装する最良の方法は何ですか?

クロスブラウザCSSを実装する最良の方法は何ですか?

ルール:回答に対する1つのアプローチ。

4
stacker

条件付きコメント を使用して、Internet Explorerの問題を修正できます。それとは別に、Firefox/Chrome/Operaを個別にターゲットにする必要はないはずです。それらはすべて標準をサポートしています。

キャッシングはその中に入るべきではありません。すべてのブラウザで同じコードを提供する必要があります。

4
DisgruntledGoat

最も簡単な方法は、ライブラリを使用することです。 OOCSS、Blueprint、または960gsなどのライブラリは、主要なブラウザ間で表示を複製するように既に設計されています。その後は、ほとんどの場合、カスタムスタイルがクロスブラウザに準拠し、マークアップで問題が発生しないことを確認するだけです。

可能な限りペストのようなハッキングを避けます(はい、条件を使用します)。

2
Kenneth Love

このような質問と回答を読むと、私は夢中になるかもしれないと思うようになりますが、css3やその他のトリッキーを含むかなりのcssを使用して、かなり複雑なWebサイトを作成しました。

ただし、コーディング中は常に複数のブラウザー(主にChromeでコーディングし、firefoxとie7でテストします)で作業内容を確認します。問題が発生した場合は、一歩下がって、なぜレンダリングが異なるのかを理解し、しばしばわずかに異なるアプローチを選択します。

そうは言っても、これらのさまざまなハッキングや手法には知的関心があります。私はCSS3 PIEとmodernizrで使用されるテクニックについて読むのが特に好きです。

クロスブラウザーコーディングにアプローチする最善の方法は、異なるブラウザーがコードを解釈するさまざまな方法を認識し、正しい方法でしか助けられない方法で記述することです。

1
Zach Lysobey

web標準を使用して設計および開発する
ドキュメントとスタイルシートを常に検証してください!
クロスブラウザ/クロスプラットフォームのテストを毎日!
少なくとも、プルリクエストを送信するか、リポジトリにコミットする前。

とにかく適合ドキュメントを書くべきですが、これはクロスブラウザ/クロスプラットフォームのCSSを書くために重要です。

注:検証の真の力は、100%準拠していません。検証する必要のないもの、延期できるもの、すぐに修正する必要があるものを理解すると、超大国が得られます。
and thats power:継続的な検証により、仕様のルールが強化され、精通します。絶えずクロスブラウザ/クロスプラットフォームのテストを行うことで、どのブラウザのユーザーエージェントスタイルシートで最もバトルしているのかを常に把握できます。スタイルをそのように適合させると、問題はさらに少なくなります。

必要に応じてライブラリとフレームワークを使用できますが、ワークフローのすべての苦痛と痛みを抽象化しているため、ここで要求しているスタイルを詳細に把握することはできません。ただし、libs/frameworksを使用すると、通常はページが肥大化しますが、その力を十分に発揮できます。

reset.css、normalizr.css、さらに*{border:none; margin:0; padding:0)リセットは、スタイルをレンダリングするブラウザ間で、または独自のスタイルでプレイフィールドを均等化するための武器です。

はい、私は* "hack"と他の2つのオプションを推奨しました。ユーザーエージェントとの戦いを行うとき、それぞれに独自の場所があります。

さらに、特定のユーザーエージェントが持っている欠陥を活用しないのは不合理です。なぜなら、その欠陥は1​​00%の連続性でレンダリングされず、対処する必要があるからです。そうすることで、欠陥自体が機能を検出するための完璧なフックを提供するか、それらを探り出すので、それに応じて処理することができます!

ハック、欠陥、機能、非機能のすべてを使用して、domを曲げてブラウザをインラインに強制することができます。

......必要な場合。ただし、Web標準を使用して開発している場合は、以前ほど多くのWeb標準を必要としないことがわかります。

そして、あなたはそれらにあまり依存していないので、問題を解決するためにそれを使用する機会を得たとき、迅速にそれを使用してください!あなたはすでに問題が何であるかを知っています、そして、あなたは問題と他を何も対象としない解決策も持っています。

各ブラウザには、ターゲットを絞る独自の方法があり、最も明白なのは条件付きコメントです。
ie6-9には条件付きコメントを使用し、条件付きコンパイルを使用してie10およびie11のスタイルをレンダリングします。
[。 -100%を伸ばす(または伸ばさない)色など.

1
albert

私がやっていることは、CSSをリセットしてから条件文を使用することです。 CSSをリセットすると、ほとんどすべての問題が修正され、条件付きでIEの問題が修正されます。他のブラウザーに違いがある場合は、通常、すべてのブラウザーの幅やフォントサイズを大きくするなど、それらを回避しようと試みます。

私は個人的にYUIリセットCSSを使用しています。

0
Darryl Hein

CSS3 PIE CSS3互換性レイヤーとしてかなり有望に見えます。もちろん、以前のCSSバージョンには他のクロスブラウザの懸念事項があります。

IE6に関する関連の質問、多くの有用な情報: IE6をサポートする必要がありますか?

0
JasonBirch

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をターゲットにできる構文があります。上記の例は、次のいずれかです。

0
Bryson