＆＃8220; Voice-family＆＃8221;のコンセンサスは何ですかハック？

Question

私はかなり大きな会社で働き始めたばかりで、私のグループは一般向けWebサイトをすべて管理しています。本日初めてスタイルシートを開き、IEのバグを修正するために音声ファミリハックを使用しているデザイナーのインスタンスが20を超えているのを見ました。 （グラフィックデザイナーがあらゆる種類のマークアップを作成できる理由はわかりません）

ボイスファミリーハックの一般世論とは何ですか。 IEの条件付きコメントを使用してカスタムスタイルシートを含めることを推奨する価値はありますか？

Answer 1

あらゆる種類のハックは、将来のブラウザで意図しない効果をもたらす傾向があるため危険です（IE7で多くの問題が発生しました）。 CSSをフィルタリングする安全な方法は次のとおりです。

• （IEのみ）条件付きコメントを使用します。これらはMicrosoftブラウザーで常に機能し、コメント内にあるため他のすべてのブラウザーでは常に無視されます
• 機能ターゲティング-最新のブラウザーでのみサポートされているCSSセレクターを使用して、ルールを解釈しようとする古いブラウザーを停止します。ただし、ブラウザーが構文を認識するという事実は、構文を正しく処理することを意味しません。ここで保証しているのは、古いブラウザがこれらのルールをレンダリングしようとしないことであり、最新のブラウザがそれらを正しく実行することではありません

可能な限り、すべての主要なブラウザで正しくサポートされているCSSのサブセットを使用します。バグの多い古いブラウザがユーザーの無視できる割合に下がるにつれて、これは時間の経過とともに改善されます。

Answer 2

＆quot; voice-family＆quot; Tantek Celik Box Model Hackとしてよく知られているハックは、Windows上のIE4 / 5から特定のCSSルールを隠すために使用されます。これは、これらのブラウザーでのCSS標準の実装が正しくないためです。これは、ブラウザーのスニッフィングや複数のスタイルシートに頼ることなく、最も正確な単一のスタイルシートをすべてのブラウザーに配信する試みです。

皮肉なことに、このハックは、古いブラウザー、新しいブラウザー、および将来のブラウザーで機能する標準準拠のスタイルシートを開発するための多くの工数（月？）の実験とテストの結果です。これは、CSS標準へのブラウザーのコンプライアンスの恐ろしい状態を補うために作成されたいくつかの回避策の1つです。

標準に（可能な限り）順守することが価値ある目標であり、ブラウザースニッフィングと複数のスタイルシートを使用するだけで頭痛の種となる理由について詳しくは、Jeffrey Zeldmanの Web Standardsを使用した設計をご覧ください開発者向け：

http://www.amazon.com/Designing-Web-Standards-Jeffrey -Zeldman / dp / 0321385551 /

1つの例は、ブラウザとオペレーティングシステムの組み合わせに遅れをとらないための軍拡競争です。もちろん、携帯電話やブラウジング機能を備えた他の将来のデバイスも同様です。検出コードは新しい組み合わせごとに変更する必要があります。多くのブラウザーがNetscape Navigatorを装う方法のため、検出はフルタイムの仕事になる可能性があります。

もう1つの良いリファレンスは、Web Standards Projectです。このプロジェクトには、このテーマに関する多くの優れた情報とチュートリアルがあります。

http://www.webstandards.org/

コーディングスタイルを標準準拠に移行する場合、通常、将来のブラウザのリリースについて心配する必要はありません。はい、まだそれらに対してテストする必要がありますが、それぞれについてカスタムスタイルシートを作成してテストする必要はありません。

Answer 3

このようなハッキングに対する私の気持ちは、できる限り避けるべきだということです。そのような悲観的な手段に頼ることなく、ブラウザー間で正しいレンダリングを取得できる場合は、正しい方法で実行する必要があります。ただし、ブラウザにバグのあるCSS実装がある場合があり、このようなハックを使用する必要があります。

Answer 4

条件付きインクルードを使用しないでください。代わりに CSSセレクターを使用すると、はるかにエレガントになります。個々のブラウザ（および/またはバージョン）でクラスをターゲットにできます：

.myClass {...}

.ie6 .myClass {...}