🍉

ベンダープレフィックスを自動で付ける方法

2020/12/19に公開

ベンダープレフィックスについての知識が曖昧だったので、ここにまとめておきます。

ベンダープレフィックスは各ブラウザに拡張機能であることを伝えるための識別子。CSSで採用される予定の機能を各ブラウザが先行的に実装している機能を使うため利用されます。

具体的にuser-selectプロパティを使ってみましょう。user-selectは、ユーザーが文章を判断できるかどうかを制御するプロパティでuser-select:noneを設定すればカーソルで選択することができません。

<p>ここは選択できます！！</p>
<p class="select-none">ここは選択できません！！</p>
<p>ここは選択できます！！</p>
<p class="select-none">ここは選択できません！！</p>

.select-none {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

p {
  margin: 0;
}

このようにプロパティの前にベンダープレフィックスをつけて適用させます。

各プロパティのブラウザ状況を調べるには「Can I use...」というサービスを利用します。プロパティで検索すれば対象のものが表示されます。

赤色が非対応で緑色がサポート済みです。小さい黄色枠で書かれているものがベンダープレフィックスになっており、それぞれを見ていくとuse-select:none;を使うには、ms、webkit、mozが必要なのが分かります。

日本のブラウザ状況を確認するには利用状況の設定が必要になります。中央付近にある設定ボタンを押すと以下のような画面が現れるので、Japanをインポートすると詳細が見れます。

ベンダープレフィックスを自動で付けるには、2つの方法があります。

Autoprefixer CSS onlineでは各ブラウザの対応状況に応じてベンダープレフィックスをつけてくれます。

Visual Studio Codeの拡張機能を使えば自動でベンダープレフィックスをつけてくれます。

まずは、Autoprefixerをインストールします。

次に、CSSファイルを開きAutoprefixer: Runのコマンドを入力します。そうすると自動的にベンダープレフィックスが追加されます。

まとめ