ネストされた @media ルールは CSS でどのように機能しますか?また、どのようなブラウザーがサポートされていますか?

CSS での @media ルールのネスト

CSS メディア クエリを使用する場合、開発者が @media ルールをネストしようとすると、ブラウザ間で不一致が発生する可能性があります。条件付き @import 内で。この記事では、@media ルールのネストの微妙なニュアンスを掘り下げ、ブラウザのサポートとさまざまな動作の根本的な理由を探ります。

ブラウザのサポート

歴史的に、ネスト @ はサポートされていました。 CSS2.1 にはそのような機能がないため、メディア ルールは制限されていました。ただし、CSS3 の条件付きルール モジュールの出現により、@media ルールをネストする機能が導入され、メディアの条件に基づいてスタイルをより詳細に制御できるようになりました。

現在、Firefox、Safari、Chrome (およびその派生版) と Microsoft Edge は、CSS 条件 3 で説明されている @media ルールのネストをサポートしています。これは、ネストされた @media at-rules を含む問題のコードが、どこでも正しく動作することを意味します。 Internet Explorer (開発は終了しました) は例外です。

用語の明確化

「@media ルール」という用語は、 @media、メディア クエリ、および中括弧内にネストされたルールで構成されるコード ブロック。 「@メディア クエリ」は、特にルールのメディア条件部分を指します。

ネストと条件付き @import

紛らわしいことに、メディア クエリは @ でも使用できます。ルールをインポートすると、ルールがどのように相互作用するかについて疑問が生じます。留意すべき重要な違いは、メディア クエリを使用した @import はインポートされたスタイルシートの適用を制限するのに対し、@media ルールはスタイルシート内のスタイルの適用を制限するということです。

提供されている例では、@media @import ステートメントでメディア クエリが使用されているにもかかわらず、インポートされたスタイルシート内のルールは Firefox で正しく機能します。これは、これらが条件付きでスタイルを適用するための 2 つの別個のメカニズムであるためです。

一貫性の強制

ブラウザ間で一貫した動作を確保するには、開発者は条件付き @import ステートメントを使用するか、または@media ルールのネストを削除します。例の両方のルールで最小幅のメディア条件が使用されているため、後者のオプションをお勧めします。

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