まだベンダープレフィックスで消耗してるの？

公開日：2017/06/01

更新日：2017/10/29

カテゴリー: HTML・CSS

最近時間に余裕ができたのでこれまで放置していたサイトのデザイン周りに手を入れているのですが、不要なコードやマーキングルールに沿っていないものが多数あることに気づきました。

例えば、HTML5の黎明期には（確か）header要素にバナーを含めるときはバナーロール属性「role=”banner”」が必要と言われていたのに実は不要になってたり、h1タグは1ページに複数あっていいという話だったのに1つしかダメだったり・・・

そして一番不要になったものが「ベンダープレフィックス」でした。

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

「ベンダープレフィックス」とは、主に、CSS3で採用予定（草案段階）の機能を各ブラウザが先行的に実装し、その先行実装した機能を有効化させるために必要な各ブラウザ毎の「-moz-」や「-webkit-」という接頭辞のことをいいます（詳細は後述）。

ベンダープレフィックスの一覧

各主要ブラウザのベンダープレフィックスをまとめておきます。

-ms-　　：Internet Explorer、Microsoft Edge
-moz-　　：Firefox
-webkit-　：Google Chrome、Safari、Microsoft Edge
-o-　　　：Opera　※後述

ベンダープレフィックスの例

これだけではわかりづらいと思うので、具体的に説明したいと思います。

CSS3でボックスサイズの算出方法を指定する「box-sizing」プロパティが採用予定だった
それを各主要ブラウザが先行的に実装した
Internet Explorerで「box-sizing」を使用するためには「-ms-box-sizing」とする必要があった
Firefoxで「box-sizing」を使用するためには「-moz-box-sizing」とする必要があった
GoogleChromeで「box-sizing」を使用するためには「-webkit-box-sizing」とする必要があった

つまり、CSSで「box-sizing」プロパティをコーディングする場合、各主要ブラウザでそれを有効化させるためにはこのようにしなければなりませんでした。

.sample{
	width: 300px;
	height: 100px;
	-moz-box-sizing: border-box;	/*Firefox用*/
	-webkit-box-sizing: border-box;	/*GoogleChrome、Safar用*/
	-o-box-sizing: border-box;	/*Opera用*/
	-ms-box-sizing: border-box;	/*Internet Explorer・Microsoft Edge用*/
	box-sizing: border-box;		/*将来的に正式実装されたときのため用（必ず書く）*/
}

あれやこれやあって書くのも見るのもかなり面倒ですよね？

不要になったベンダープレフィックス

しかしこのコードは現在、このように1行にまとめられます。

.sample{
	width: 300px;
	height: 100px;
	box-sizing: border-box;
}

かなりシンプルになりましたね。なぜこのようにできるのか？

それは、「box-sizing」プロパティがCSS3の採用予定（草案）から「勧告候補」（ほぼほぼ採用）にランクアップしたため、各ブラウザが「試験的な実装」（ベンダープレフィックス必要）から「正式実装」（ベンダープレフィックス不要）に切り替えたからです。

そしてそれに伴ってブラウザのバージョンが上がり、ベンダープレフィックスを付けることなく「box-sizing」プロパティが利用できるようになりました。

その他のCSSでも同様

「box-sizing」プロパティだけでなく、CSS3で採用予定だった機能（各ブラウザのベンダープレフィックスが必要だったプロパティ）のほとんどが、草案段階から勧告に近づいており、今現在一般的に仕様されるCSSにはベンダープレフィックスは（ほぼ）不要となっています。

なお、かつてベンダープレフィックスが必要だったけど（現在の最新のブラウザでは）不要になったプロパティの一覧はこちらです。

animation（Safariはまだ未対応：webkitで対応可）
border-image
border-radius
box-shadow
box-sizing
text-shadow
transform
transition
@keyframes（Safariはまだ未対応：webkitで対応可）

このように、一般的なCSSの記述ではベンダープレフィックスは必要なくなってきました。

なぜベンダープレフィックスが必要だったのか？

