CSS のネストされた @media ルールに対するブラウザーのサポートはどの程度一貫していますか?

CSS での @media ルールのネスト: ブラウザーのサポートと互換性

質問:

方法異なるブラウザ間での @media ルールのネストのサポートは一貫していますか?提供されたコードの表示がさまざまなブラウザーで異なるのはなぜですか?また、この不一致の背後にある理由は何ですか?これを解決して一貫したスタイルを実現できますか?

回答:

ブラウザのサポート

@media ルールのネストはサポートされていませんでした。これは、CSS2.1 での有効な慣行です。そのため、この機能のサポートはブラウザーごとに大幅に異なります。ただし、CSS Conditional 3 の導入により、@media ルールのネストは、Firefox、Safari、Chrome、Microsoft Edge を含むすべての最新ブラウザでサポートされる機能になりました。

ネストの互換性

質問で提供されているコードには、@media ルールのネストが含まれています。 CSS3 では @media ルールを他の @media ルール内にネストできますが、このネストは CSS2.1 では許可されませんでした。その結果、古いバージョンの Internet Explorer など、依然として CSS2.1 に準拠しているブラウザは、ネストされた @media ルールを正しく処理できません。

不一致の理由

Firefoxは、新しい CSS Conditional 3 仕様を実装し、ネストされた @media ルールを意図どおりに解釈して適用できるようにしました。一方、Opera、Chrome、IE9 などの他のブラウザは、ネストされた @media ルールをサポートしない古い CSS2.1 仕様に従っています。その結果、最も内側の @media ルールで定義されたスタイルを適用することになり、スタイルの不一致が生じます。

一貫性の達成

全体で一貫したスタイルを確保するにはすべてのブラウザでは、ネストされた @media ルールを削除することをお勧めします。これは、最初の @media ルール内の 2 番目の @media ルールを削除することで実行できます:

@media screen and (min-width: 480px) {
    body {
        background-color: #6aa6cc;
        color: #000;
    }

    @media screen and (min-width: 768px) {  // Remove this nested rule
        body {
            background-color: #000;
            color: #fff;
        }
    }
}

ネストされたルールを削除した後、スタイルは、CSS Conditional 3 および CSS2 をサポートするすべての最新ブラウザーに一貫して適用されます。 1.

以上がCSS のネストされた @media ルールに対するブラウザーのサポートはどの程度一貫していますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。