[CSS] -webkit-ってなに？

2021-02-18

CSSのコードの中に-webkit-という記載を見かけたことがある人もいると思います。

今回はそのwebkitについての説明を行なっていきます。

-webkit-とは？

webkitの記述は、ベンダープレフィックスと呼ばれCSS3で実装予定の機能をブラウザ各社が先行して実装した機能を各ブラウザで使えるようにしたものです。

.container { 
    -o-display: flex;
    -ms-display: flex;
    -moz-display: flex;
    -webkit-display: flex;
    display: flex;
}

各ブラウザベンダーの対応は以下の通り。

タイトルにもありましたが、webkitというのはベンダープレフィックスの中でもChromeやSafariに対応したものだったというわけです。

ベンダープレフィックスの書き方として、各プロパティの頭に-webkit-などを付けるというもの。

そして、ベンダープレフィックスなしも併せて記述します。最高に面倒臭いですね。

ただし、ブラウザは日々アップデートされているので、特にベンダープレフィックスの記述を必ずしなくてはいけないという流れではありません。

すでに実装されていたりするわけなので、なんでもベンダープレフィックスを付ければいいというわけではありません。

ブラウザの最新対応状況はこちらのサイトで把握できますので、必要があれば確認してみるといいでしょう。

しかし、それを差し引いてもかなり面倒な作業であることに変わりはないですね。

Autoprefixerという最新のベンダープレフィックスをキャッチアップし、必要なもののみを付与してくれるツールもあるので、こちらなどを導入した方が作業効率や保守効率は上がるでしょう。