第34回 W3C CSS Module 仕様書もくもく会@東京

2018年10月27日著

10月26日、第34回 W3C CSS Module 仕様書もくもく会@東京に参加した覚え書き。前月はお休みだったので、2ヶ月ぶりでCSS仕様と真面目に向き合う機会となりました。今回のお題はCSS Backgrounds and Borders Module Level 3 （日本語訳）、割とよく使う部類の仕様だしちゃんと理解できるかな？　と思いきや、全然そんなことは無かったという。読み進めるほどに難解な箇所が増し、結果的には今回も消化不良＝わけわかめな記述多数。以下は、気になったところ：

勧告候補の期間中に取り下げられるかも、とされていたbox-shadow プロパティのアニメーション。これ、影が動くということは光源が動くという想定なのでしょうけど、想像しただけでちょっとゾッとしたというか、相当煩わしいのではないかなと。アクセシビリティ的にも。
要素を複数のボックスに分断する必要があるときは、 box-decoration-breakって、当初は全然どんな状況か想像できなかったのだけど、5.4. ボーダーと背景の断片化： box-decoration-break プロパティにあった図解を見て理解。
<uri> はおそらく <url> を指す。の「おそらく」というのが引っかかりました。いやそれはそうだろうな、と思いつつも、どういう意図から「おそらく」と書かれたのかなと。
層値という訳語、もっといい日本語訳が無いかと思い少し思案したものの、残念ながら思いつかず、敗北（謎
空（横幅または縦幅が 0 ）という表現が興味深いなと思いました。横幅または縦幅が0の画像って既に画像と呼べないのでは？と思ったけれど、理論上はそういう存在も仮定しなければソフトウェア的に不都合ということかしら。
高コントラスト表示モード下では，背景画像の表示が特別にオフにされることもあるというのは、なんとなく過去のIEを意図している風に感じたけど、ことWindowsに関してはEdgeで改善されてますよね（Building a more accessible web platform - Microsoft Edge Dev BlogMicrosoft Edge Dev Blog）。他のプラットフォーム/ブラウザは知らないけどオフにされる話は聞いたことが無い。
fixed による背景を（例えばハードウェア的な限界に因り）サポートしない UA は、キーワード fixed を伴う宣言を無視するべきなのは、それはそうだろうと思いつつ、制作者はハードウェア的な限界に差し障るかどうかを知る術が無いのでは無いだろうか......。
background-position: right 3em bottom 10pxというコードに対し［下端から 10px, 右端から 3em ］と順番が逆になっていたけど、そもそも原文が逆。一貫して時計回りの順で言及しているのかも？
一方の次元のみ auto 値の場合、画像の内在的縦横比と他方の次元のサイズを用いて解決されるが、それに失敗した場合は、 100% と見なされるの「失敗した場合」というのは、なぜ、どのように失敗し得るのだろう。
画像が内在的［横幅, 縦幅］いずれも持たない場合のサイズは、 contain と同様に決定されるとあるけど、内在的にサイズを持たない画像とは一体。（ [ 2018-10-30 追記 ] Slackの方で、具体的には幅と高さの指定がないSVGやグラデーションが相当するのでは、と教えていただきました。@GeckoTangさん、ありがとうございます。）
画像の縦幅が，指定値の 30% から -- ちょうど整数枚の画像が収まるように -- 33.3% に切り上げられる。のところ、background-repeatがbackground-sizeより優先されるなんてルールあったっけ？と思ったけど、その少し後でbackground-repeat が round の場合、 UA は更に，それらの次元において，上述による結果の画像サイズを次のように調整するものとするとあって、なんていうか、それ先に書いてよっていう。
3.11.2. キャンバスの背景と HTML<body>要素にある内容、言わんとしてることはわかるけど、正確性を期するとこうも難解な文章になるのだなという印象。
なんとなくそうだろうとは思ってたけど、点線を成す小丸の間隔や破線を成す各線分の間隔／長さを制御する手段は無いってキッパリ書いてあってスッキリ。略式プロパティ margin, padding と異なり、 border プロパティは、ボーダーの 4 辺それぞれに異なる値を設定できないも同様。
border 略式プロパティは、 border-image もその初期値に再設定する。したがって，作者には、【他は同じ優先度の】より前に現れているボーダー設定群を上書きする際に、他の略式プロパティや個々のプロパティでなく，この略式プロパティを用いることが推奨される。これにより，新たなスタイルが反映されるように border-image も再設定されるってあたりが、どうもショートハンドの使用を敬遠させるような。
CSS Working Group は、 border 略式プロパティを，CSS の将来レベルにおいても，他のすべての border-* プロパティを再設定するものと意図しているって、マジですか。仮に、グリフによるボーダーを許容する border-characters プロパティが導入されたなら， border 略式プロパティはそれも再設定することになるともあって、微妙にいたちごっこ感。作者は，ボーダーの再設定に border 略式プロパティを用いれば、将来にどの様なプロパティが導入されようとも， "白紙状態" に戻されることが保証されるというのは、一種の安心材料だろうけど。
border-*-radius プロパティの 2 個の値は，外縁のボーダー辺の隅形状（下の図式を見よ）を定義し、順に四分楕円の［横, 縦］半径 -- ボーダー半径 -- を定義する......これ最近CSS Border-Radius Can Do That? - 9elements - Mediumで話題になった件ね。

