[HTML/CSS]ベンダープレフィックスでブラウザ間の差異をなくそう

CSSでは同じコードを、-moz-とか-webkit-とかを頭につけて何度も記述している場面があります。

これはブラウザ間の差異をなくすために必要な記述です。

InternetExploler(IE)やGoogle Chrome、Firefox、Operaなどでは当たり前ですが、同じ仕様で作られてるわけではありません。

正確には独自の拡張機能を実装したり、草案段階(明確に定まっていない段階)の仕様を先行実装したりしている場合に、その仕様が拡張機能であることを示すためにつける拡張子です。

ブラウザと拡張子の関係は以下のとおりです。

◇-moz-・・・Firefox

◇-webkit-・・・Google Chrome, Safari

◇-o-・・・Opera

◇-ms-・・・IE

 

ベンダープレフィックスは草案の機能につけることが推奨されているので、勧告候補(仕様案も固まってきたし、正規に実装してもいいんじゃないみたいな段階)になった場合は外すことが推奨されています。

なので上記の4パターンに加え、プレフィックスをつけないコードも記述しておいた方がいいです。

 

ブラウザとCSSの機能の対応関係が知りたい場合は、「Can I Use」というサイトで確認することができます。