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

[CSS] ベンダープレフィックスはどこまで必要か?

公開日: : CSS, Web制作 ,


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°回転させてプロ

記事を読む

ad

Comment


  1. 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

      別にいい加減な事をかいているつもりはありません。
      全ての最新ブラウザで確認しています。
      実際に、ベンダープレフィックスが入っていると、表示がおかしいブラウザもありました。

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ad

[PHP] curl転送してみる(googleに)

curlでgoogle画像検索APIにアクセスしてみます。 cu

[PHP] PDOでMySQLの接続確認をする

PDO PHPでMySQLに接続する際には、mysql_connec

[PHP] ランダムな英数字を生成する

便利系メソッド 今回はPHPでランダムな英数字を作成してみます。

[Swift] プロパティリスト(plist)の値を取得

plistからデータを取得してみます。 こちらのエントリーも参考にし

[Swift] Asset Catalogについて

XCode5から追加されたAsset Catalog。 いままで標準

→もっと見る

  • 1978年の七夕生まれ。 25才でweb業界の門を叩き、28才でフリーランスに。 現在は、フリーランスでマークアップ中心に、wordpressのカスタマイズやデザインをしております。 また、iPhoneアプリの開発もしております。

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
PAGE TOP ↑

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