誤解しないでください。IE は最新の IE8 を含む CSS3 の高度なセレクターをサポートしていません (詳細については「CSS セレクターのブラウザー サポート」を参照)。しかし、CSS セレクターは作業を大幅に簡素化し、コードを改善するのに非常に役立ちます。効率性により、メンテナンス性の高いページを簡単に作成できるようになります。
しかし、IE が高度な CSS セレクター、特に CSS3 セレクターをサポートしているため、CSS セレクターの適用を促進できませんでした。ただし、ブラウザーの市場シェアをコントロールすることはできませんが、いくつかのテクノロジーを通じて作業を改善することはできます。他のテクノロジーを使用して、IE が CSS3 セレクターを隠れてサポートできるようにすることもできます。
英国出身の Web 開発エンジニアである Keith Clark は、IE で CSS3 セレクターをサポートできるようにする JavaScript ソリューションを開発しました。このスクリプトは、IE5 から IE8 までのさまざまなバージョンをサポートしています。
使用法
Robert Nyman の DOMAssistant スクリプトと ie-css3.js をダウンロードし、次のようにページの head タグにインポートするだけです。
<頭>
<script type="text/javascript" src="DOMAssistantCompressed-2.7.4.js"></script>
<script type="text/javascript" src="ie-css3.js"></script>
</head>
サポートされているセレクター
n番目の子
n 番目の最後の子
型の n 番目
型の最後から n 番目
第一子
最後の子
一人っ子
最初のタイプ
最後のタイプ
型のみ
空の
IE-CSS3 のいくつかの制限事項
スタイル シートは、<link> タグを通じて導入する必要があります。ページレベルのスタイルシートまたはインラインスタイルシートは効果がありません。しかし
外部スタイル ファイルで @import を使用すると、他のスタイル ファイルをインポートできます。
スタイル シート ファイルは、ページと同じドメイン名の下に配置する必要があります。
file:// パスを使用したスタイル ファイルは、ブラウザのセキュリティの問題により機能しません。
:not() セレクターはまだサポートされていません。
このメソッドは動的ではありません。スタイルを適用した後に DOM を変更することは無効になります。
どのように機能するのでしょうか?
ie-css3.js は、ページの各スタイル ファイルをダウンロードし、その CSS3 疑似セレクターを解析します。セレクターが見つかった場合は、同じ名前の CSS クラスに置き換えられます。例: div:nth-child(2) は div._iecss-nth-child-2 になります。次に、Robert Nyman の DOMAssistant を使用して要素の CSS3 セレクターに一致する DOM ノードを検索し、対応する CSS クラスをそれに追加します。
最終的に、要素のスタイル シートは新しいバージョンに置き換えられ、CSS3 セレクターを使用して、対応するスタイルが対応する要素に追加されます。
IEのCSSインタープリターを避ける
W3C によると、ブラウザーは認識できない CSS ルールを無視する必要があります。これにより問題が発生します。スタイル シート ファイルで CSS3 セレクターを使用する必要がありますが、IE はそれらを破棄します。
この問題を回避するために、各スタイル ファイルは XMLHttpRequest 経由でダウンロードされます。これにより、スクリプトはブラウザーの組み込み CSS インタープリターをバイパスし、生の CSS ファイルを読み取ることができるようになります。
プロジェクトのホームページにアクセスしてください
ie-css3.jsをダウンロード
DOMアシスタントをダウンロード
代替
明らかに、これは Ajax Web サイトの場合は完全な解決策ではありません。生成されたスタイル シートが適用された後に DOM を変更することは効果がないため、基本的には使用できません。しかし実際には、ie-css3 を自分でカスタマイズすることができます。ただ、これほどスマートではありません。