CSSハック技術の使い方まとめ

CSS ハックとは何ですか?

Web 開発では、メーカーが異なるブラウザや特定のブラウザのバージョンが異なると、CSS のサポートと解析が異なるため、ブラウザ間でパフォーマンスが一貫していないことがよくあります。 異なるブラウザ環境では、一貫性のないページ表示効果が表示されます。現時点では、統一されたページ効果を得るには、異なるブラウザーまたは異なるバージョン用に特定の CSS スタイルを記述する必要があります。 、異なるブラウザ/異なるバージョンに対応する CSS コードを記述するこのプロセスを CSS ハックと呼びます。

CSS ハック テクノロジーの使用について話しましょう:

1. cssハックの分類と3つのcssハック手法を詳しく解説

cssハック分類には、css属性プレフィックス方式、セレクタープレフィックス方式、IE条件付きコメント方式の3つの表現形式があります。

属性プレフィックスメソッド（つまり、クラス内部ハック） セレクタープレフィックスメソッド

IE条件付きアノテーションメソッド

cssハックは、一般に、幅広い用途と強力な認識能力を前面に持つCSSを定義します。

2.

CSS ハック技術を使用してブラウザの互換性の問題を解決する

CSS ハックには大きく分けて 3 つの形式があります: CSS 属性ハック、CSS セレクター ハック、IE 条件付きコメント ハックは主に IE ブラウザーを対象としています。

a. 属性レベルのハック: たとえば、IE6 は下線「_」とアスタリスク「*」を認識できますが、IE7 はアスタリスク「*」を認識できますが、下線は認識できません。 「_」とFirefoxは両方を認識できません。お待ちください

b. セレクター レベルのハック: たとえば、IE6 は *html .class{} を認識でき、IE7 は *+html .class{} または *:first-child+html .class{} を認識できます。待ってください c. IE 条件付きコメント ハック: たとえば、すべての IE: IE6 以下の場合: 、このタイプのハックは CSS だけでなく、判決文に書かれたすべてのコードにも有効です声明。 。

3.

さまざまなブラウザでの CSS ハックの書き方の紹介

IE6 と FF の違い:

backgroundrange;*blue

IE6 と IE7 の違い:

background:green ! important;blue;

IE7 と FF の違い: backgroundrange; *background:green; FF、IE7 と IE6 の違い:

backgroundrange;*background:green ! important;*blue

4. CSS ハック方法の最も包括的なリスト (複数のブラウザーと互換性があります)


通常の状況では、CSS の使用を避けるよう努めます。ただし、場合によっては、ユーザー エクスペリエンスを考慮し、下位互換性を実現するために、ハッキングが最後の手段として使用されます。たとえば、IE8 以下のバージョンではサポートされていないため、 CSS3 では、IE9/Firefox/Chrome で正常にレンダリングするために多くの新しい CSS3 プロパティが使用されます。この場合、css3pie、htc、または条件付きコメントなどを使用しないと、問題が発生する可能性があります。 IE8 の独自のハックを活用する必要があります。ハッキングの使用はページのパフォーマンスの一貫性にとっては良いことですが、過度の乱用は HTML ドキュメントに混乱を引き起こし、管理とメンテナンスの負担を増大させます。

5.
CSS ハック

異なるブラウザ、または同じブラウザの異なるバージョンであっても、CSS 解析の理解が異なり、ページ効果に一貫性がなくなるため、異なるブラウザ用の CSS コードを記述することを CSS ハックと呼びます。 CSSハック。

よく使用される CSS ハックは、CSS 内部ハック、セレクター ハック、HTML ヘッダー参照の 3 つです。最初のハックが最もよく使用されます。

6.CSS Hack集まとめ

IEブラウザをブロックする(つまりIEでは表示されなくなる)

*:lang(zh) select {font:12px ! important;} /*FF専用*/ 選択:空 {font:12px ! important;} /*safari で表示*/ ここでの select はセレクターで、状況に応じて変更できます。 2 番目の文は、MAC 上の Safari ブラウザに固有のものです。

のみ IE7識別

関連の質問と回答

1.
CSSハック問題

2. IEバージョンHACKに関する質問

3. 入力テキストの色を変更することはサポートされていません。他のハックソリューションはありますか?

1. PHP 中国語 Web サイトの無料ビデオチュートリアル:

cn Dugu Jiijian (2) )-css ビデオチュートリアル》

以上がCSSハック技術の使い方まとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。