ベンダープレフィックスって何だっけ？
「-webkit-transition: all 4s ease;」みたいに通常のCSS記述の頭に「-〇〇-」が付いているもののことをベンダープレフィックスって呼ぶよ
-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;あー、CSSでたまに見かけるやつか。で、ベンダープレフィックスって何だっけ？
え、えーっと、つまりベンダープレフィックスっていうのは、、（あわあわあわ）
…
（家帰って調べよ）
ということで今回は、今さら知らないとは言いづらい「ベンダープレフィックス」についてまとめてみました。
「ベンダープレフィックス」とかいうカタカナ言葉について
「ベンダープレフィックス」というカタカナ言葉について噛み砕いていきたい。
ベンダープレフィックスという単語を「ベンダー」「プレフィックス」に分けると以下のようになる。
| ベンダー | 提供元 |
| プレフィックス | 接頭語、接頭辞、文字列の先頭に付される特定の文字列 |
ベンダーという単語
ベンダー（vendor）という単語で連想しやすいのは自動販売機（vending machine）でしょうか。
あと、ベンダー（提供元）の反対語はユーザーです。
プレフィックスという単語
プレフィックスという単語は電話番号とかでよく使われています。
楽天でんわの先頭番号（プレフィックス）は、「0037-68-」です。
余談になるんですけど、楽天LINKとか通話アプリを使うと通話が無料になるときって、自動的に発信先の電話番号が「プレフィックス＋通常の番号」になっているそうですね。知らんかった。
ベンダープレフィックスという単語
| ベンダー | 提供元 |
| プレフィックス | 接頭語、接頭辞、文字列の先頭に付される特定の文字列 |
「ベンダー」「プレフィックス」の意味を合わせて考えるとベンダープレフィックスという単語は、ブラウザの提供元をCSSプロパティの頭に記述したものとなります。
-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;上記の場合、ブラウザーベンダー（ブラウザの提供元）は次の通りになっている。
| -webkit-transition: all 4s ease; | webkit |
| -moz-transition: all 4s ease; | mozilla |
| -ms-transition: all 4s ease; | Microsoft |
| -o-transition: all 4s ease; | Opera |
各ブラウザーベンダーが提供しているブラウザは次の通りとなっている。
| webkit | WebKit ベースのブラウザーすべて |
| mozilla | Firefox |
| Microsoft | Internet Explorer と Microsoft Edge |
| Opera | WebKit 導入前の古い Opera |
ベンダープレフィックスのこと、だんだん分かってきたぁ
でも何でこんなめんどくさい記述を書かなあかんわけ？
CSSプレフィックスの存在意義
CSSプレフィックスの記述。
-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;なぜこんなものが存在しているのか？
CSSプレフィックスはなぜ存在する？
ブラウザによって、またブラウザのバージョンによって、使えるCSSが異なる。ブラウザ環境によっては正常に機能しないCSSが存在する。
特定のブラウザ環境で機能しないCSSがある。じゃあ、そのCSSに関しては全てのブラウザ環境に適応させることはできないのか、、？
そんな問題を解決するために誕生したのが、CSSプレフィックス。
※ほぼ全てのブラウザ環境に対応させることが可能ですが、100%全ての環境にということではない。
CSSプレフィックスは過去の話になりつつある
このCSSプレフィックスという実験的な機能に、多くの開発者が手を焼いてきました。
そりゃそうです。いちいちベンダープレフィックスが必要かどうか調べるのは面倒だし、全てを把握するのは不可能に近いのですから。
そんなCSSプレフィックスですが、今となっては記述する必要はなくなりつつあるそうです。
ブラウザーベンダーは、実験的な機能にベンダー接頭辞をつけることをやめるようになってきています。
https://developer.mozilla.org/ja/docs/Glossary/Vendor_Prefix
たとえば先ほどのCSS5行は
-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease;次の1行だけで済むようになりました。
transition: all 4s ease;良い時代になりましたね〜
おまえ、そんなに詳しくないだろ
今回は、「ベンダープレフィックス」についてまとめてみました。
ベンダープレフィックスの記述が必要なくなってきたとはいえ、過去に制作したWEBサイトなどで見かけることはあると思います。
クライアントの意向や制作チームの方針を踏まえて、柔軟に対応していきたいところです。