web-dev-qa-db-ja.com

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

サポートはブラウザ間で異なるようです。

link を確認してください

Firefox：黒と白のテキスト。

Opera、Chrome、IE9：青と黒のテキスト。

どちらが正しいですか、どのように一貫性を持たせるのですか？

コード

@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内のメディアクエリのネストは機能しているように見えます。

例えば：

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Media test</title>
    <link rel="stylesheet" type="text/css" href="importer.css" />
</head>
<body>
    <h1>Why is this not consistent.</h1>
</body>
</html>

importer.css

@import url(media.css) screen and (min-width: 480px);

media.css

body {
    background-color: #6aa6cc;
    color: #000;
}

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

「どのブラウザが@mediaルールのネストをサポートしていますか？」への答えを単に探している人にとって、簡単な答えは、Firefox、Safari、Chrome（およびその派生物）、 Microsoft Edgeは、 CSS条件 で説明されているように、@media at-rulesのネストをサポートするようになりました。ネストされた@media at-rulesを含む質問のコードは、Internet Explorer 新しい機能で更新されなくなりました です。つまり、IEはこの機能をサポートしません）のバージョンはありません）。

この機能は CSS2.1 には存在しませんでした。なぜなら、コンマでグループ化できるメディアタイプのみが存在していたためです。これは、この質問が最初にあったときにこのサポートが非常に貧弱だった理由を説明します尋ねた。

以下は、これらの歴史的な制限を念頭に置いた元の質問の分析です。

正確に何が起こっているのかを理解するために、用語を少し混乱させる必要があります。

使用するコードは、@mediaルールを参照しますが、メディアクエリはそれほど多くありません。メディアクエリ自体は@mediaトークンに続くコンポーネントであり、ルールは@media、メディアクエリ、およびネストされたルールで構成されるコードブロック全体です中括弧のセット内。

これにより、CSSでメディアクエリを使用する際に多くの人が混乱する可能性があります。また、@mediaが別のメディアクエリを伴う場合でも、インポートされたスタイルシートの@importルールが正しく機能する特定のケースと同様です。メディアクエリは、@mediaルールと@importルールの両方で発生する可能性があることに注意してください。それらは同じものですが、スタイルルールをさまざまな方法で制限的に適用するために使用されています。

ここでの実際の問題は、ネストされた@mediaルールが CSS2.1では無効 であるということです。なぜなら、@media内に any at-rulesをネストすることはできないからルール。ただし、CSS3では状況がまったく異なるようです。つまり、条件付きルールモジュール 非常に明確に述べています@mediaルールは /をネストでき、例を示します：

たとえば、次のネストされたルールのセットでは：

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

（1）とマークされたルールの条件は、印刷媒体に対して真であり、（2）とマークされたルールの条件は、表示領域（印刷媒体の場合はページボックス）の幅が以下である場合に真です。 12cmしたがって、このスタイルシートが印刷メディアに適用される場合は常に規則「#navigation {display：none}」が適用され、スタイル「note：float：none}」はスタイルシートが印刷媒体および幅に適用される場合にのみ適用されますページボックスの12センチ以下です。

さらに、Firefoxはこの仕様に従ってルールを処理しているように見えますが、他のブラウザはまだCSS2.1の方法で処理しています。

構文モジュール の文法は、これを反映するためにまだ更新されていません。 CSS2.1と同様に、@mediaルール内のat-rulesのネストはまだ許可されていません。とにかく、この仕様は書き換えが予定されているので、これは問題ではないと思います。

基本的に、CSS3はそれを許可します（構文モジュールの書き換えを保留中）が、CSS2.1は許可しません（メディアクエリを定義せず、ネストされた@mediaルールブロックも許可しないため）。そして、少なくとも1つのブラウザーが新しい仕様のサポートを開始しましたが、他のブラウザーをバグだと呼ぶつもりはありません。代わりに、古い、より安定した仕様に実際に準拠しているため、まだ追いついていません。

最後に、@importが機能する理由は、@importがメディアクエリを使用して条件付きで機能できるためです。ただし、これはインポートしたスタイルシートの@mediaルールとは関係ありません。これらは実際には2つの別個のものであり、すべてのブラウザーでそのように扱われます。

ブラウザ間でコードを一貫して動作させるには、@importステートメントを使用するか、両方のルールでmin-widthを使用するため、単に@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;
    }
}
93
BoltClock