今さら聞けないベンダープレフィックスの使い方とWebkidの社名の由来

「ベンダープレフィックス（Vender Prefix）」とは、
CSS3の拡張機能を実装するために使用する識別子のことを言います。
草案段階（WD:Working Draft）のCSS3の仕様を先行して実装する時、次項で紹介する接頭辞をつけることによって、各ブラウザにおいてその機能を利用できるようにします。

-webkit- /* Chrome/Safari/iOS系ブラウザ */
-moz- /* Firefox */
-ms- /* Microsoft Edge/Internet Explorer */
-o- /* 古いOpera */ 

良く使用されるベンダープレフィックスは-o-を除く3つとなります。
ホームページ制作時にどのバージョンのどのブラウザまで対応するかによって、またブラウザがCSS3のどのプロパティまで対応しているかにもよって、記述の有無は変わります。

ベンダープレフィックスを記述する際に、気を付ける点は基本的には下記の2点となります。

①ベンダープレフィックスを付けたプロパティを先に記述し、通常のプロパティを最後に記述すること
ブラウザは最後に同じプロパティの場合、最後に記述されたものを優先する為、将来的にベンダープレフィックスが不要になった時の為に通常のプロパティを最後に記述します。

②プロパティが草案段階もしくはブラウザ対応に必要であること
プロパティが草案段階から勧告候補なった時点でベンダープレフィックスを外すことが推奨される為、記述の際には使用するプロパティが草案段階か否かを調べる必要があります。また、不要なベンダープレフィックスを記述するとコードが膨大になり管理・メンテナンスの際にも大変になります。

現在の最新ブラウザはCSS3の仕様をサポートしているものが多く、ベンダープレフィックスを必要とするプロパティは少なくなってきています。
しかし、古くから存在するホームページのメンテナンスをする際には、ブラウザの対応状況を確認しベンダープレフィックスを除く作業が必要となります。その際にベンダープレフェックスが必要なプロパティまで、ベンダープレフィックスを削除しないように注意が必要となります。
各ブラウザのプロパティ対応状況を確認するには「Can I use」というサイトを確認するのがいいと思います。プロパティを入力すると、各ブラウザ各バージョンの対応状況が確認できます。
また、プロパティが草案段階なのか勧告状況を確認するためには「CSS current work & how to participate」で確認できます。

以上がベンダープレフィックスの概要になりますが、最後に弊社Webkidの社名の由来について…

Webkidは、ベンダープレフィックスのようにクライアント企業様に寄り添う事で、その企業様の持つ“独自の機能”を拡張し、将来にかけて更なる発展のお手伝いをしたいという想いと、
Webの魅力に魅せられ、Webの可能性に常にワクワクし続ける“少年(Kid)のような心”を持ち続けたいとの想いを持ったメンバーによって創業された経緯を組み合わせて命名されました。

ちなみに命名の瞬間は某ファミリーレストランでの起業に向けたミーティング中でしたｗ

なお『Webkid』で検索すると高確率で『もしかして：webkit』と表示されますが、私たちはこちらのベンダープレフィックスとは一切関係ございません。
仮にCSSに-webkid-とマークアップしても何も意味がございませんのでWebkidファンの方はご注意ください。

では、また次回ネタを発見次第更新します？