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 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
light-level media feature
実験的非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android ?

凡例

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

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

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