autoprefixerでcolor-adjustをprint-color-adjustに置換する方法


まず、color-adjustプロパティは、画像の色をプリンターのカラーマッチングに調整するために使用されます。しかし、最新の仕様では、このプロパティがprint-color-adjustに変更されました。したがって、autoprefixerを使用してこの変更を適用する必要があります。

Autoprefixerを使用するには、まずautoprefixerパッケージをインストールする必要があります。npmパッケージマネージャーを使用して、以下のコマンドを実行します。

npm install autoprefixer

インストールが完了したら、AutoprefixerをCSSファイルに適用できます。以下は、Autoprefixerを使用してcolor-adjustをprint-color-adjustに置換する方法の例です。

/* input.css */
/* Before */
img {
  color-adjust: exact;
}
/* After */
img {
  print-color-adjust: exact;
}

上記のCSSコードをinput.cssという名前のファイルに保存します。

次に、Autoprefixerをコマンドラインから実行します。以下のコマンドを使用します。

npx autoprefixer input.css --output output.css

これにより、input.cssファイルが自動的に変換され、output.cssファイルに出力されます。output.cssファイルには、color-adjustプロパティがprint-color-adjustに置換されたコードが含まれます。

Autoprefixerを使用する別の方法は、CSSビルドツール(例:Webpack、Gulp)と統合することです。ビルドツールの設定ファイルにAutoprefixerを組み込むことで、ソースコードをビルドするたびに自動的にプレフィックスが追加されます。