CSSgrid メディア特性は、出力機器がグリッドベースの画面を使用しているかどうかを調べるために使用します。

現在のパソコンやスマートフォンの大部分は、ビットマップベースの画面を持っています。グリッドベースの画面とは、例えばテキストのみの端末や、固定フォントのみで表示する基本的な電話などです。

構文

grid 特性は <mq-boolean> 値 (0 又は 1) として指定し、出力機器がグリッドベースであるかどうかを表します。

HTML

<p class="unknown">I don't know if you're using a grid device. :-(</p>
<p class="bitmap">You are using a bitmap device.</p>
<p class="grid">You are using a grid device! Neato!</p>

CSS

:not(.unknown) {
  color: lightgray;
}

@media (grid: 0) {
  .unknown {
    color: lightgray;
  }

  .bitmap {
    color: red;
    text-transform: uppercase;
  }
}

@media (grid: 1) {
  .unknown {
    color: lightgray;
  }

  .grid {
    color: black;
    text-transform: uppercase;
  }
}

結果

仕様書

仕様書 状態 備考
Media Queries Level 4
grid の定義
勧告候補 変更なし。
Media Queries
grid の定義
勧告 初回定義。

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応 あり ? あり ? あり あり
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 ? ? ? ? ? ? ?

ドキュメントのタグと貢献者

このページの貢献者: mfuji09
最終更新者: mfuji09,