71
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

.browserslistrcで対象ブラウザを指定する

.browserslistrcは、「AutoprefixerでCSSにどのベンダープレフィックスを付けるか」などを決める設定ファイルです。
Autoprefixer以外にも対応していてツールごとに設定を持たずに済むので、ツール間で対象ブラウザ設定の齟齬が起こるのを防げます。
ブラウザのバージョンを直接指定せず、カバー率や直近○年という方法で指定しておくと、ブラウザのバージョンアップや、新しいブラウザの登場、シェアの激変などへの手動での設定変更が不要になります。
.browserslistrcファイルではなく、package.json に記述することも可能です。

対応ツール

対応するツールは下記です。

  • Autoprefixer
  • Babel
  • postcss-preset-env
  • eslint-plugin-compat
  • stylelint-no-unsupported-browser-features
  • postcss-normalize
  • obsolete-webpack-plugin

(https://github.com/browserslist/browserslist)
※typescriptの変換のターゲットは.tsconfigファイルのtargetに書きます。

サンプル

.browserslistrcファイルのサンプルです。
プロジェクトルートに配置します。

last 1 version
> 1%

記述方法

デフォルト

記述 意味
defaults > 0.5%, last 2 versions, Firefox ESR, not dead

特定のブラウザのバージョンを指定

記述 意味
ie 6-8 IEの6~8
Firefox > 20 バージョン20より新しいFirefox
iOS 7 iOSのSafariのバージョン7
Firefox ESR 最新の「Firefox Extended Support Release」バージョン

「>」以外に「>=」「<」も有効です。

browserslist-config-xxxx

記述 意味
extends browserslist-config-google browserslist-config-googleを使う

ビジターのカバー率で指定

地域コードのリスト https://github.com/ben-eb/caniuse-lite/tree/master/data/regions

記述 意味
> 5% 世界の使用状況統計を使用で5%以上
> 5% in US アメリカの使用統計で5%以上
> 5% in alt-AS アジア地域の利用統計で5%以上
> 5% in my stats 自国の利用統計で5%以上
> 0% 使用率が0%以上のブラウザ(全てのブラウザ)

年で指定

記述 意味
since 2015 2015年以降にリリースされたすべてのバージョン
last 2 years 過去2年にリリースされたすべてのバージョン

最新版から過去何バージョンまでか指定

記述 意味
last 2 versions 各ブラウザの最後の2つのバージョン
last 2 Chrome versions Chromeブラウザの最新の2バージョン
last 2 major versions 最新の2メジャーバージョン
last 2 iOS major versions iOSのSafariの最新の2メジャーバージョン

アルファ版、ベータ版

記述 意味
unreleased versions アルファ版とベータ版
unreleased Chrome versions chromeのアルファ版とベータ版

Node.js

記述 意味
maintained node versions すべてのNode.jsバージョン
node 10 Node.js 10.x.x
current node Browserslistで現在使用されているNode.jsのバージョン

除外

notキーワードを使います。

記述 意味
not ie <= 8 ie8未満を除外

サポート状況

notと組み合わせて「not dead」として使う事になると思います。
使用例:last 2 versionsではIE10もサポートされてしまうので、IE10を除外するときなど

記述 意味
dead 24ヶ月以内にアップデートされてないバージョンのブラウザ

確認

https://browserl.ist/ で該当するブラウザの一覧をチェックできます。

.browserslistをプロジェクトルートに配置後は、下記のコマンドでも確認可能です。

$ npx browserslist
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
71
Help us understand the problem. What are the problem?