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

過去において、ブラウザ間では以下のような状況がありました: CSSプロパティが仕様として正式に登場する前に、 ブラウザがその試験的なバージョンを実装する際、 ベンダープレフィックスと呼ばれる特別な接頭辞を付けて提供していました。

例として、 box-sizing プロパティを見てみましょう:

cssp {
  box-sizing: border-box;
}

このプロパティはFirefox29から正式にサポートされましたが、 実はFirefox2の頃から-mozというプレフィックスを付けて利用可能でした:

cssp {
  -moz-box-sizing: border-box;
}

他のブラウザも同様の接頭辞を持っていました: -moz - Mozilla Firefox、-webkit - WebkitおよびBlinkエンジンを使用するブラウザ、-o - PrestoエンジンのOpera、-ms - Internet Explorer。

したがって、ベンダープレフィックスを使用した場合の box-sizingプロパティの最もクロスブラウザな記述は、 おおよそ以下のようになっていました:

cssp {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

現在、ブラウザはプレフィックスの不便さを理由に、 その使用を廃止する方向に進んでいます。 今では、これらに代わってフラグと呼ばれるものが使用されています。 プロパティはブラウザに実装されますが、デフォルトでは無効になっており、 設定で対応するチェックボックスをオンにすることで有効にできます。 これは、開発者が新しいプロパティが正式に登場する前に試す機会を 提供するための仕組みです。