🙋

autoprefixerとbrowserslistについて

Astroを使用した案件で、Android端末のみの表示がされないということが起こりました。
Webサイトを制作する中で、そういった事態は今後も起こると思うので対処法の一つを備忘録に残しておこうと思います。

今回検証できたのが、Astro環境のみなので、WordpressやReactは再度検証する必要があります。

autoprefixerをnpmインストールをする

autoprefixerとは自動的に必要なベンダープレフィックスを追加してくれる機能です。

参考サイト

npm i autoprefixer


インストールが完了したらbrowserslistの設定に移ります。

browserslistの設定

package.jsonにdependenciesと同じ階層に以下の記述をします。

"browserslist": [
    "defaults",
    "Android >= 4"
  ],


astro.config.mjsに以下の記述を行います。

postcss: {
        plugins: [autoprefixer],
   },


動作確認

npm run devなどを実行して検証ツールにベンダープレフィックスが追加してあり、Androidで動作が反映されれば完了となります。
(今回の例ではtransitionを対象としています。)