.browserlistrc

.browserlistrcよ。お主はなんぞ

Vueの練習をしようとCLIでプロジェクトを作成したところ設定ファイル群に見慣れぬものがいる。

.browserlistrc

> 1%
last 2 versions
not dead

これについて知るために下記２つの記事を参考にした。

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

CSSベンダープレフィックス-webkit-を今この瞬間に辞める為のAutoprefixerの導入 - Qiita

要するに

webサービスを提供する際に、ブラウザによって、そしてCSSプロパティによってベンダープレフィックスをつける必要がある。

私自身は今までブラウザ対応をしっかり行うWebサービスに従事していなかったため、あまり使ったことがない。
最近はそんなに必要ないんじゃないだろうか。と安易に考えつついざ要求されたらめんどくさそうな仕事であることは容易に推察できる。

ベンダープレフィックス *1

CSSの新しいプロパティに付けて、記述したプロパティが拡張機能であることを、各ブラウザに示すために使われる識別子

これを解消するために Autoprefixer なるものが存在するらしい。

ちなみにそれまでの先人たちはCanI Useというサイトで対応ブラウザを確認していたらしい。しかしflexboxや transform を入力しても何も出てこなかった。

MDN web docsのCSSの項目にも対応ブラウザの記載があるのでなんだかんだこちらで検索した方が良さそうである。

transform - CSS: カスケーディングスタイルシート | MDN

話を戻すとAutoprefixerは最新のブラウザ実装状況をまとめたサイト「Can I use」の情報を使用し、必要なベンダープレフィックスのみを付与する為のツールであるということだ。

必要なベンダープレフィックスを指定をするために登場するのが.browserlistrcである。

AutoprefixerはGulp、webpack、などいくつか使う方法があり、指定ファイル、実行方法もコマンドラインで適応させるなどいくつかパターンあるようだが.browserslistrcは汎用的に対応できるようなのでこちらを使うようにするのが良さそうだ。

責任には明確な方が良いし探すときもすぐに見つけられるので私は設定ファイルはpackage.jsonにまとめないで個別にだしたい派だ。

特に気になったのはVS Codeの拡張機能「Autoprefixer」もしくは「Live Sass Compiler」を使うという方法だ。

ベンダープレフィックスってなに？自動で付与する方法とは？ | Web Design Trends

最後に

VueのプロジェクトをCLIで作成すると最初から下記のような記述がすでにある。

各記述の意味は下記のとおり。

> 1%                  // シェアが1%以上のブラウザで必要なベンダープレフィックスのみ
last 2 versions       // 最新2バージョンで必要なベンダープレフィックスのみ
not dead              // 24ヶ月以内にアップデートされてないバージョンのブラウザのみ

ベンダープレフィックスを気にせずWebアプリケーション開発をできることは良きことなり。

*1:先頭に付ける-moz-や-webkit-など