まず、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を組み込むことで、ソースコードをビルドするたびに自動的にプレフィックスが追加されます。