日記 | ヨモツネット

Google が WebFonts をホストする。Google Font API をつかっていれば様々な Web サイトから同一のリソースを参照することになるので閲覧者はローカルのキャッシュを使うことができ、ダウンロードの負荷を軽減することができる…はず。以下のように CSS を読み込めば利用可能。

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Tangerine">
<style>
body {
  font-family: 'Tangerine';
}
</style>

Font previewer

コメントはありません

Opera 10.50 が新たにサポートした CSS text ja 2010-03-02 http://www.yomotsu.net/wp/?p=560 CSS, Opera

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

CSS
Opera

2010年3月2日火曜日

本日 Opera 10.50 がリリースされました。~~Opera 10.05~~Opera 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

background-origin

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

background-clip

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

border-radius

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

e.g.

div {border-radius : 10px;}

demo

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

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 */
}

2件のコメントがあります

日記

Google I/O で気になった部分

WebM

Adobe Dreamweaver CS5 HTML5 Pack

Google App Engine for Business

Google Storage for Developers

Google Font API

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

Web サイト内検索

カテゴリー一覧

この Weblog の FEED