Hatena::Groupweb

vantguarde

 | 

12.17

State of the Browsable Web 2009: CSS3 Backgrounds & Borders

| 01:06

昨年ぐらいから活発になってきた印象を受けるBackgrounds & Bordersですが、CRが公開されました。

追いかけてなかったので、さっぱりです。

というわけで調べたりしました。時間かかった…

box-shadow のドロップ

大きなものからいきましょう。「えっ」という変更ですが、そうなっちゃいました。

Resolved: Drop box-shadow from CSS Backgrounds and Borders Level 3: work on box-shadow outside the module for the time being, possibly re-merge with draft later. Rationale: drop-shadows seem to need a lot more discussion, but the rest of the draft is ready to move on.

Minutes and Resolutions 2009-09-30

とはいえ、10月のLC時点で無くなっていたんですけどね。

なんでドロップされたかですが、他の機能は安定してきてるけど、ドロップシャドウはまだいろいろ話す事があるのでとりあえず別に作業するというそんな理由になります。再統合の可能性も高そうな書き方をしているので

その「いろいろ」ですが、ひとつはborder-imageとの関わりになります。2月のTeleconで、box-shadowborder-imageで上書きされないという仕様が決まったんですが、Brad Kemperがそれに反対したんですね。

Bradは前々からデザイナーという立場から特にこのモジュールに対してコミットしてた人で、その経緯もあってかその後Invited ExpertとしてCSS WGのメンバーになり、またこの仕様のEditorになりました。すごいですねー

話は戻って、David Hyattがborder-imageをマスクにしてはどうかという提案をして、議論が発展していきます。

Rather than suppressing the shadow, what about using the border-image as a mask when deciding how to draw the shadow? In theory it should be possible to intelligently draw a more complex shadow for a border-image object.

Re: Minutes and Resolutions 2009-02-04: box-shadow and border-image

とはいえ、これは「ドロップシャドウ」ではないところが難しいところなんですよね。

議論は続きますが結論が出ない状態が続きます。別に border-shadow という新しいプロパティを設けてはどうかという提案があったりもしました。

とまあ、そんな経緯でとりあえずドロップと。消極的な感じはするんですが、確かに根深い問題です。

現在はBradによるドロップシャドウの提案に話題が移ってますが、このモジュールのスコープ外のような気がするので省略。

ドロップシャドウはSVGのフィルタをCSSから使えるようにするという話との絡みもあるので、興味がわいたらもうちょっと調べる事にします。

ぜえぜえ。

borderborder-image

border というショートハンドがありますが、border-image との関わりが定義されていませんでした。こちらは border から border-image を指定できるように拡張することを行わないことと、ただ border によって border-image がリセットされることが決定されました。

後者には注意しないといけないかもですね。

border-image のサブプロパティ

fantasaiがCSS3.infoでとったサーベイ結果をふまえて、border-image のサブプロパティが導入されました。border-image はショートハンドになります。

追加されたプロパティはborder-image-source, border-image-slice, border-image-width, border-image-outset, border-image-repeat の5つ。結構多い事とそれらの関連を説明する必要があったためか、LCからは独立したセクションになりました。

ちょっと調べてみましたが、サブプロパティの実装はまだ始まっていないようです。あ、それと、border-image の使い方が 「border-image を利用したボックスデザイン」にてとても分かり易くまとめられています。

とまあ、全然ステータスという感じではないですが、気になったものをまとめてみました。Background系にまったく触れてないというね。

 | 
Contact: @vant / lepetitcroissant@gmail.com.