以下は、日常的にほとんど使ったことが無いが故に超新鮮だったものたち：

background-repeatのspace/round
background-attachmentのlocal
background-clip
background-origin
border-*-styleのhidden
border-image-slice
border-image-width
border-image-outset

以下は、完全に消化不良箇所：

"( a | b )" は、 a が指定されて［いれば a ／いなければ b ］
R が小さいときには，隅をより角張らせる -- すなわち，比率［ r ＝ R ÷ w ］が 1 より小さいときは， w に［ 1 − ( 1 − r )3 ］を乗算して調整する
ボーダーにおいて［色／スタイル］が遷移する区間は、［ボーダーの両半径, および内縁曲線の中心］を包含するような，最小の矩形に入るものとする（中心は、いずれかのボーダー半径が対応する border-*-width より小さい場合，パディング辺の隅に位置し得る）。
隣接する 2 隅の曲線は、重なり合ってはならない：隣接する 2 隅のボーダー半径の和がボーダーボックスのサイズを超過するときには、 UA は， 4 隅におけるボーダー半径の使用値を，そのどれもが重なり合わなくなるまで一様な倍率で減量するものとする。
border-*-radius プロパティは、別々のボーダーモード（ border-collapse に対する separate ）の下で，［ table ／ inline-table ／ table-cell ］ボックスにも適用される。 border-collapse が collapse にされている場合、 border-*-radius プロパティの効果はない。
拡幅が適用されたときにボックスの形状を維持するため、影の隅の半径は，ボーダー半径 R に拡幅距離 w を［外影に対しては加算／内影に対しては減算］した結果にする（加えて、結果が負なら， 0 に切り上げる）。ただし，外影において R が小さいとき -- 比率［ r ＝ R ÷ w ］が 1 より小さいとき -- には、丸まった隅から角張った隅への連続性を確保するため， w に［ 1 − ( 1 − r )3 ］を乗算する。
ボーダーの縮約モデル
外影は、ボーダーの縮約モデルにおける内部 table 要素には，効果がない。影がボーダーの縮約モデルにおいて［複数の太さを併せ持つ単独のボーダー辺］に定義された場合（例えば、［ある row のボーダーが他より太い table ］上の外影, あるいは［［ボーダーの太さがまちまちの，いくつかの cell ］を複数の row に渡って連接するような，table cell ］上の内影など）、その影の正確な位置や描画法は未定義である。

以下は、日本語訳そのものについての気づき：

各要素みたく「各」という文字のあとで空白を空けているらしい。これは読みやすさのためなんでしょうね。各種値というバリエーション？も目にしました。
ふと左下の「切替」が話題になり、「うわー気付かなかったー」ってなりました。ずっと「漢字主体」で読んでたものだから、今更変更する気にはならなかったけど。

[ 2018-10-30 追記 ] 訳者の方がこの記事をご覧になり、訳文を更新されていました（[css-backgrounds] 編集（明確化のための言い回しの改善／訳注など · triple-underscore/triple-underscore.github.io@04b4a33）。ありがとうございます。