≪ Today I learned. RSS購読
公開日
タグ
CSS
著者
ダーシノ(@bc_rikko)

print-color-adjustで出力に応じた最適化を行う

print-color-adjustプロパティを使うことで、出力端末上での外観を最適化できる。

よくあるウェブサイトのスタイルに「目に優しくするために背景色に真っ白(#fff)を避ける」というものがある。当TILブログも同様に真っ白を避け#fafafaを使っている。

ただ、そういったページを印刷すると無用なインクを消耗してしまう。そういったことに対処するためにprint-color-adjustプロパティがある。

body {
  /* 既定値:背景画像を取り除き印刷に最適化される */
  print-color-adjust: economy;
  /* 指定された色をそのまま印刷する */
  print-color-adjust: exact;
}

デモ

背景色がうっすらついている場合

「背景色がうっすらついている場合」という文字があり、その背景色は取り除かれ白くなっている

「背景色がうっすらついている場合」という文字があり、その背景色はそのまま印刷されている