「どうせ実装するのに、なぜわざわざプレフィックスが必要だったの？」となりますが、あくまでもCSS3で「草案段階」のものを先行実装したため、万が一将来的に仕様変更がなされて「やっぱ採用しないわ」「こっちの名称にするわ」となってしまったときのリスクに備えるための手段として必要でした。

つまり、「あくまでも試験的な機能だ」「使いたきゃ自己責任で使え」というブラウザ側の対応です。

必要なベンダープレフィックスは「webkit」のみ！

一般的なCSSの記述ではベンダープレフィックスは必要なくなってきましたが、バージョンの古いスマートフォンの場合だと、ブラウザのバージョンも古いので「webkit」のベンダープレフィックスが必要なものもあります。

（AndroidのデフォルトブラウザもCoogleChromeも、iPhoneのSafariもwebkit系のHTMLレンダリングエンジンを使っているので「webkit」一つで対応できる）

雑に言うならば、パソコンのブラウザは自動的にバージョンアップしているのでベンダープレフィックスは不要で（IEはもう捨てる）、バージョンの古いスマホは「webkit」で対応できるので、必要なベンダープレフィックスは「webkit」くらいでその他のものはもはやつける必要はありません。

とりあえずベンダープレフィックス付けとく？

「とりあえずベンダープレフィックス付けとけばよくない？」「だってCSSファイルが少し重くなるくらいで別に変わらないじゃん」

ぐぬぬ・・・こう言われたら確かに！となりますが、既に不要なプロパティに「考えることなく」「判断することなく」ベンダープレフィックスを付けていくことはCSSのコーディング力の低下とCSSファイルのメンテナンス性の低下を招いてデメリットが大きくなるんじゃないか？と思います。

でも判断が面倒くさくない？

MDNのCSSリファレンスに掲載されているCSSプロパティを見れば、各ブラウザの対応状況が一目でわかるので、どれがベンダープレフィックスが必要でどれが不要かがわかります。

しかし、これが面倒くさい！何かいい方法がないだろうか？

Autoprefixerツールを使う

ほんと便利な世の中になったもので、「Autoprefixer CSS online」というツールを使えば自動で必要なプレフィックスを付けてくれます。

このツールは、現在の最新情報に基づいて不要なベンダープレフィックスを削除してくれ、逆に必要なベンダープレフィックスを追加してくれます。

使用方法

ではさっそく使ってみましょう。

「Autoprefixer CSS online」にアクセスして、サンプルとして載せられている赤枠のCSSを全て削除します。

そして削除した場所に対象のCSSをコピペします。

なお、ここでは下のCSSをコピペして不要なベンダープレフィックスは何か？逆に必要なものは何か？を見たいと思います。

.sample{
	position: relative;
	width: 300px;
	height: 100px;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;

	border-radius: 6px;
	border: 2px solid #999;
	-webkit-box-shadow: 1px 1px 5px #aaa;
	box-shadow: 1px 1px 5px #aaa;
	background-color: #fff;
	z-index: 1;
}

これをコピペすると、自動的に右側にベンダープレフィックスの要・不要が追加・削除されたCSSが出力されます。

その結果がこちらです。

.sample{
	position: relative;
	width: 300px;
	height: 100px;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;

	border-radius: 6px;
	border: 2px solid #999;
	-webkit-box-shadow: 1px 1px 5px #aaa;
	box-shadow: 1px 1px 5px #aaa;
	background-color: #fff;
	z-index: 1;
}

最初のCSSで記述していた、次のコードは削除されていることが分かります。

-moz-box-sizing: border-box;

逆に、「box-shadow」プロパティには

-webkit-box-shadow: 1px 1px 5px #aaa;

が追加されています。

予想外だったのが、

-o-box-sizing: border-box; -ms-box-sizing: border-box;

の2つが削除されなかったことです。

この原因は下の画像に示す通り、主要ブラウザの最新バージョンから4つ前までを守備範囲にいれているためかと思われます。