5

以下の例の各メディアクエリの意味を簡単に説明できる人がいるかどうか疑問に思っていましたか?

ここに例があります。

media="not screen and (color)" 
media="projection, screen and (color)" 
media="only projection and (color)"
4

1 に答える 1

7

メディアクエリの意味を分析するには、基本的に次のことを念頭に置く必要があります。

  1. コンマは「または」を意味します。
  2. メディア クエリの先頭にある括弧で囲まれていないものは、クエリの対象となるメディアの名前です (ただし、その単語が「not」または「only」である場合を除きます。この場合、2 番目の単語が関連するメディアです。
  3. 「not」は、その後に続くカンマまでのすべてを否定します。
  4. 括弧内は修飾子です。
  5. メディアを解析するために指定された HTML4 アルゴリズムはひどく壊れています: コンマ間の各部分から最初の単語を抽出するだけです。キーワード 'only' は、メディア クエリの作成者がこのバグを回避できるようにするために導入されました。メディア クエリを実装する UA は、このキーワードを無視します。

では、順番に。

最初のメディア クエリは、「画面と (色)」以外のすべてを選択します。そのため、カラー スクリーンではないもの (つまり、非スクリーンとモノクロ スクリーン) が選択されます。

2 番目のメディア クエリは、投影媒体 (カラーまたはモノクロ) またはカラー スクリーンを選択します。

3 番目のメディア クエリは、メディア クエリを実装する UA でカラー プロジェクション メディアを選択します。HTML 4 アルゴリズムを実装する UA では、「のみ」は HTML 4 メディア指定子ではないため、無視されます。「のみ」が省略された場合、古い UA ではすべてのプロジェクション メディアが選択されます。これは、最初の単語を抽出し、「and (色)」の部分を無視するためです。

于 2011-04-23T02:15:38.347 に答える