Own products

  • 新規事業のアイディア創造機

Tutorial

【CSS 中級講座】CSS3の各種ベンダープレフィックスは未だ必要か調べてみた

この記事の読了時間：約5分4秒

  • このエントリーをはてなブックマークに追加

さてさて第３弾となる【CSS 中級講座】ですが、今回は個人的にメンドくさくて仕方ない「ベンダープレフィックス」について。

ちょくちょくみかける”-moz-”やら”-webkit-”ってヤツです。

これは、草案段階のCSS3プロパティなどに対して、各ブラウザ側で実験的に実装するために用意されたモノ。

実験的な状態から恒常的な実装となった場合、該当ブラウザのベンダープレフィックスは必要なくなりますが、それがいつ不要となったのか、なかなか調べる機会もありません。

っちゅーコトで、2012年9月12日現在、主要なCSS3プロパティのベンダープレフィックスが未だ必要なのかどうか、最新情報をいくつか調べてみましたよ！

CSS3の各種ベンダープレフィックス調査

CSS3プロパティは数あれど、今回調べたのは結構主要なトコだと思われる下記６つ。

調査対象のCSS3プロパティ

  • text-shadow
  • box-shadow
  • border-radius
  • opacity
  • transforms
  • gradient

なお「○」は「もうベンダープレフィックス要らないぉ☆」という印、「×」は「ベンダープレフィックスすら実装してないorz」、ベンダープレフィックスが書いてある場合は「まだまだプレフィックス要るです(´・ω・`)」という意味になります。

んでは、いってみよー♪

text-shadow

文字に影をつけるプロパティ。

次項の「box-shadow」とともに、CSS3の中でもトップクラスで効果が高い、使い勝手の良いプロパティですね。

IE
7		 IE
8		 IE
9		 Firefox
15		 Opera
12		 Safari
6		 Chrome
21		 iOS Safari
5		 Android Browser
4
× × × ○ ○ ○ ○ ○ ○

さすがIEちゃん独壇場ですねアハハ（棒）。

box-shadow

「text-shadow」が文字に対して影をつけるように、こちらは要素全体に対して影をつけるプロパティです。

宙に浮いたような感じの影や、光彩みたいなコトも出来ちゃいます。

IE
7		 IE
8		 IE
9		 Firefox
15		 Opera
12		 Safari
6		 Chrome
21		 iOS Safari
5		 Android Browser
4
× × ○ ○ ○ ○ ○ ○ -webkit-

おぉ!?まさかのIEちゃん、ちょっとだけ奮闘してる！

PCサイトであれば、現行ブラウザに限ればベンダープレフィックス無しでOKの模様。

border-radius

いわゆる「角丸」を表現するためのプロパティ。

これもデザインテイストによってはバリバリ活用したいプロパティですねー。

IE
7		 IE
8		 IE
9		 Firefox
15		 Opera
12		 Safari
6		 Chrome
21		 iOS Safari
5		 Android Browser
4
× × ○ ○ ○ ○ ○ ○ ○

かわいいよIEちゃんかわいいよ！

だが8以前、てめーらはダメだ。

opacity

該当要素全体の不透明度を設定できるプロパティです。

:hover疑似クラスなんかに使うと、非常にシャレオツ感があります。

IE
7		 IE
8		 IE
9		 Firefox
15		 Opera
12		 Safari
6		 Chrome
21		 iOS Safari
5		 Android Browser
4
× × ○ ○ ○ ○ ○ ○ ○

誰だ「IE爆発しろヽ(`Д´)ﾉ」とか抜かしてた奴は！

過去に縛られること無く、今を生きようぜ！そうだろIEちゃん！

transforms

該当要素に「傾き」を設定できる、初期CSSから考えたらかなりハイレベルなプロパティですね。

これも:hover疑似クラスなんかにチラッと使うと、途端にデキるヤツ風情。

IE
7		 IE
8		 IE
9		 Firefox
15		 Opera
12		 Safari
6		 Chrome
21		 iOS Safari
5		 Android Browser
4
× × -ms- -moz- -o- -webkit- -webkit- -webkit- -webkit-

ﾍﾞﾝﾀﾞｰﾌﾟﾚﾌｨｯｸｽ･ﾊﾘｹｰﾝ
独 自 拡 張 奔 放 乱 舞

gradient

背景にグラデーションを設定できるプロパティです。

これが使えれば、かなり画像使用の頻度も下がるかと思われるが。。。

IE
7		 IE
8		 IE
9		 Firefox
15		 Opera
12		 Safari
6		 Chrome
21		 iOS Safari
5		 Android Browser
4
× × × -moz- -o- -webkit- -webkit- -webkit- -webkit-

、、、なんだろう、この 全 滅 感 は。。。

なんとも尻切れトンボな調子でお届けしてみました。

とにもかくにも、各社ベンダープレフィックスなんかで自己主張するのは辞めて欲しいと、切に願っています（32歳 コーダー）

  • このエントリーをはてなブックマークに追加

関連する記事

同じカテゴリーの記事

コメント一覧

2 Responses to [【CSS 中級講座】CSS3の各種ベンダープレフィックスは未だ必要か調べてみた]

匿名 より：

2012/12/25 11:32 PM

text-shadowはCSS3じゃないので、むしろベンダープレフィックスをつけるとダメですよ

コメントを投稿する

お名前

ご連絡先メールアドレス※非公開

コメント

CAPTCHA


  • このブログのRSSを購読する
  • このブログをtwitterでつぶやく
  • このブログをFacebookで共有する
  • このブログをはてなブックマークで共有する

Contact

    お名前※必須

    ご連絡先メールアドレス

    お問い合わせ内容※必須


    Blog parts

    Affiliate