はじめに
あるCSSフレームワークのログイン画面を参考にしていると-webkit-というプレフィックスで始まるプロパティを見かけました。
このプロパティが一体何なのか知らなかったため、調べたことをまとめてみます。
この記事の対象者
-
-webkit-や-moz-といったプレフィックスについて知らない人 - これらのプレフィックスが付いているCSSプロパティについて理解を深めたい人
-webkit-や-moz-とは何者なのか
-webkit-や-moz-というプレフィックスはベンダープレフィックスと呼ばれるもので、ブラウザベンダーが試験的に草案（W3Cの勧告プロセスにおける第1段階）の機能を導入したり、独自の拡張機能を追加する際に使われるプレフィックスです。
実際には下記の4種類のベンダープレフィックスが存在し、各ブラウザ独自の機能を利用する場合はこれらのプレフィックスをつけることで利用できるようになります。
| プレフィックス | ブラウザ |
|---|---|
| -webkit- | 基本的にWebKitベースのブラウザーすべて（Chrome、Safariなど） |
| -moz- | Firefox |
| -o- | WebKit導入前の古いOpera |
| -ms- | IE、Edge |
ベンダープレフィックスの使い方
ベンダープレフィックス付きのプロパティを使う場合は、ベンダープレフィックスが付いていないプロパティも併用して記述します。
style.css
.centering {
-webkit-justify-content: center;
justify-content: center;
}
これはそのプロパティが草案から勧告候補（W3Cの勧告プロセスにおける第1段階から第3段階）になったときには外すことが推奨されているためです。
まとめ
-webkit-や-moz-といったプレフィックスはベンダープレフィックスと呼ばれる。- ベンダープレフィックスは試験的に草案の機能を導入したり、独自の拡張機能を追加する場合に使われる。
- ベンダープレフィックス付きのプロパティを使う場合は、ベンダープレフィックスなしのプロパティも併用する。
今回はベンダープレフィックスについて調べてみたことをまとめてみました。
それではまた。
TomoProg
参考
この記事は以下のサイトを参考にさせていただきました。
ベンダープレフィックス－CSSの基本
Vendor Prefix (ベンダー接頭辞) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN
W3C勧告とはなんぞ？Web標準化とW3Cにおける勧告プロセスについて | WEMO