[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] Block Scrollプラグイン
今回は、ブロック毎にスクロールするjQueryプラグインのご紹介です。 Block Scroll
-
[jQuery]背景画像にぼかしを入れるプラグイン
Blurrプラグインの紹介 BlurrはシンプルなjQueryのプラグインです。 そして、背景画
-
[CSS] 今さらだけど、覚えておきたい疑似クラス・疑似要素
さて、前回は、CSSのセレクタをおさらいしました。 そして、属性セレクタを取り上げている記事も合わ
-
[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第2回]
忙しくて忘れてました。僕です。 さて、今回はもうちょっと見栄えもよくしたいなーなんて考
-
[CSS]印刷用CSSの設定方法
印刷用のCSSは、設定が簡単! 普通にサイトを作っていると、結構印刷用のCSSの設定もお願いされま
-
[jQuery] 実際の案件でよく使っていたプラグイン4選!
1.bxSlider bxSliderは、コンテンツスライダーのプラグインです。 使い勝手が非常
-
[jQuery] クリックしたところから波紋が広がるプラグイン!
Rippler 以前にも波紋のプラグインを紹介しましたが、今回も新たなプラグインを紹介しま
-
[jQuery] FlickerPlateを紹介します。
かっこいいプラグインで、フリックにも対応します。 Flickerplateは、シンプルでとても使い
-
[CSS] CSSで作るリストのアイコン
CSSだけでも色々出来る! CSS3が現在の最新ブラウザでは大体対応されてきてますので、色々な表現
-
[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第4回]
完全に放置してました、僕です。 別に忘れていた訳じゃないんですが、時間がありませんでした。
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
別にいい加減な事をかいているつもりはありません。
全ての最新ブラウザで確認しています。
実際に、ベンダープレフィックスが入っていると、表示がおかしいブラウザもありました。