css2.ブラウザによって表記が違う
ブラウザによってプロパティの頭に付ける ベンダープレフィックス(接頭辞) が違う?!、、だけじゃない!
>>>同じ値の複数表記の必要
-moz- >> Firefox
-webkit- >> Safari、Google Chrome
-o- >> Opera
-ms- >> Internet Explorer
例えば、
プロパティ border-image (画像ボーダーを指定する)では、
border-image: url("img/a.png") 15 round;
-moz-border-image: url("img/a.png") 15 round;
-webkit-border-image: url("img/a.png") 15 round;
-o-border-image: url("img/a.png") 15 round;
-ms-border-image: url("img/a.png") 15 round;
と、各ブラウザ向けの表記をする以外に、
現在、CSS3が審議中で仕様変更・一部機能の廃止・新機能の追加が行われる可能性があることから。
ベンダープレフィックス無しの指定も併記しておく。
すでに、一部がベンダープレフィックス無しで動作するようになっていたり、新しいブラウザではベンダープレフィックスが付いていると、逆に動作しなくなっている機能もあるため。
ただし、IEのシェアが大きい日本では、IE6~8ではほとんどのプロパティに対応していないため、
無効になってしまう。
>>>CSS3は使わないのが無難。
もしくは、IEでは表示されないことを前提に、別のデザインを指定する。
付記:IEで使えるプロパティ
IE6~9 >> CSS FontFace
IE8~9 >> Box Sizing, Display: table, Generated Content, DataURI
IE9 >> RGBA, HSLA, RGBA, Background Size, Multiple Backgrounds, Border Radius, Box Shadow, Opacity, CSS Transforms, , Media Queries
付記2:使えるIE6~9がないプロパティ(FIREFOX,OPERA,CHROMEでは使える)
Border Image, Text Shadow, CSS Animations, CSS Columns, CSS Gradients, CSS Transitions
>>>同じ値の複数表記の必要
-moz- >> Firefox
-webkit- >> Safari、Google Chrome
-o- >> Opera
-ms- >> Internet Explorer
例えば、
プロパティ border-image (画像ボーダーを指定する)では、
border-image: url("img/a.png") 15 round;
-moz-border-image: url("img/a.png") 15 round;
-webkit-border-image: url("img/a.png") 15 round;
-o-border-image: url("img/a.png") 15 round;
-ms-border-image: url("img/a.png") 15 round;
と、各ブラウザ向けの表記をする以外に、
現在、CSS3が審議中で仕様変更・一部機能の廃止・新機能の追加が行われる可能性があることから。
ベンダープレフィックス無しの指定も併記しておく。
すでに、一部がベンダープレフィックス無しで動作するようになっていたり、新しいブラウザではベンダープレフィックスが付いていると、逆に動作しなくなっている機能もあるため。
ただし、IEのシェアが大きい日本では、IE6~8ではほとんどのプロパティに対応していないため、
無効になってしまう。
>>>CSS3は使わないのが無難。
もしくは、IEでは表示されないことを前提に、別のデザインを指定する。
付記:IEで使えるプロパティ
IE6~9 >> CSS FontFace
IE8~9 >> Box Sizing, Display: table, Generated Content, DataURI
IE9 >> RGBA, HSLA, RGBA, Background Size, Multiple Backgrounds, Border Radius, Box Shadow, Opacity, CSS Transforms, , Media Queries
付記2:使えるIE6~9がないプロパティ(FIREFOX,OPERA,CHROMEでは使える)
Border Image, Text Shadow, CSS Animations, CSS Columns, CSS Gradients, CSS Transitions
- 関連記事
-
- css5.長さの単位
- css4.position
- css3.IEには使えない表記_背景色・背景画像
- css2.ブラウザによって表記が違う
- css1.プロパティ・セレクタ とIE
スポンサーサイト
trackback
プロフィール
Author:usagi
FC2ブログへようこそ!
information
2015.2.8_23:12
管理人のみ閲覧のコメントを下さるみなさまへ
管理ページを見ることを忘れがちな管理人は 返事が遅れがちになることが多いため、ご注意下さい。
お急ぎの返信が必要なかたはカギなしでお願いします。
また、URL を記載していただくと、たすかります。
管理人のみ閲覧のコメントを下さるみなさまへ
管理ページを見ることを忘れがちな管理人は 返事が遅れがちになることが多いため、ご注意下さい。
お急ぎの返信が必要なかたはカギなしでお願いします。
また、URL を記載していただくと、たすかります。
最新記事
最新コメント
カテゴリ ・