CSS のアスタリスクの前のプロパティは何に使用されますか?

Web 開発では、開発者は CSS (Cascading Style Sheets) を使用して Web サイトの外観とレイアウトを決定できます。ただし、ブラウザーごとに CSS のサポート メカニズムが異なるため、コンパイラーが Web ページをレンダリングするときに不一致が発生する可能性があります。

この互換性の問題を解決するために、開発者は多くの場合、CSS ハックを使用して、Web ページがさまざまなブラウザーやデバイス間で一貫して表示されるようにすることを選択します。このようなハッキングの 1 つはアスタリスク属性 (アスタリスク属性ハックとも呼ばれます) で、これは CSS のサポートが制限されている特定のバージョンの Internet Explorer (IE) に対して使用されます。

この記事では、CSS のスター属性のハックを調査し、その使用法と制限について説明します。また、この手法を効果的に使用する方法の例と、この手法を CSS コードに実装するためのベスト プラクティスも示します。

セレブ初物件

これは、HTML 要素のさまざまなプロパティを宣言するための CSS ハックです。アスタリスク (*) またはアンダースコア (_) が前に付いた属性は IE 7 以前でのみ表示されますが、IE 8 以降ではコンパイラによってガベージとして扱われます。

＃＃＃文法＃＃＃ リーリー

それでは、例を挙げてこれをよりよく理解してみましょう。このハックを使用して、IE 6、IE 7、およびその他のブラウザーでプロパティをレンダリングします。

NOTE

- このハックはさまざまなブラウザで動作するため、指定されたブラウザでプログラムを実行して正しい出力を確認してください。 ＃＃＃例＃＃＃ ここでは、Internet Explorer 7 以前の要素に CSS プロパティをレンダリングするようにコンパイラーに指示する方法を示します。

リーリー

IE7 以前の場合、div 要素の margin-top はゼロです。

他のブラウザでコードを実行すると、div 要素の margin-top は 40 ピクセルになります。

上記の例では、CSS セレクター

.my-div

は 40 ピクセルの上マージンを適用します。ただし、

*margin-top: 0;

ルールは Internet Explorer 6 でのみ機能し、余白を 0 ピクセルに設定します。プロパティ名 (margin-top) の前のアスタリスク (*) は、「スター プロパティ ハック」の「アスタリスク」です。他のブラウザではこれは構文エラーであるため、この行は無視されます。 ＃＃＃例＃＃＃ Internet Explorer 6 以前でコンパイラーが CSS プロパティを要素にレンダリングする別の方法を以下で説明します。 IE7では動作しません。 リーリー IE6 以前の場合、div 要素の背景色は青になります。

他のブラウザでコードを実行すると、背景色が赤になります。

上記の例では、CSS セレクター

.my-div

によって赤色の背景色が適用されます。ただし、

_background-color: blue;

ルールは Internet Explorer 6 でのみ機能し、背景色を青に設定します。

スター プロパティ ハックの使用と制限 「スター属性」は、CSS スタイルを使用して Internet Explorer の特定のバージョンをターゲットにするために過去に使用されていた手法です。この目標は効果的に達成されますが、利点と欠点もいくつかあります。 ＃＃＃使用＃＃＃

Web 開発者は、他のすべてのブラウザーでの結果に影響を与えることなく、さまざまな特定の CSS スタイルを古いバージョンの Internet Explorer に適用できます。これは、複数のブラウザーにわたるユーザーに一貫した統一されたエクスペリエンスを作成するのに役立ちます。

使いやすく、コードの量が削減されるため、Web 開発者にとって魅力的な代替手段となります。これにより、条件付きコメントや特定のブラウザー用の特定のスタイルシートを作成できなくなります。

• Web 開発コミュニティで広く使用され人気があるため、サンプルやサポートを簡単に見つけることができます。さらに、ユーザーフレンドリーでもあります。

• 制限

• 「プロパティの前にアステリックス」はハックです。これは、標準で互換性のある CSS コードの記述方法ではありません。この機能は Internet Explorer のバグに依存しています。さらに、ブラウザの将来の修正バージョンや他のブラウザで動作するという保証はありません。

これにより、コードの読み取りと保守がさらに困難になります。非標準のコードを記述する必要があるため、追加のコメントやドキュメントがなければコードの動作を理解するのは困難です。

• これにより、ページ上の他の要素に影響を与えたり、ブラウザが予期せぬ動作を引き起こしたりするなど、意図しない結果が生じる可能性があります。

• ＃＃＃結論は＃＃＃

  この手法は、さまざまなスタイルを持つ特定のブラウザを対象とする手法であり、Internet Explorer 6 などの古いブラウザにフォールバックを提供します。全体として、「スター属性ハッキング」は当時は便利でしたが、現在では Web 開発手法の最良の選択として推奨されていません。最新の Web 開発手法は、ブラウザー固有のハッキングに依存するのではなく、複数のブラウザーで実行される標準的で互換性のあるコードを使用することに重点を置いています。

以上がCSS のアスタリスクの前のプロパティは何に使用されますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。