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

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 に延期された。

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応
実験的非標準
Chrome 未対応 なしEdge ? Firefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile ? Firefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android ?

凡例

未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。

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

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