🍉

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

2020/12/19に公開

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

ベンダープレフィックスとは?

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

  • webkit:Chrome、Safari、Edge
  • moz:Firefox
  • ms:IE
  • o:Opera

ベンダープレフィックスの使い方

具体的に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;を使うには、mswebkitmozが必要なのが分かります。

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

ベンダープレフィックスを自動で付けるには?

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

  1. ブラウザのツールを使う
  2. VSCodeの拡張機能を使う

1.ブラウザのツールでベンダープレフィックスを自動で付ける

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

2.VSCodeの拡張機能を使う

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

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

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

まとめ

  • ベンダープレフィックスは先行的に搭載された機能を各ブラウザで対応させるためにある
  • 各プロパティの対応状況を調べるには「Can I use...」を使う
  • ベンダープレフィックスはAutoprefixer CSS onlineのサイトやVSCodeのAutoprefixerの拡張機能を使えば自動で付加できる

Discussion