CSSWG Seoul F2Fレポート──2014年5月のWeb標準化動向

矢倉眞隆

7年前

5月19日から5月21日の3日間、韓国でCSS Working GroupのFace to Face meetingが行われ、そちらにオブザーバーとして参加してきました。議題に上がったものから、いくつか取り上げてお届けします。

`calc()` のクセ、そのままに

CSS Values & Unitsモジュールには calc() 記法という機能があります。記法内で四則演算ができるほか、「左右のボーダー計10pxを除きあとは100％の幅」など単位の混在も可能です。

img {
  width: calc(100% - 10px)
}

ただ calc() については少しややこしいルールがあります。+ と - を使う場合、その記号前後に空白を入れないといけないのです。これが制作者にとって紛らわしいということで、文法を調整しないかという提案がでました。しかしながらベンダー接頭辞や attr() など、他の関数表記を組み合わせた際の処理が複雑になることが懸念され、変更されないことになりました。

`image()` が簡略化、複数の画像はおあずけ

CSS Image Valuesモジュールには image() という機能があります。中に複数の画像を指定可能で、対応されているものをブラウザに選ばせるものです。

#cosmetic {
  background-image: image( url("photo.webp"), url("photo.jpg") ) ;
  ...
}

また、画像がない際のフォールバックとして色を指定できます。これを応用すれば、色を画像化して背景画像として利用できたりもします。

#overlay {
  background-image:
    image(rgba(255, 255, 255, .5)),
    url("photo.jpg") ;
  ...
}

image() が提案された後に、Appleが提案したものが元になった image-set() が追加されました。デバイスのピクセル密度比に応じて画像を選択させる仕組みです。

これと image() の相性がよくないことが問題となりました。image() は中に指定した画像を「順に」選ぶのに対し、image-set() は指定された画像を「並列に」扱い最適なものを選びます。「フォールバック」といっても仕組みが違うため、2つを組み合わせた際にうまく動きません。

決定として、image() 単に画像から色にフォールバックするための仕組みに機能が省略されました。画像形式をふまえたフォールバックの仕組みはLevel 4以降で独立した仕組み（fallback() が案として出ていました）を検討するとのことです。

Font LoadingがLast Callに

Font Loadingモジュールでは、Webフォントを読み込んだかどうかを取得するAPIが定義されています。

// FontFaceを定義
var hxjp = new FontFace('hxjp', 'url("http://example.com/hxjp.woff")');

// フォントを読み込み、完了したらh1に適用
hxjp.load().then(function (font) {
  document.fonts.add(font);
  document.querySelector('h1').style.fontFamily = 'hxjp';
});

今回のミーティングではAPIが依存するECMAScript 6のPromisesの状況がどうなっているかといった軽い確認のみされ、Last Callとすることが決まりました。F2Fの終了翌日の22日に、Last Call Working Draftが公開されています。

Media QueriesのオブジェクトがEventTargetに

CSSOM Viewでは window.matchMedia() という関数で、指定したメディアクエリーにマッチするかを調べられます。

var mql = window.matchMedia('(screen and max-width: 360px)');
if (mql.matches) { console.log('せまいです。') }

window.matchMedia() は MediaQueryList オブジェクトを返しますが、これにイベントリスナーも設定できます。

var mql = window.matchMedia('(screen and max-width: 360px)');
mql.addListener(function (mqlist) {
  // mqlist.matches とか使ってマッチした際の処理を書いたり
});

これが普通のイベントとどう違うのという疑問が出され、MediaQueryList が EventTarget インターフェースを継承することが決まりました。これで addEventListener でリスナーを設定できます。またシンプルに書けるよう、onchange ハンドラも定義されます。

Shadow DOM関連セレクタの名前がいろいろ変更

Scopingモジュールは、HTMLのScoped StylesheetsやShadow DOMなど、スタイルシートの適用範囲が限定される機能について、その仕組みを定義するモジュールです。

今回のF2Fでは、Shadow DOM関連のセレクタがいくつか変更されました。プロジェクトされた後のDOMツリーを選択するセレクタはこれまで ::distributed、::content でしたが、一般的すぎることから変更の提案がありました。案としては ::projected、::light-contentが上がっています。これらを制作者に尋ね、最終的な名前を決定するそうです。

また、複数のShadow Rootをまたいだツリーを選択したい際に、/deep/ というセレクタが使われるのですが、このエイリアスとして >>> というものが定義されました。さらに、これまで空白で表されていた子孫セレクタとの一貫性を鑑み >> を子孫セレクタのエイリアスとすることも決まりました。

CSSOM Viewのsubpixel precision

CSSOM/CSSOM Viewの現状共有のセッションがありましたが、気になったのがSubpixel precisionです。これまでintを返していたものをdoubleにすることにより、アニメーションなどがスムーズになるといった効果が期待されています。最近ではWebKitで作業が進められ、ナイトリービルドで有効にされています。

しかし、過去にMozillaが有効にしたところ、後方互換性を崩してしまったという報告がありました。Subpixel precisionが有効になる場合は返り値が小数となるため、整数を期待していたこれまでのコードに影響があったそうです。Internet ExplorerでもIE9時代に同様の事が起こったため一部のプロパティを除き無効にされ、オプトインで有効にする仕組みにしたそうです。

議論では、既存のAPIに手を入れるよりは新しいボックス関連のAPIを定義した方がいいのではという意見もありました。

イニシャルキャップスのプロパティ

::first-letter 擬似クラスを使い、イニシャルキャップス（ドロップキャップス）を実現するテクニックがあります。しかしベースラインやcap-heightが揃わないといった問題があります。

適切なドロップキャップの例。「É」のベースラインと3行目のベースライン、そしてcap-heightと1行目のcap-heightが揃っている

適切なイニシャルキャップスをCSSに設けられないかという議論があり、initial-letter というプロパティがCSS Inlineに追加されました。initial-letter: 3 3 とすると、3行分の高さのドロップキャップスが、3行分落ちることになります。3 2 とすると3行分の高さですが2行しか落ちないため、頭がすこし出ちゃいます。

Latin言語圏以外のケースはどうなのだろうという議論が早速出ており、ちょうど帰りの飛行機の機内誌にドロップキャップスを使った例があったのでコメントしてみたりしました。

論理プロパティが追加

LTR/RTL混在環境などでUIをつくるとき、margin-left やmargin-top などのプロパティを使うと面倒です。また、Writing Modesなどでも面倒になるでしょう。

こうした「物理的」なプロパティではなく、direction/writing modeに沿って適切に変化する「論理的」なプロパティがあると都合がよいです。ブラウザではすでに margin-start といった論理プロパティを接頭辞付きで実装しており、UAスタイルシートなどで利用しています。

こうした背景もあり、論理プロパティは数年前にCSS WGのF2Fで話題に上がりましたが、border-*-top など物理プロパティがたくさんあり、それらに対し論理プロパティを再定義することなどに懸念が表明され、仕様に盛り込まれるのは見送られました。しかし、それ以降一部の論理プロパティが実装されたことから、仕様として盛り込まれることが決まりました。

ほかにもGrid LayoutのSubgridやFlexbox進捗、Footnoteのマークアップなど様々なトピックが話されています。そのうちまとめもCSS WGのブログに公開されると思います。

calc() のクセ、そのままに

image() が簡略化、複数の画像はおあずけ