LoginSignup
0
0

More than 3 years have passed since last update.

ベンダープレフィックについて IEじゃ使えないもの結構ある

Posted at

ベンダープレフィックス

CSS3で採用予定(草案段階)の機能を各ブラウザが先行的に実装し、その先行実装した機能を有効化させるために必要な各ブラウザ毎の「-moz-」や「-webkit-」という接頭辞のことをいいます

CSSのプロパティにはブラウザごとに異なるベンダープレフィックス(接頭辞)を記述するものがあります。こうすることで異なるブラウザ間でも正しく表示できるようになります。
(現在はブラウザの進化でベンダープレフィックスを必要とするプロパティも少なくなってきましたが)

なぜベンダープレフィックスが必要かというと、CSS3になり様々なプロパティの登場で各ブラウザが独自のアプローチで試験的に実装してきたという経緯があります。そのためブラウザ別にプロパティを区別するベンダープレフィックスをつけるようになりました。

基本不要なイメージ

最近のブラウザーではよく使われるCSS3のプロパティが実装可能ですので、ベンダープレフィックスを付ける必要はありませんが、中にはブラウザーでサポートされていないプロパティもあります。プロパティごとに草案段階なこともあるので、確認しつつつける

ここで確認した:https://caniuse.com/#search=rgb

*接頭辞とは:それ自身単独で発話されることがなく,常に語根や自立語 (または自立語に音形も意味も似た形態素 ) に前接して全体で一語を形成し,その語根や単語に語義的特徴ないしは文法的特徴を加える役割を果す言語形式をいう。「お-寺」「まん-中」

| 接頭辞 | 対応ブラウザー |
| -webkit- | Google Chrome、Safari |
| -moz- | Mozilla Firefox |
| -ms- | Microsoft Internet Explorer |
| -o- | Opera |

最後にはベンダープレフィックスが付かないプロパティを書く

必ずベンダープレフィックスが付かないプロパティを最後に書くようにしてください。

ブラウザのバージョンアップによりプロパティがサポートされた場合、ベンダープレフィックスが付いていると正しく表示されない場合があります。
それを避ける為に、 最後にベンダープレフィックスが付かないプロパティを記述する必要があります。

確認サイトで確認する

cssを入れるときには以下サイトなどで確認すると良い。
https://caniuse.com/#search=rgb

参考:https://designsupply-web.com/knowledgeside/3059/
https://ysklog.net/html_css/5492.html

0
0
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0