【WEB】CSS3の対応状況

個人的によく使う、あるいは今後、積極的に使っていきたいCSS3のプロパティにおいて、


そろそろ実装されてるんじゃない?
さすがにもうプレフィックスいらないでしょ?


と思うものを調べた記録です。
基本的につけるものと言ったら「-webkit-」と「-moz-」くらいかと思いますが、それでも書かなくて済むなら書きたくないのが人情ってもんです。特にgradientとかカオスです。
オペラとIE? 知らない子ですね……
IE8以前とオペラミニは調べるまでもなくほぼ100%使えません。無視に限ります。

参考にしたのはみんな大好き「Can I Use...」さんです。

border-radius


20150709_radius
トップバッターはradius。問題ないですね。
プレフィックスなしで対応されています。

.hoge{
	border-radius: 5px;
}

box-shadow

20150709_bshadow
こちらも問題ありませんね。
IE8以前に対応する場合、filterというIE独自プロパティが存在します。ただ子要素にも影響するので、該当の要素にposition:relativeをつけてやり過ごしましょう。

.hoge{
	box-shadow: 5px 5px 5px #000;
}

text-shadow

20150709_tshadow
IE9が未実装です。
使うときは、プレフィックスなしで問題ないです。

.hoge{
	text-shadow: 1px 1px 5px #000;
}

linear-gradient

20150709_gradient
これもIE9が未実装。
Androidが微妙なので、一応プレフィックス入れた方が無難でしょうか。
で、画像だと見づらいんですけど、Notesの3つめ。

Firefox 10+, Opera 11.6+, Chrome 26+ and IE10+ also support the new "to (side)" syntax.


方向の前に「to」が入ります。
抜けてる解説サイトもあり、それだと使えませんのでご注意を。

.hoge{
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
	background: linear-gradient(to bottom,#fff,#ccc);
}

transition

20150709_transition
グラデーションと同じ実装状況です。
個人的にはアクセント程度の実装ならどんどん使えばいいと思ってます。

.hoge{
	background-color: #f00;
	-webkit-transition: background-color 1s linear;
	transition: background-color 1s linear;
}
.hoge:hover{
	background-color: #faa;
}

FlexBox

20150709_flexbox
実装状況だけを見ると優秀ですが、このプロパティは過去に二度ほど大きな仕様変更があり、わりとカオスになっています。
順に並べると、box仕様(古いandroid)、flexbox仕様(IE10のみ)、flex仕様となります。

/* 親要素のみ */
.hoge{
	display:-webkit-box;/* android */
	display:-ms-flexbox; /* IE10 */
	display:-webkit-flex; /* Safari */
	display:flex;
}


Multiple backgrounds

20150709_multiplebg
意外にも問題ありません。
背景の複数指定ができればコードがすっきりして助かりますね。

.hoge{
	background: url(img_url) no-repeat 0 0 , url(img_url02) no-repeat 100% 100%;
}


------------------------------


IE8での見た目を保証しないなら、だいぶ取り入れやすい環境が整ってきてると感じますね!
私は趣味範囲ではIE8完全切りなので、問題なさそうです・笑
悩ましいのはIE9ですが、一部プロパティを対応させるjsなどもありますので、希望に沿ったものを探せばいいかなと。
デザインだけの問題なら、思い切って切り捨ててしまうのも手だと思います。
(ディレクター&アクセス解析と要相談)

コメントを投稿する

メールアドレスが公開されることはありません。