CSS3

特能

environment-blending

[Edge]⛌？。→●、mdn、mdn（en-US）

ディスプレイ技術の検出法。

利用者のディスプレイの特徴をクエリする。作者は、ディスプレイ技術に応じてページの視覚やレイアウトを調整することにより、視認性を改善できるようになる。

opaque

文書は、伝統的なモニタや紙などの不透明な媒体上に具現化されている。黒は暗くなり、白は明度 100% になる。

additive

ディスプレイは、キャンバスの色と現実のそれを加法的に混色している。黒は全透明になり【すなわち、現実の風景が透過する】、白は明度 100% になる。

例えば、車内 head-up ディスプレイ。【“HUD”― 外の風景と重ね合わせて表示する装置】

subtractive

ディスプレイは、キャンバスの色と現実のそれを減法的に混色している。白は全透明になり、色が暗いほど【現実との】コントラストが高くなる。

例えば、浴室の鏡に埋め込まれた LCD ディスプレイ。

body { background-color: white; }
p { color: black; }

@media(environment-blending: additive) {
    body { background-color: black; }
    p { color: white; font-size: 16px; font-weight: 1000; }
}

以下のCSSが組み込んであります：

<SPAN class=Test>テスト</SPAN><BR>
<SPAN class=Test2>テスト</SPAN><BR>
<SPAN class=Test3>テスト</SPAN><BR>

関連

テスト