非標準
この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

CSSlight-level メディア特性は、周囲の明るさのレベルを調べるために使用することができます。

構文

dim
機器が薄暗い環境で使われており、コントラストや明るさが過大だと、悩ましかったり読みにくかったりする状況です。例えば夜や、室内の電灯が薄暗い環境です。
normal
機器が画面と同等の水準の明るさの環境で使われており、特別な調整が必要ない状況です。
washed
機器が特に明るい環境で使われており、画面に反射して読みにくくなる状況です。例えば、明るい日差しの下などです。

このコードはほぼすべての機器で動作しません (互換性は低いです)。

@media (light-level: normal) {
  p {
    background: url("texture.jpg");
    color: #333;
  }
}

@media (light-level: dim) {
  p {
    background: #222;
    color: #ccc;
  }
}

@media (light-level: washed) {
  p {
    background: white;
    color: black;
    font-size: 2em;
  }
}

仕様書

仕様書 状態 備考
Media Queries Level 4
light-level の定義
勧告候補 Media Queries Level 5 に延期された。

ブラウザーの対応

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

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

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