U-BOX/うさぎの小箱

FC2ブログのテンプレートを配布しています

  1. スポンサー広告
  2. [ edit ]

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


  1. css
  2. tb: 0
  3. cm: 0
  4. [ edit ]

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


 


関連記事
スポンサーサイト



 管理者にだけ表示を許可する
 

trackback


プロフィール

usagi

Author:usagi
FC2ブログへようこそ!

information

2015.2.8_23:12
管理人のみ閲覧のコメントを下さるみなさまへ

管理ページを見ることを忘れがちな管理人は 返事が遅れがちになることが多いため、ご注意下さい。

お急ぎの返信が必要なかたはカギなしでお願いします。
また、URL を記載していただくと、たすかります。

カレンダー

04 | 2017/05 | 06
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31 - - -

ユーザータグ

* 



上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。