[CSS] ベンダープレフィックスはどこまで必要か?
Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/1/juny/web/hidef/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524
各ブラウザが独自に先行実装しているCSS3
CSS3が現在、各ブラウザでも対応状況が進み、だいぶ使えるようになってきました。
といっても、どのブラウザも最新バージョンでのみと言っていいでしょう。
バージョンが落ちれば、対応状況も減るといった感じです。
独自実装している関係で、それぞれ独自のベンダープレフィックスというものを採用されています。
主要ブラウザのベンダープレフィックス
-moz- …… Firefox
-webkit- …… Google Chrome、Safari
-o- …… Opera
-ms- …… Internet Explorer
割と面倒なベンダープレフィックス
さて、ベンダープレフィックスを用いて先行実装されているCSS3を使用できるんですが、それはそれで面倒なんです。
ソースも増えますし、本当に必要かもわからない。
なので、現在どこまで実装が進んでいるか少し調べてみました。
※使用頻度の高い要素のみです。PCのブラウザのみの状況ですのでスマホは考慮してません。
※Android2.3は-webkit-が必要な要素が多いので、スマホサイトの場合、ベンダープレフィックスは使用してください。
※Operaは調べてません。
※IEのバージョンは、10です。
border-radius
角丸にするプロパティですが、現段階ではベンダープレフィックスは不要です。
全ての最新ブラウザで対応されています。
background-size
背景画像サイズを設定するプロパティです。
こちらも、最新ブラウザではベンダープレフィックスは不要です。
background-origin
背景画像をどこを基準にするかというプロパティです。
こちらも、Firefoxだけちょっと挙動が変ですが、不要な感じです。
心配なら-moz-のみつけるのもありです。
background-clip
背景画像の適用範囲を決めるプロパティです。
こちらも、ベンダープレフィックスは不要です。
ベンダープレフィックスを使用した場合、逆に変になる場合があります。
border-image
画像ボーダーを指定するプロパティです。
IEのみ対応しておりません。ベンダープレフィックスを使用してもIEは対応してません。
IE以外はベンダープレフィックスは不要です。
box-shadow
ボックスに影をつけるプロパティです。
現時点でベンダープレフィックスは不要です。
box-sizing
ボックスのサイズの算出方法を決めるプロパティです。
現時点でベンダープレフィックスは不要です。
columns
カラム幅とカラム数を指定するプロパティです。
IE10のみベンダープレフィックスが不要で、その他のブラウザは全て必要でした。
まとめ
実務に使えそうなプロパティのみを抜粋してますので、この他にもまだまだあります。
まだ、対象ブラウザが全て最新のみでいいという強気のクライアントさんはあまりいませんが、そろそろIEの8も対象から外れてくれるでしょう。
そうすると、CSS3を使ったサイトが存分に作れるようになるので、これまで不要なタグを使わざるを得なかった状況も少なくなると思います。
ad
関連記事
-
[CSS] CSSで作るリストのアイコン
CSSだけでも色々出来る! CSS3が現在の最新ブラウザでは大体対応されてきてますので、色々な表現
-
[Dreamweaver] 不要な_notesを作成させない方法
みなさん、_notesで困ってませんか? Dreamweaverは、デフォルト設定で使用していると
-
[CSS] メディアクエリ(Media Queries)を考える
Media Queriesとは Media Queriesとは、画面環境に応じてCSSの適用範囲を
-
[jQuery]背景画像にぼかしを入れるプラグイン
Blurrプラグインの紹介 BlurrはシンプルなjQueryのプラグインです。 そして、背景画
-
[CSS] 今さらだけど、必ず覚えておきたいCSSセレクタ
CSSセレクタとは? CSSセレクタを意識する事はあまりないと思いますが、今回はおさらいがてら、C
-
[HTML] 初心者を脱却するためのHTMLの心構え!
デザインを見たら、まずレイアウトの方法をイメージしよう 僕は、基本的にデザインを頂いたときに、すぐ
-
[javascript] Google Maps javaScript API v3の使い方(応用編:マーカーを変更する)
いろんなことが出来るようになったv3 昨日、基本編を書きましたが、今回は応用編です。 v3に
-
[jQuery] Block Scrollプラグイン
今回は、ブロック毎にスクロールするjQueryプラグインのご紹介です。 Block Scroll
-
[jQuery] 背景画像を画面いっぱいにするプラグイン
背景に、画像をいっぱいに広げて表示したいときってありますよね。 ちょうど、そういう必要があったため
-
[jQuery] 360°回転させたり、マウスでシーンを移動するプラグイン
rollerblade-js Rollerbladeを使えば、Webサイトに360°回転させてプロ
Comment
Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/1/juny/web/hidef/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524
noname より:
Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/1/juny/web/hidef/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524
いい加減なこと書かないで下さい
Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/1/juny/web/hidef/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524
hidef より:
Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/1/juny/web/hidef/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524
別にいい加減な事をかいているつもりはありません。
全ての最新ブラウザで確認しています。
実際に、ベンダープレフィックスが入っていると、表示がおかしいブラウザもありました。