CSS3

プロパティ

forced-color-adjust

  編集:2022.07.14 by T.A.

mdn(en)mdn

特定の要素の強制色パレットからの opt out。

名前 forced-color-adjust
auto | none | preserve-parent-color
初期値 auto
適用対象 すべての要素/テキスト
継承 される
百分率 受容しない
算出値 指定されたキーワード
正準的順序 文法に従う
アニメーション型 アニメート不可

forced-color-adjust プロパティは、[ある特定の要素に対し、強制色モードを opt out して【任意で外して】、色に対する全部的な制御を CSS に戻す]ことを、作者に許容する。

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

auto
要素の色は、強制色モードにおいて、ユーザー エージェントにより自動的に調整される。
開始<SPAN class=T_auto style="
 border:10px outset #fdd;
 background-color:#fbb;
">テスト</SPAN>終了

ハイコントラストにした結果:

none
要素の色は、強制色モードにおいて、ユーザー エージェントにより自動的に調整されない。
開始<SPAN class=T_none style="
 border:10px outset #fdd;
 background-color:#fbb;
">テスト</SPAN>終了

ハイコントラストにした結果:

注意: 作者は、この値を利用するのを、次に該当するときに限るべきである:
利用者が必要とする[色、コントラスト]をサポートするために、自身で色を調整していて、当の要素用に、もっと適切な利用者体験を供するよう、ユーザー エージェントによる既定の調整に対し変更を為す必要がある。
preserve-parent-color
強制色モードにおいて、親から color プロパティを継承する場合(すなわち、要素のカスケード値は、無いか[currentcolorinherit/親から継承する別のキーワード]である)、color プロパティの算出値は親の color の使用色になる。

他のすべてに関しては、none と同じにふるまう。

<SPAN style="
 background-color:#bfb;
 color:#0f0;
">
 開始<SPAN class=T_preserveparentcolor style="
  border:10px outset #fdd;
  background-color:currentcolor;
  color:currentcolor;
 ">テスト</SPAN>終了<BR>
 開始<SPAN class=T_preserveparentcolor style="
  border:10px outset #fdd;
  background-color:inherit;
  color:inherit;
 ">テスト</SPAN>終了
</SPAN>

ハイコントラストにした結果:

注記: この値は、もっぱら次が意図される: 埋め込まれた SVG 要素のうち、テキスト色を外縁文書から受け取ることを期待するものが、適度なふるまいを取得する(および強制色モードによる調整と一貫させる)一方で、他では、SVG の正確な色を既定で保全する ― 強制色モードは、一般に、絵図には有用に適用し得ないので。

SVG 内容を壊さないようにするため、ユーザー エージェントには、[自身のユーザー エージェント スタイルシートに、次の規則を追加する]ことが期待される:

@namespace "http://www.w3.org/2000/svg";
svg|svg { forced-color-adjust: preserve-parent-color; }
svg|foreignObject { forced-color-adjust: auto; }

ユーザー エージェントは、根要素に設定された forced-color-adjust 値を文書の表示域へ伝播させるものとする(例えば、キャンバスの背景など、それが影響し得る所では)。forced-color-adjust は、HTML body 要素からは伝播しないことに注意。

処理能に基づく色調整

¶省く


テスト
HTML:

ここに表示
¶[Edge]○画面をハイ コントラスト モードにしてOK
HTML:

ここに表示
スクリプト:


スクリプト:



表示内容:
表示内容: