なぜIEで認識されるCSSしか存在しないのでしょうか？

PHPz

リリース： 2023-04-23 13:44:45

オリジナル

606 人が閲覧しました

近年、ブラウザテクノロジの継続的な更新とアップグレードにより、Web フロントエンド開発はますます便利でオープンになってきています。ただし、新しい Web テクノロジを効率的に処理できない古いブラウザがまだいくつかあります。

最も頻繁に指摘される問題の 1 つは、IE (Internet Explorer) ブラウザだけが CSS プロパティとセレクターを特別に処理することです。このような CSS スタイルは、IE ブラウザーでのみ機能するため、「IE 専用 CSS」と呼ばれます。

この記事では、IE でのみ認識されるこれらの CSS プロパティとセレクターについて説明し、それらが存在する理由と、最新の Web 開発におけるそれらの対処方法を探ります。

1. なぜ IE で認識される CSS だけが存在するのでしょうか?

Web フロントエンド開発の初期の頃、IE は最も人気のあるブラウザの 1 つでした。当時、開発者は IE 固有の CSS スタイルを使用して、Web サイトが IE で正しく表示されるようにしていました。

時間が経つにつれて、Chrome、Safari、Firefox などの他のブラウザーが人気を博し、それらはすべて新しい CSS プロパティとセレクターをサポートし始め、開発者が Web サイトの外観をより詳細に制御できるようになりました。。ただし、Internet Explorer は廃止されたようで、開発者はサイトが IE で適切に機能することを確認するために古い CSS スタイルを使い続けなければなりませんでした。

IE が認識する CSS プロパティとセレクターは、当時は開発者が問題を解決するための応急処置と考えられていましたが、今では開発者にとって問題となっています。

2. IE でのみ認識される CSS プロパティ

以下は、IE でのみ認識される CSS プロパティです。これらのプロパティの使用は廃止されているため、開発者は使用を避ける必要があります。 :

2.1. フィルター属性

フィルター属性は IE ブラウザーのみで認識される CSS 属性で、ぼかし、明るい、影などの 1 つ以上のグラフィック効果を適用するために使用されます。これらの効果は、他のブラウザでも使用できる CSS フィルター機能によって実現できます。

ただし、IE 8 および IE 9 ブラウザーでは、フィルター属性で複数の効果を適用できますが、これは他のブラウザーでは不可能です。例:

.div {
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#000000');
    filter:alpha(opacity=50);
}

ログイン後にコピー

ここのフィルター属性は 2 つの効果を適用します。1 つはグラデーションの背景で、もう 1 つは不透明です。 IE 8 および IE 9 ブラウザでは両方の効果が機能しますが、他のブラウザでは最初の効果のみが適用されます。

したがって、IE 8 および IE 9 ブラウザーでフィルター効果を使用する必要がある場合は、filter 属性を使用する必要がありますが、他のブラウザーのフィルター効果では CSS フィルター関数を使用する必要があります。

2.2. -ms-interpolation-mode 属性

-ms-interpolation-mode 属性は、IE ブラウザでのみ認識される CSS 属性で、画像のレンダリング方法を制御するために使用されます。最近傍値、バイキュービック値、またはバイリニア値をとることができますが、これにより画像の品質が向上したり、低下したりする可能性があります。

ただし、この CSS プロパティは IE 8 ブラウザでのみ有効であり、他のブラウザでは無視されます。現在の Web 開発では、新しい CSS テクノロジにより画像のレンダリング方法をより詳細に制御できるため、一般にこのプロパティを使用する必要はなくなりました。

2.3. writing-mode 属性

writing-mode 属性は IE ブラウザのみで認識される CSS 属性で、ページ内のテキストの方向を変更するために使用されます。上から下または左から右の方向に設定でき、テキストの方向を縦または横に設定することもできます。

ただし、この CSS プロパティは他のブラウザでは機能しません。最新の Web 開発では、書き込みモード属性の代わりに、新しいフレックスボックスおよびグリッドレイアウトテクノロジを使用することをお勧めします。

3. IE でのみ認識される CSS セレクター

次に、IE でのみ認識される CSS セレクターの一部を示します。これらのセレクターは現在廃止されているため、開発者は使用を避ける必要があります:

3.1. * HTML セレクター

HTML セレクターは、IE ブラウザーのみで認識される CSS セレクターで、要素を選択するときに HTML ルート要素と一致させるために使用されます。このセレクターでは、「*」記号はすべての要素を表します。

例:

* html body {
    font-size: 14px;
}

ログイン後にコピー

これは、この CSS スタイルが HTML ルート要素の下のすべての body 要素に適用されることを意味します。

ただし、このセレクターは他のブラウザではサポートされていませんが、通常の子孫セレクターを使用して同じ効果を実現できます。

3.2. :first-child selector

:first-child セレクターは、IE ブラウザによってのみ認識される CSS セレクターで、要素の最初の子要素を選択するために使用されます。

例:

div:first-child {
    font-size: 16px;
}

ログイン後にコピー

これは、この CSS スタイルが、親要素の下の最初の子要素であるすべての Div 要素に適用されることを意味します。

ただし、IE 7 以前では、このセレクターは疑似要素: first-child とは異なります。 IE 7 以前では、このセレクターは最初の子要素のみを選択しますが、他のブラウザでは最初の子要素を選択します。

したがって、最新の Web 開発では、このセレクターの代わりに子孫セレクター: first-child を使用することをお勧めします。

4. IE でのみ認識される CSS に対処するにはどうすればよいですか?

IE でのみ認識される CSS プロパティとセレクターは、最近の Web 開発ではあまり一般的ではありませんが、IE 8 や IE 9 などの古いブラウザーでは依然として役立ちます。

これらの古いブラウザで Web サイトが正しく表示されるようにするために、開発者は条件付きコメントを使用して、さまざまな IE ブラウザにさまざまな CSS スタイルを提供できます。

たとえば、次の条件付きコメントは、IE 8 および IE 9 ブラウザーに特定の CSS スタイルを提供します。

<!--[if IE 8]>
    <link rel="stylesheet" type="text/css" href="ie8.css" />
<![endif]-->
 
<!--[if IE 9]>
    <link rel="stylesheet" type="text/css" href="ie9.css" />
<![endif]-->

ログイン後にコピー

在这里，如果浏览器是IE 8或IE 9，则加载ie8.css或ie9.css。这使开发人员可以针对不同的浏览器提供不同的CSS样式。