ベンダープレフィックスをどこまで付けるか問題

概要

ベンダープレフィックスは先行的に使われている CSS3 のプロパティをレンダリングエンジンの異なる Web ブラウザで対応させるために CSS プロパティの手前に付ける接頭辞のことです。
例を挙げて見てみましょう。

.box {
  border: solid 1px #333;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}

border-radius はボックス要素の角を丸くする CSS プロパティです。
指定する値は半径として扱われます。

-webkit-border-radius の -webkit- は webkit のレンダリングエンジンを持つブラウザで対応します。 Safari をはじめとして多くの Web ブラウザに採用されています。
-moz- は Firefoxなどの Geckoエンジンで mozilla 拡張に対応し、-ms- は Internet Explorer、-o- はOperaに対応します。

Google Chrome は v.28 以降 webkit から Blink に移行しました。
Blink は webkit の流れを受け継いだものです。
Chrome 自体は先行的に最新のプロパティまで対応できるブラウザなのでベンダープレフィックス無しでほぼ効きます。

全部に対応しなきゃいけないの？

それぞれのブラウザはアップデートを繰り返し、ベンダープレフィックスが無くても正式に対応できるプロパティが順次増えています。
少なくとも以下のプロパティはもはやベンダープレフィックスが不要でしょう。

box-sizing
border-radius
text-shadow
box-shadow
opacity
background-size
transition

滅びたレンダリングエンジンがある

Operaは 2016 年 5 月 4 日に Presto から webkit へ移行しました。
つまり -o- はもはや不要。
頑なに独自仕様の EdgeHTML を貫いてきた Microsoft Edge も2020 年 1 月 15 日に Chromium ベースの Edge をリリースし、webkit に移行しました。
ということで -ms- も過去の遺産です。

webkit と moz だけ書いてればOK

iOS Safari も Android Browser も webkit で動いてるので命綱になることがしばしば。FireFoxの Gecko は Servo に切り替わりつつあるものの Chromium に歩み寄ろうとする気が無いので moz もあったらいいでしょう。

書くのが面倒臭い場合

Compass を使えるなら mixin を使う

Compass 環境で Sass を書く場合は mixin を書いて使うのが手っ取り早いです。以下の mixin を Sass に書くか partials に書いたファイルを入れてインポートします。

//ベンダープレフィックス付加
$set-prefix: '' , -webkit- , -moz-;
@mixin setvp($name, $value) {
  @each $prefix in $set-prefix {
    #{$prefix}#{$name}: $value;
  }
}

上の mixin は以下のように使います。

// mixin呼び出し
@import "partials/mixin";

// 実際に使う
.box {
  border: solid 1px #333;
  @include setvp(border-radius, 10px);
}

コンパイル後の CSS は以下のように出力されます。

.box {
  border: solid 1px #333;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

これでベンダープレフィックスを書くのが楽になるでしょう。
linear-gradient の方向指定などエンジンで書き方が若干変わるものにはご注意ください。