inverted-colors

inverted-colorsCSSメディア特性で、ユーザーエージェントまたはその下の OS が色を反転しているかどうかを調べるために使用することができます。

構文

inverted-colors 特性は以下の一覧のうち一つのキーワード値で指定します。

none
色が通常通り表示されます。
inverted
表示領域内のすべてのピクセルが反転されています。

HTML

<p>If you're using inverted colors, this text should be blue on white (the inverse of yellow on black). If you're not, it should be red on light gray.</p>
<p>If the text is gray, your browser doesn't support the `inverted-colors` media feature.</p>

CSS

p {
  color: gray;
}

@media (inverted-colors: inverted) {
  p {
    background: black;
    color: yellow;
  }
}

@media (inverted-colors: none) {
  p {
    background: #eee;
    color: red;
  }
}

結果

仕様書

仕様書 状態 備考
Media Queries Level 5
inverted-colors の定義
編集者草案

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
inverted-colors media featureChrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 完全対応 9.1WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 完全対応 10Samsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応