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

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

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

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

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

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

    デモ

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

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

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