css - どちらが優れていますか: CSS ハッキングとブラウザー検出?

Question

一般的に、インターネットを見回すと、CSS ハックを使用して、Web サイトがすべてのブラウザーで同じように見えるようにしていることがわかります。個人的には、これらのハッキングをすべて見つけてテストするには、かなりの時間がかかることがわかりました。変更を加えるたびに、4 つ以上のブラウザーでテストして、他に問題がないことを確認する必要があります。

約 1 年前、他の主要なサイト (Yahoo、Google、BBC など) が使用しているものをインターネットで調べたところ、それらのほとんどがなんらかの形式のブラウザー検出 (JS、HTML if ステートメント、サーバーベース) を行っていることがわかりました。私もこれをやり始めました。最近取り組んだほとんどすべてのサイトで jQuery を使用しているため、組み込みのブラウザー検出機能を使用しています。

これらのいずれかを使用する、または使用しない理由はありますか?

score 30 · Accepted Answer

3 番目のオプションがあります。

ブラウザ検出と CSS ハッキングの必要性を最小化または排除します。

私は、ブラウザーの違い (ウィジェットなど) を処理する jQuery プラグインのようなものを使用しようとしています。これはすべてを処理するわけではありませんが、多くのことを行い、複数のブラウザーをサポートする努力を、あなたが余裕がある、または望んでいるよりもはるかに多くの労力を費やした人に委任しました。

その後、私は次の原則に従います。

私が「最小限の CSS」と呼んでいるものを使用します。つまり、広くサポートされている機能のみを使用します。
複雑なレイアウトには、必要に応じて表を使用してください。あなたはこれを好まないかもしれませんが、率直に言って、サイドバイサイドレイアウトのようなことを行うと、テーブルは 10 年前のブラウザーで動作し、div を絶対配置、フローティングなどの組み合わせで動作させるよりもはるかに少ない労力で済みます。
DOCTYPE を追加して、IE6 を quirks モードではなく、strict モードに強制します。これがあなたの人生をどれほど楽にするかは強調できませんが、奇妙なことに、多くの人はまだそうしていないようです。
他のボックスモデルハックではなく、正しい DOCTYPE を使用するか、ネストされたブロック要素を使用することにより、ボックスモデルの問題を最小限に抑えます。と
必要に応じて、関連するブラウザ用の追加の CSS ファイルを含めます。私は、生成されたページを持つクライアントではなく、サーバーでこれを行う傾向があります (それに直面してみましょう)。私が取り組んできた多くのプロジェクトには、IEfix.css ファイルがありました。

その後、ブラウザーを層に分けます。

ティア 1:

Firefox 3;
IE7。

私のウェブサイトはこれらで動作する必要があります。

ティア2：

Firefox 2;
サファリ;
オペラ;
クロム。

私のウェブサイトはこれらで動作するはずです。これは気分を害する人もいるかもしれませんが、率直に言って、これらのブラウザーの市場シェアは非常に低いため、Firefox 3 や IE7 ほど重要ではありません。

ティア 3:

IE6;
その他。

たとえば、会社の要件でない限り、これらに取り組むために最小限の努力が払われます。IE6 は悪夢のようなものですが、12 月時点での市場シェアは 20% で、急速に低下しています。さらに、 Paypal などのサイトが IE6 をブロックし、Google がユーザーに IE6 を削除するように指示するなど、IE6 の使用を思いとどまらせたり、禁止したりするための有効なセキュリティ上の懸念 (たとえば、金融 Web サイト) があります。

score 11 · Accepted Answer

問題は、CSSで実際に1回しか取得できないことです（クライアントではほとんど静的コンテンツであるため）...クライアントでオンザフライで適合するように（簡単に）適応させることはできません。互換性のないケース (そしてそれらが多すぎる) の場合、残念ながら検出が最善の方法です。これがすぐに変わるとは思えません。

JavaScript を使用すると、特定のブラウザを特定するのではなく (ほとんどの場合) jQuery などのライブラリを使用して、機能のサポートを確認することで、この問題の多くを回避できます。正確に知る必要がある場合があります (たとえば、ボックスモデル)。

score 6 · Accepted Answer

これらのいずれかを使用する、または使用しない理由はありますか?

はい。JavaScript が非アクティブ化されている場合、クライアント側のブラウザー検出が中断され、将来のブラウザーバージョンでは正しく機能しない可能性があります。最後の理由は、CSS ハッキングにも当てはまります。サーバー側のブラウザー検出は、ユーザーが明示的に中断しようとすると中断されますが、それでも実行可能な代替手段である可能性があります。

私がお勧めするもの：

標準に準拠したブラウザーでコードが機能することを確認してください。つまり、それらの 1 つまたは 2 つで開発し、後で browsershots.org を確認してください。ほとんどの場合、1 つのスタイルシートでそれらすべてに目的の結果を実装することが可能になります。

次にIEです。問題が少ししかない場合は、CSS ハックを使用できます。それ以外の場合は、条件付きコメントを使用してください。

編集：

古いブラウザーもサポートする必要がある場合、私は通常、優雅な劣化の道を歩みます。基本的なスタイルシート (フォントサイズ、色など) を使用して純粋な html を表示させるだけです。ファンシーなものはすべて@importルールで隠されます。

score 4 · Accepted Answer

私は通常、Firefox や Safari などの標準に準拠したブラウザー用のスタイルシートを用意し、条件付きコメントを使用して Internet Explorer を検出し、IE 固有の修正と上書きを含む追加の CSS ファイルを提供することを好みます。

score 3 · Accepted Answer

