Taken SPC

WebKit の trunk で独自 CSS プロパティ -webkit-transform などが動くようになりました (作業が入り始めたのは一週間ほど前あたりから)。この独自プロパティは何かというと、CSS でコンテンツを回転したり、傾けたり、拡大したり、縮小したり、といったことができるようになります。この 9 月に出た CSS3 basic box model 草案では rotation プロパティが載っており、Dave Hyatt (Apple 社) が transform プロパティを提案している旨もかかれています。

さて、-webkit-transform は以下のように指定できます。

p.rotate {
  -webkit-transform: translate(50%, 0) rotate(90deg);
  -webkit-transform-origin: 0 0;
}

上記の意味は、X 方向に 50% 移動させて、90 度回転させなさい (時計回り)。その変形の原点は対象となるボックスの (0, 0)。

以下は サンプルページ のスクリーンショットです。

Gecko でのスクリーンショットは以下。

各ボックスの配置は変換が適用される前のものを使っているようです。ですので、変形のかかったボックスが元のボックスから飛び出すことが多くなると思います。

-webkit-transform に指定できるのは、CSSParser.cpp 等をみると以下のようです。

先に挙げた Dave Hyatt の提案にある通り、SVG の transform 属性の構文に近いものになっています。

scale(x, y)/scaleX(x)/scaleY(y)

拡大縮小。x, y とも初期値は 1 で、取りうる値は実数。手元では scaleX と scaleY は動かなかった。

translate(x, y)/translateX(x)/translateY(y)

移動。X, Y とも単位つきの数を取って、初期値は 0。手元では translateX と translateY は動かなかった。

rotate(angle)

回転。angle は角度 (単位は deg 等)をとって初期値は 0。時計回りに回転。

skew(x, y)/skewX(x)/skewY(y)

傾け。x, y とも角度をとって、初期値は 0。時計回り。手元では skewX と skewY は動かなかった。

matrix(a, b, c, d, e,f )

変換行列。a から f までのパラメタは SVG の変換行列の場合と同じように扱われる、と思われる。手元では動かなかった。

-webkit-transform-origin の取る値は background-position と同じようです (初期値は 50%, 50%)。 -webkit-transform-origin-x や -webkit-transform-origin-y はそれぞれ、X 方向と Y 方向についてです。

まだバグもありますし、最終的な仕様がどうなるのかもまだわかりません。今後に注目したいところです。

最近は MDC で何もしていないのに等しい状況でしたが、久しぶりに Mozilla CSS Support chart を訳してみました。Mozilla の CSS 実装状況が表形式にまとめられています。

ただ、このページは MDC 内では孤立しているに近い (リンク元 が少ない) 状況です。Firefox 3 のドキュメント整備の時になんとかなるでしょうか。

MDC 外でこの形に近いリファレンスは

• Motohiko さんの CSS メモ
• Firefox まとめサイトの CSS ページ

だと思います。

CSS Nite公式ブログによると 10 月に行われる CSS Nite Vol.13 のゲストが Mozilla Japan の金井さんに決定したとのことです。そのころまでには Firefox 2.0 正式版がリリースされ、Firefox 3.0 Alpha 1 の足音も聞こえているでしょう。ということで、面白い話を聞くことができるのではないかと勝手に期待しています。

前回(Vol. 9)は180名での入場制限を超えた方には、アップルストア4Fのインターネットカフェにて、ストリーミングでご覧いただきましたということなので会場には早めに行った方がいいかもしれません(ただしこれは事前登録が不要ということからの連想であり、別の方法で入場制限をしているのかもしれません)。

HTML ソースから動作を分離するライブラリが注目を浴びていますが、Anne van Kesteren 氏の Weblog には Selectors API というのがありました。

HTML ソースから動作を分離するライブラリは我的春秋: 振る舞い分離 JavaScript ライブラリ一覧（編集途中）等を参照してください。

CSS のセレクタを指定すると該当する要素を取得できる、というものです。 最新の Selector API 草案 の例を引用すると

function resolver(str) {
  var prefixes = {
    xh:  "http://www.w3.org/1999/xhtml",
    svg: "http://www.w3.org/2000/svg"}
  return prefixes[str];
}
var a = document.matchAll("xh|div > svg|svg", resolver);
var b = document.match("div.foo.bar");

こんな感じです。document.matchAll は該当する全ての要素を返し、 document.match は該当する最初の要素を返します。名前空間を使う場合には DOM 3 XPath の XPathNSResolver をふたつ目の引数に指定します(例中の resolver)。使えるセレクタは CSS 3 Selectors になるようです。

素直に DOM3 XPath を使えば良い気もしますが、どうなのでしょうか。

digg 経由で CSS3.info。CSS3 のプレビューがあります。 いくつかのプレビューでは -moz や -webkit 等の接頭辞つきになっています。実装にあわせて古い草案を参照しているものもあります。例えば border-image は WebKit の実装にあわせて 古い草案を元にしています。

Firefox と Opera と Safari/WebKit を対象にしていますが、Konqueror でも box-sizing は動きます。

6 月 14 日追記 : CSS3.info の blog ができています。ってか一番最初のリンクが壊れていたのですね 。GIGAZINE にも記事があります。