print-color-adjust
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
print-color-adjust
は CSS のプロパティで、ユーザーエージェントが出力端末上で要素の外観を最適化するために、何らかの調整を行うことができるかを設定します。
既定では、ブラウザーは、出力端末の種類や能力を得た上で、必要かつ賢明であると判断した要素の外観に対する調整を行うことができます。
構文
print-color-adjust: economy;
print-color-adjust: exact;
/* グローバル値 */
print-color-adjust: inherit;
print-color-adjust: initial;
print-color-adjust: revert;
print-color-adjust: revert-layer;
print-color-adjust: unset;
print-color-adjust
プロパティは以下のキーワード値のうちの一つで指定します。
値
economy
-
ユーザーエージェントは、レンダリングされる端末に合わせて出力を最適化するために、適切かつ賢明と思われるように要素を調整することができます。 例えば、印刷する場合、ブラウザーは背景画像をすべて取り除き、白い紙で読むためにコントラストが最適化されるようにテキストの色を調整することを選ぶかもしれません。 これが既定値です。
exact
-
要素のコンテンツは、色、画像、スタイルを慎重かつ重要な方法で使用するように固有かつ慎重に作成されており、ブラウザーによって変更されることは、事態を良くするどころかむしろ悪くするかもしれません。 コンテンツの外観は、ユーザーからのリクエスト以外では変えてはいけません。 例えば、あるページに、背景色が白と薄い灰色の間で交互に変化する行を持つ情報のリストを記載することがあります。 背景色が除去されると、コンテンツの可読性が低下します。
使用上の注意
ブラウザーが指定した外観を変更したい理由はいくつかあります。
- コンテンツが出力端末上で近すぎるテキストと背景色を使用しているため、読みやすさが損なわれています。
- 出力端末がプリンターの場合、インクを節約するために、暗い画像や極端に濃い背景画像が除去されることがあります。
- ページを印刷するとき、ブラウザーは暗い背景の明るい色のテキストを白い背景の暗い色のテキストに置き換えたくなるかもしれません。
ユーザーエージェントが色や画像の使用を制御するためにユーザーに提供するオプションは print-color-adjust
の値よりも優先されます。
言い換えれば、 print-color-adjust
が何らかの動作をするという保証はありません。
ユーザーがその動作を上書きすることができるだけでなく、それぞれのユーザーエージェントが、どのような状況で print-color-adjust
をどのように処理するかを自分で決めることができます。
公式定義
初期値 | economy |
---|---|
適用対象 | すべての要素 |
継承 | あり |
計算値 | 指定通り |
アニメーションの種類 | 離散値 |
形式文法
print-color-adjust =
economy |
exact
例
低コントラストの維持
この例では、 background-image
と半透明の linear-gradient()
関数を黒の背景色の上に用いて、中程度の赤のテキストの後ろに濃い青のグラデーションがあるボックスを表示しています。
理由はともあれ、これは紙の上も含め、どのようなレンダリング環境でも望ましい外観なので、 print-color-adjust: exact
も使用して、ボックスをレンダリングするときに色やスタイル設定を行わないようにブラウザーに指示しています。
CSS
.my-box {
background-color: black;
background-image: linear-gradient(
rgba(0, 0, 180, 0.5),
rgba(70, 140, 220, 0.5)
);
color: #900;
width: 15rem;
height: 6rem;
text-align: center;
font:
24px "Helvetica",
sans-serif;
display: flex;
align-items: center;
justify-content: center;
print-color-adjust: exact;
}
HTML
<div class="my-box">
<p>もっとコントラストが必要です!</p>
</div>
結果
仕様書
Specification |
---|
CSS Color Adjustment Module Level 1 # propdef-print-color-adjust |
ブラウザーの互換性
BCD tables only load in the browser