webpackやgulpでCSSをコンパイルするときにpostCSSのautoprefixなどが使われていることがある。この**postCSSやautoprefixとは何か？**について。
##postCSSとは？
CSSを操作するためのJavaScriptベースのプラグイン。
cssファイルにpostCSSの機能を使うと、デバッグや圧縮、ファイル処理などをしてくれる便利機能。
###ポストプロセッサとは？ postCSSはポストプロセッサと呼ばれている。
sassといった、コンパイルしてcssを出力するプロセッサをプリプロセッサ(pre- は前の意味)とよ呼び、これに対して、cssファイルに対して処理を行うためポストプロセッサ(post- は後ろ)と呼ばれる。
sassファイル
↓ pre processor
cssファイル
↓ post processor
変換後のcssファイル
##主なプラグイン一覧 postCSSは総称で、その中に各機能毎のプラグインがある。
| プラグイン | 内容 |
|---|---|
| autoprefixer | ベンダープレフィックスの最適化 |
| PreCSS | sassのようなマークアップができる |
| StyleLint | コードのバリデーション。エラーがあると教えてくれる。 |
| PostCSS Assets | 指定したファイルパスの中のデータ（画像など）をコンパイルしURLとして返す |
| CSSNano | cssファイルの圧縮・最適化。コメントアウトや改行などを削除してくれる。 |
| CSS MQPacker | メディアクエリの最適化。同じメディアクエリをまとめる |
##autoprefixerとは？ [Can I Use](https://caniuse.com/)の情報を元に、必要に応じてベンダープレフィックスを適用してくれる。
::placeholder {
color: gray;
}
↓ autoprefixer
::-moz-placeholder {
color: gray;
}
:-ms-input-placeholder {
color: gray;
}
::placeholder {
color: gray;
}
gulpやwebpackなどでの使い方はautoprefixer github公式に記述してある。
・ベンダープレフィックスとは？
プロパティの頭に付ける-moz-や-webkit-など。
新しいCSSで適用される予定はあるが、使い勝手の良いCSSプロパティをブラウザが先行して導入している。
ブラウザによってはベンダープレフィックスがないと認識してくれないプロパティがある。
##PostCSS Assets 画像などのassetファイルを簡単に指定できる。
▼実例
ロードするパスを定義する。
.js
var options = {
loadPaths: ['fonts/', 'media/patterns/', 'images/']
};
.css
body {
background: resolve('foobar.jpg');
background: resolve('icons/baz.png');
}
↓ PostCSS Assetsによる変換
.css
body {
background: url('/media/patterns/foobar.jpg');
background: url('/images/icons/baz.png');
}
指定ディレクトリの中からファイル探し、コンパイル後のcssのURLを置き換える。
##CSSNano cssファイルの圧縮・最適化。改行などを削除してくれる。
.css
/* normalize selectors */
h1::before, h1:before {
/* reduce shorthand even further */
margin: 10px 20px 10px 20px;
/* reduce color values */
color: #ff0000;
/* remove duplicated properties */
font-weight: 400;
font-weight: 400;
/* reduce position values */
background-position: bottom right;
/* normalize wrapping quotes */
quotes: '«' "»";
/* reduce gradient parameters */
background: linear-gradient(to bottom, #ffe500 0%, #ffe500 50%, #121 50%, #121 100%);
/* replace initial values */
min-width: initial;
}
/* correct invalid placement */
@charset "utf-8";
↓ CSSNano
.css
@charset "utf-8";h1:before{margin:10px 20px;color:red;font-weight:400;background-position:100% 100%;quotes:"«" "»";background:linear-gradient(180deg,#ffe500,#ffe500 50%,#121 0,#121);min-width:0}
###CSS MQPacker メディアクエリの最適化。同じメディアクエリをまとめてくれるので、処理毎にメディアクエリを書いていくことができる。
.css
.foo {
width: 240px;
}
@media screen and (min-width: 768px) {
.foo {
width: 576px;
}
}
.bar {
width: 160px;
}
@media screen and (min-width: 768px) {
.bar {
width: 384px;
}
}
↓ css mqpacker
.css
.foo {
width: 240px;
}
.bar {
width: 160px;
}
@media screen and (min-width: 768px) {
.foo {
width: 576px;
}
.bar {
width: 384px;
}
}
共通する@media screen and (min-width: 768px) の中身を自動でまとめた。
以上。