Own products

Tutorial

2012
09/12

【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じゃないので、むしろベンダープレフィックスをつけるとダメですよ

コメントを投稿する

Search

Memo log

»一覧を見る

Contact

Blog parts

Affiliate

Useful links

Dropboxデバイスを選ばないオンラインストレージ。
tenpu無広告のおしゃれなファイル転送サービス。
ギガファイル便大容量ファイル(25GB)にも対応の転送サービス。
aguse.jpURLからサーバやドメイン管理者などを取得。
SimilarWeb競合サイト解析ツール。
Google Web Fonts PreviewGoogle Fontsの全フォントを任意の文字で一覧化。
PageSpeed Insightsサイトの読み込み時間と問題箇所をスコア化。
Entity LookupHTML特殊文字を類似文字から逆引き出来るサービス。
PHP Live Regexpreg_matchのマッチング結果を出力。
10 Minute Mail時間延長可能なワンタイムメールサービス。
ご利用環境チェックツール自分のIP/HOST、OS、ブラウザ、解像度などを表示。
Akinator頭に浮かべた人物を当てる超能力サービス。

Tag list

About this

このブログはウェブデザインやプログラミングなどをはじめ、web制作者向けの様々な技術や情報を掲載しています。

Author

smkn

(1979 / 5.22 / ♂)

元・和太鼓奏者。
元・ドラマー。
現・フリーランスwebクリエイター。

東京都内にて「kiki verb」として、フルスタックフリーランスやってます。

ホームページ制作やwebサービス企画開発、WordPress構築からSEOまで、ご質問やご相談などお気軽にどぞ☆

Tools

HTML / CSS / JavaScript / jQuery / PHP / MySQL / WordPress / Photoshop / Illustrator / Sublime Text / EmEditor / Firefox / Google chrome / Thunderbird / XAMPP / FFFTP / WinSCP / Namery / DF / Devas / IcoFX / Dropbox / Color Dialog 003 / Bar code generator / Audacity / Janetter

Movatterモバイル変換