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 5
light-level の定義
編集者草案 初回定義

ブラウザーの対応

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,