ネストされた CSS @media ルールはすべてのブラウザーで一貫して機能しますか?

CSS での @media ルールのネスト、再考

元の質問では、CSS でネストされた @media ルールを含む CSS コード スニペットの一貫性のないレンダリングについて調査していました。さまざまなブラウザ。以下は、ブラウザーのサポートの現在の状態に基づいた更新された分析です:

CSS3 のネストされた @media ルール

CSS3 の CSS Conditional Rules モジュールに従って、ネストされた @mediaルールが完全にサポートされるようになりました。次の構文が有効です:

@media print {
  #navigation { display: none }
  @media (max-width: 12cm) {
    .note { float: none }
  }
}

ブラウザのサポート

Firefox、Safari、Chrome、Microsoft Edge、Opera などの最新のブラウザは、ネストされた @media をサポートするようになりました。 CSS Conditional 3 で定義されているルール。Internet Explorer はこれをサポートしていません。

元の問題

元の質問のコードは、ブラウザー間で一貫して動作しないネストされた @media ルールを示していました。これは、当時の古いバージョンのブラウザでサポートされていた仕様である CSS2.1 でのネストがサポートされていなかったためです。

解決策

対応するブラウザの場合ネストされた @media ルールはサポートされていません。回避策は、ネストを削除して複数の @media ルールを記述することです。個別に:

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

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

メディア条件付き @import

メディア条件付き @import ステートメントが一貫して機能する理由は、スタイルシートを条件付きで適用するためではなく、スタイルシートを適用するためです。 @media 内でのネストが可能になるためrules.

結論

CSS Conditional 3 仕様に従って、ネストされた @media ルールが最新のブラウザーで広くサポートされるようになりました。この機能をサポートしていないレガシー ブラウザの場合、簡単な回避策は別の @media ルールを使用することです。

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