CSSハック技術の使い方まとめ-CSSチュートリアル-php.cn

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

伊谢尔伦

リリース： 2017-06-07 11:57:49

オリジナル

3024 人が閲覧しました

CSS ハックとは何ですか?

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

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

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

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

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

属性プレフィックスメソッド（つまり、クラス内部ハック）详解css

CSSハック技術の使い方まとめ的分类和css CSSハック技術の使い方まとめ三种方式セレクタープレフィックスメソッド

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

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

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 だけでなく、判決文に書かれたすべてのコードにも有効です声明。。

さまざまなブラウザでの 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識別