Opera 10.50 が新たにサポートした CSS

2010年3月2日 火曜日

本日 Opera 10.50 がリリースされました。Opera 10.05Opera 10.50 では新たに CSS 3 の一部をサポートしています。ちなみにオートアップデートはないらしいです。

Multiple backgrounds

Multiple background images : ひとつの要素に対して background-image の値を複数適用できる。

e.g.

div {background:url(bg1.png) no-repeat 0 0, url(bg2) repeat-x 0 100% ;}

demo

see also : 3.1. Layering multiple background images

background-origin

背景の開始位置を変更できる。 border から、 padding から、 content からのいずれかから始めることができる。padding-box | border-box | content-box

see also : 3.8. The ‘background-origin’ property

background-clip

背景で塗りつぶす領域を変更できる。padding のエッジからまたは border のエッジからのどちらかを選択できる。 padding-box | border-box

see also : 3.7. The ‘background-clip’ property

border-radius

角丸のためのプロパティー。Opera 10.50 では接頭辞は必要ない。Mozilla と Webkit でも既に実装済み。

e.g.

div {border-radius : 10px;}

demo

see also : 4.4. The ‘border-radius’ properties

border-image

要素の枠線に画像を適用できる。Adobe Fireworks の 9 スライスのような仕組み。strach |ﾂꀀrepeat |ﾂꀀround に対応。Opera 10.50 では接頭辞は必要ない。Webkit でも既に実装済み。

e.g.

div {border-image : url(border.png) 20 20 20 20 round; }

demo

see also : 5. Border Images

box-shadow

要素にドロップシャドウの効果を与えるプロパティー。Opera 10.50 では接頭辞は必要ない。Mozilla と Webkit でも既に実装済み。ただし、box-shadow プロパティーは border-image プロパティーと矛盾が生じるため現在は CSS 3 の草案からなくなっている。

e.g.

div {box-shadow : 10px 10px 20px #000;}

demo

transform (-o-transform として)

要素を移動、拡大縮小、回転、傾かせるプロパティー。接頭辞として -o- が必要。matrix() |ﾂꀀtranslate() |ﾂꀀscale() |ﾂꀀrotate() |ﾂꀀskew() に対応。Mozilla と Webkit でも既に実装済み。

e.g.

div {-o-transform : rotate(45deg);}

demo

see also : CSS 2D Transforms Module Level 3

transition (-o-transition として)

要素の状態が変化したときにアニメーションで遷移させるプロパティー。接頭辞として -o- が必要。ease |ﾂꀀlinear |ﾂꀀease-in |ﾂꀀease-out |ﾂꀀease-in-out に対応。バグなのか :forcus には効かない。Webkit でも既に実装済み。

e.g.

div {-o-transition : background 1s ease;}
div:hover {background:blue;}

demo

CSS Transitions Module Level 3

あと、待望の <video>, <audio> もサポートするようです。Opera 10.50 が対応する形式は Ogg のみです。

また、Opera 10 (Presto 2.2 rendering engin) までのバージョンでは既に次の規則やプロパティー、値などに対応しています。

• Media queries 規則
• @font-face 規則 (Web Fonts)
• color プロパティーの値に RGBA/HSLA 指定と透明度
• CSS 3 のセレクター
• background-size プロパティー (-o-background-size として)
• text-overflow プロパティー
• overflow-x/overflow-y プロパティー

ここで紹介したように Opera 10.50 が新たに実装するプロパティーの多くは接頭辞を必要としません。そのため、ベンダー接頭辞をつけたプロパティー (-moz-border-radius など) と同時に接頭辞をつけないプロパティー (border-radius など) を書いていた人は恩恵がありそうです。

ちなみに次期 IE でも border-radius プロパティーを実装しそうな様子です。こういった未知の実装のことも考え、新たに登場するプロパティーを利用するときには -ms-、-o- など、各ベンダー接頭辞をつけたプロパティーを同時に書いておくと将来いいことがあるかもしれません。

e.g.

div{
	        border-radius : 10px;
	    -ms-border-radius : 10px; /* IE */
	     -o-border-radius : 10px; /* Opera なくてもいいけどつけてある */
	   -moz-border-radius : 10px; /* Fx */
	-webkit-border-radius : 10px; /* Webkit */
}