[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
関連記事
-
[jQuery] クリック時に波紋のような効果をつける
今回は、クリックした時に波紋のような効果をつけるjQueryプラグインの紹介です。 Ripple
-
[jQuery] フォーカスポイントを決めて、そこを中心に切り抜くプラグインFocusPoint
FocusPoint FocusPointは、レスポンシブにクロップ(切り抜き)するjQueryの
-
[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第4回]
完全に放置してました、僕です。 別に忘れていた訳じゃないんですが、時間がありませんでした。
-
[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第1回]
現在、このブログはENJIさんが作られたSTINGER3という無料のテーマを利用させて頂いて
-
[jQuery] Block Scrollプラグイン
今回は、ブロック毎にスクロールするjQueryプラグインのご紹介です。 Block Scroll
-
[jQuery]背景画像にぼかしを入れるプラグイン
Blurrプラグインの紹介 BlurrはシンプルなjQueryのプラグインです。 そして、背景画
-
[Dreamweaver] サイトタイトルを入力する枠を広げる!
デフォルトのままじゃ、狭い! DreamWeaverのタイトルを入力する枠があると思いますが、これ
-
[Dreamweaver] テンプレート機能を使う!初級〜中級編
まだまだある便利機能! 既に、上級編まで紹介してしまってますが、抜けていたので、すこし簡単です。
-
[jQuery] 360°回転させたり、マウスでシーンを移動するプラグイン
rollerblade-js Rollerbladeを使えば、Webサイトに360°回転させてプロ
-
[CSS] フォームや登録の進み具合をCSSだけで表現する方法
フォームや登録過程で、今どれくらい進んでいるのか利用者に対して表示する事はとても重要な事だと思います
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
別にいい加減な事をかいているつもりはありません。
全ての最新ブラウザで確認しています。
実際に、ベンダープレフィックスが入っていると、表示がおかしいブラウザもありました。