生活のためにHTMLとCSSを書いてきた6年間で、私のCSSの問題の大部分はInternetExplorerから来ました。

他の回答で指摘されているように、条件付きコメントを使用して、IEに追加のスタイルシートを提供できます（または、<body>または<html>`` element, if you don’t like multiple stylesheets). Unlike CSS hacks, conditional comments are explicit and supported. Unlike trying to detect IE from theユーザーエージェント文字列にクラスを追加するために、それらは確実に機能します。

IE以外のCSSの問題については、ブラウザーで検出する価値のある問題は見つかりませんでした。

score 2 · Accepted Answer

ハッキングはブラウザの方が速いですが、CSS を正しく構成すれば、ブラウザ検出により CSS の可読性が向上します。ブラウザ検出を行うことができ、同時にブラウザ間で CSS を共有でき、別のファイルなどに異なる css しかない場合は、ブラウザ検出を使用します。それらを知らなければ理解するのは難しい

score 2 · Accepted Answer

私はブラウザー検出を使用して、ブラウザーに依存しない CSS を独自のファイルに入れることを好みます。

ただし、最善の解決策は、デフォルトで相互互換性のある CSS を見つけて、それをそのまま使用することです。

score 2 · Accepted Answer

ブラウザサーバー側の検出の何が問題になっていますか? 非常に効果的で誰にでもできるようです (ユーザーがユーザーエージェント文字列を変更することを除けば)。PHP を使用して、ページのスタイルシートを選択するか、リクエストごとに動的に生成することができます。他の言語でファイルに直接出力してヘッダーを手動で設定できるかどうかはわかりませんが、そうしないとは思えません。ユーザーエージェントを特定するため、これらのオプションの1つはおそらくサーバー側の環境で実行可能です。

score 2 · Accepted Answer

どちらも使わないようにしています。多くの場合、IE の問題は、マークアップの構造をいくらか単純化することで回避できます。

Eric Meyerの.

また、IE6 と IE7 の最新のセキュリティ問題を考えると、原則として IE6 のサポートをゆっくりと確実に終了します。

score 1 · Accepted Answer

ハッキングは常にあなたの仕事の努力に追加され、仕事の努力は最適化されるべきです

最初にハックを追加してから、さまざまなブラウザやさまざまなマシンでのハックの動作について心配し始めます。

代わりに、ベンダー固有のcss拡張機能http://reference.sitepoint.com/css/vendorspecificに依存できます。

score 1 · Accepted Answer

[私のアプローチ][1] PHP クラスを使用して、OS、ブラウザー、およびブラウザーのバージョンを検出します。

[1]: PHP クラスを使用して OS、ブラウザー、およびブラウザーのバージョンを検出する私のアプローチ http://reinholdweber.com/css/css-hacks-browser-version-detection-a-new-approach/

score 0 · Accepted Answer

ブラウザーは常に更新されており、新しい更新によってハッキングが中断される可能性があるため、CSS ハッキングは適切ではありませんが、Javascript ブラウザー検出を使用すると、ブラウザーの機能を正確に確認できます。ただし、すべての状況ですべてが確実に機能するように、最小限の CSS を使用するという別のオプションもあります。UI 用の JQuery やその他の JavaScript ライブラリには、ブラウザーの機能に関する検出が組み込まれているため、それらを確認する必要があります。

score 0 · Accepted Answer

個人的には、これらのハッキングをすべて見つけてテストするには、かなりの時間がかかることがわかりました。変更を加えるたびに、4 つ以上のブラウザーでテストして、他に問題がないことを確認する必要があります。

すべてのブラウザで「適切な」CSS ハックをテストする必要はありません。

アイデアは、標準に準拠したコードを記述し、特定のハックを追加して、間違いを犯した唯一のブラウザー (またはレンダリングエンジン) をターゲットにするというものです。たとえば、"* html #myelement" を記述して、IE6 のみの例外をターゲットにします。他のブラウザーはそのハッキングの影響を受けないため、徹底的にテストする必要はありません。新しいあいまいなブラウザーが登場し、IE6 とまったく同じ間違いを犯した場合にのみ、問題が発生する可能性があります。

「_propertyname」ハックなど、自らを CSS ハックと呼んでいるが、無効な構造を使用するものがあります。これは、無効なコードを使用すると、すべてのブラウザーが異なる方法で解釈する可能性があるため、ブラウザー間で問題が発生する可能性があります。これらは使用しないでください。

正直なところ、主にIE5が死んでいるため、いずれにせよ以前の問題ではありません. 標準モードの doctype を使用して標準に準拠するように記述した場合、現在のブラウザーのラウンドでほとんど動作します。実際に残っている唯一の問題は、「* html」でターゲットにできる IE6 です。それ以上の CSS ハックが必要になることはまずありません。ありがたいことに、Box Model Hack の時代は終わりました。

score 0 · Accepted Answer

あなたのコードを聞いてください！ケント・ベックはそう言っています。そしてWing-Tsunで彼らは言います：曲がる水のようになりなさい！か何か。

IE5 に html5 を理解させるための CSS ハックがあります: http://blog.whatwg.org/styling-ie-noscript。

JS を使用した場合も同じです: http://blog.whatwg.org/supporting-new-elements-in-ie。

5 ページのハックの説明と 5 行のわかりやすいコードを比較してください。というわけで、JSを使用。

物事には利点と欠点があります。そして、問題に対するあなたの理解と実際のコードの優雅さが道を切り開きます。

css - どちらが優れていますか: CSS ハッキングとブラウザー検出?

15 に答える 15

Related

Reference