🛠️

browserslistとpostCSSをモダンブラウザにチューニング

2025/01/20に公開

前書き

担当しているwebサイトの運用案件の開発環境でビルド系のコマンドを入力した時に、下記のようなメッセージがいつも出ていて気になっていました。

Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
[16:15:13] gulp-postcss: pc/common_pc.css
autoprefixer: /Users/Desktop/project/src/assets/_scss/pc/common_pc.css:2434:3: Autoplacement does not work without grid-template-rows property
autoprefixer: /Users/Desktop/project/src/assets/_scss/pc/common_pc.css:2593:3: IE does not support justify-content on grid containers
autoprefixer: /Users/Desktop/project/src/assets/_scss/pc/common_pc.css:5778:3: IE does not support justify-content on grid containers
autoprefixer: /Users/Desktop/project/src/assets/_scss/pc/common_pc.css:6303:3: Autoplacement does not work without grid-template-columns property
autoprefixer: /Users/Desktop/project/src/assets/_scss/pc/common_pc.css:6841:3: grid-auto-columns is not supported by IE

また、ビルド後に吐き出されたCSSファイルのベンダーフィックスの自動付与が不安定で、納品の際に困ったため、いよいよこのメッセージの読解と発生原因の調査に取り組もうと決めました。

環境

開発環境のチューニングが行き届いておらず、古めになっています。

Browserslistの更新

まずはメッセージに従い、Browserslistをアップデートします。

Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

▼更新前

npx browserslist
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
and_chr 84
and_ff 68
and_qq 10.4
and_uc 12.12
android 81
baidu 7.12
chrome 84
chrome 83
chrome 81
chrome 80
edge 84
edge 83
edge 18
firefox 79
firefox 78
firefox 77
firefox 76
firefox 68
ie 11
ios_saf 13.4-13.5
ios_saf 13.3
ios_saf 12.2-12.4
kaios 2.5
op_mini all
op_mob 46
opera 69
opera 68
safari 13.1
safari 13
samsung 12.0
samsung 11.1-11.2

最新のchromeが132なのでかなり更新ができていませんね💦

▼更新後

npx browserslist                   
and_chr 131
and_ff 132
and_qq 14.9
and_uc 15.5
android 131
baidu 13.52
chrome 132
chrome 131
chrome 130
chrome 125
chrome 109
edge 131
edge 130
firefox 134
firefox 133
firefox 68
ie 11
ie_mob 11
ios_saf 18.2
ios_saf 18.1
ios_saf 18.0
ios_saf 17.6-17.7
ios_saf 16.6-16.7
ios_saf 15.6-15.8
kaios 3.0-3.1
kaios 2.5
op_mini all
op_mob 80
opera 114
opera 113
safari 18.2
safari 18.1
samsung 27
samsung 26

Browserslistのアップデートが確認でき、Browserslisによるメッセージは消えました。

次に、package.jsonにbrowserslistの設定を追加します。
元々postcssrcのbrowsersが書かれていたのですが、現在非推奨の書き方になっているので削除しておきます。

一旦defaultsに設定していますが、必要に応じて下記の設定は調整していこうと思います。

"browserslist": [
  "defaults"
]

ちなみにdefaultsに含まれる設定は下記になります。

0.5%, last 2 versions, Firefox ESR, not dead

▼参考記事
https://dev.classmethod.jp/articles/asked-to-update-the-browserslist-when-building-react-app/
https://zenn.dev/taketaku/articles/ffb239c3da8613
https://github.com/browserslist/browserslist
https://iwb.jp/postcssrc-browserslist-three-common-mistakes/

PostCSSの調整

現状、CSS Grid を IE11 で使用することを前提とした環境で、gulpのタスクにautoprefixer({ grid: "autoplace" })を設定して自動配置できるように設定しています。

▼参考記事
https://qiita.com/yuzuru_xa/items/b980bad4a4b4aa37537e

しかし今日IEはサポートが終了しており、弊社でもIE対応はしないことに決まったため、ビルドタスクもモダンな形にアップデートしていきます。

現在のCSSオプションは下記になります。

// postCssOption
const postCssOption = [
  flexBugsFixes(),
  autoprefixer({ grid: "autoplace" }),
  cssDeclarationSorter({
    order: "alphabetical"
  }),
  mqpacker()
];

postCssOptionに関する記事が見つからず、AIに聞いてみました。

claude 3.5による回答

flexBugsFixes() - このプラグインはIEのFlexboxのバグに対処するためのもので、モダンブラウザでは必要ありません。
autoprefixer({ grid: "autoplace" }) の grid: "autoplace" オプション - このオプションは特にIEのCSS Gridのサポートのために使用されます。IE以外のモダンブラウザではCSS Gridが標準的にサポートされているため、このオプションは不要です。ただし、autoprefixer自体は他のベンダープレフィックスのために必要な場合があります。

修正したオプションは下記になります。

// postCssOption
const postCssOption = [
  autoprefixer(),
  cssDeclarationSorter({
    order: "alphabetical"
  }),
  mqpacker()
];

オプションを修正したタイミングで、autoprefixerによるメッセージも消えました。

まとめ

本記事ではbrowserslistとpostCssによるビルドタスクについて調査しながら、開発環境をアップデートしてきました。browserslistと他のフロントエンドツールのチューニングは、サイトをモダンブラウザに対応させ続けていくために意識して見ておく部分だと分かりました。

Discussion