63

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

リンクを確認してください

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;    
        }
    }
}

</ p>

興味深いことに、条件内でのメディアクエリのネスト@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;
    }
}
4

1 に答える 1

101

「どのブラウザがルールのネストをサポートしていますか？」に対する答えを単に探している人にとって、簡単@mediaな答えは、Firefox、Safari、Chrome（およびその派生物）、およびMicrosoftEdgeを含むすべての最新のブラウザが@mediaat-rulesのネストをサポートするようになったということです。 CSSConditional3で説明されているように。ネストされたat-rulesを含む問題のコードは、 Internet Explorer（新しい機能で更新されなくなったため、IEのどのバージョンもこの機能をサポートしないことを意味します）@mediaを除いて、どこでも正しく機能するはずです。

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

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

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

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

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

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

たとえば、このネストされたルールのセットでは、次のようになります。

@media print { /* rule (1) */
  /* hide navigation controls when printing */
  #navigation { display: none }
  @media (max-width: 12cm) { /* rule (2) */
    /* keep notes in flow when printing to narrow pages */
    .note { float: none }
  }
}

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

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

ただし、構文モジュールの文法は、これを反映するようにまだ更新されていません。@mediaCSS2.1の場合と同様に、ルール内での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;
    }
}
于 2012-07-31T19:04:06.523 に答える