Figiyama

たまにFigmaのBorderが消えることがあって疑問があった。
再現性が不明だったが、有力な仮説を思いついた。今のところこの現象として説明可能だと思われるため備忘録を残しておく。

Vocabulary

日本語では｢リセットCSS｣という表記を(体感ベースでは)よく見るが、当たった文献では英語だとthis global css reset is...や単純に-- styles are resetのように後置修飾されることも多かった。(Wikipedia.enの独立記事ではReset Style Sheet)
ページ内検索用に本記事では｢CSSリセット｣と記す。

そもそも全称セレクタではCascadedというよりすべてのセレクタに逐次適用しているのだから個別プロパティでの言及ではC抜きにするのが正しいのでは？ ボブは訝しんだ

CSS Border vs Figma Border

CSS

自分はCSSリセットとしてAndy Bell氏のA (more) Modern CSS Resetを使用している。

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

box-sizing の値はcontent-box(initial)/border-boxの二値を取る。
参考: box-sizing - CSS | MDN

CSSのbox sizing modelは歴史的にはcontent-boxがデフォルト(=initialとして設定されている)のだが、デファクトスタンダードとしてはborder-boxが採用されている。

余談だが、理由を調べてみると皮肉なことに、暴虐非道なIEの仕様がborder-box相当の振る舞いをしていたらしく、それが後年に標準化して運用されているらしい。実際、BootstrapのRebootやTailwindのPreflightといった各種フレームワークのCSSリセットでも採用されている。

端的に言えばCSS Borderは概ねborder-box;が適用されており、borderをwidth/heightに含む挙動を無意識に期待している。

なお、あまり意識しづらい箇所だが、borderの真下も一応background-colorは適用されているらしい。
border自体の色を半透明にしたり、pseudo要素を敢えて辺の長さより短く配置してinsetのうち任意の値2つを0として与えたり、dashのborderを与えればわかりやすい。
参考: background-clip - CSS | MDN

Figma

他方、Figmaでは線/位置: 内側が初期値だった。
であるならば、塗りによって描写される矩形の下側に線が入り込んでいるのでは? と推測した。

しかしながらこれは最も一般的なパターンに適用されない。何も考えずにFigmaで矩形のフレームを作り、塗りと線を与えてもその線自体は可視状態。
なんらかの条件付きで線が他の何かに遮蔽されている、と考えるのが妥当。

思い出してみると、この線が隠れる現象はそのフレームが子を持つ時に発生している。より正確に均すと、block/inline方向(もしくは両方)のpadding: 0;であるときに発生していた。

つまるところ、｢Figmaはboxの内部にborderを持ちたがる｣ことと｢子の要素が親の要素より上に描画される｣という2つの性質が、親のborderより子backgroundが上に来るという奇妙な現象を引き起こしていた。文字にすると余計ややこしいですね……。

Conclusion

線が消えた場合
子を持つ? -yes-> 子は塗りを持つ? -yes-> 線の位置を外側にすれば解決。

極めて遺憾ながらnoについて一切言及がないバカみたいな結論に至ることになった。

ただデザインを行なう場合、FigmaとCSSの対応関係の衝突については意識しづらい上、デザイントークン作成の段階では(variantで色を変更する場合など)、CSS側では省略できる塗りを、Figma側では明示化を兼ねて設定しておきたい箇所もある。
そのような場合にドツボにハマりやすく、レンダリング側の問題なのか不明瞭なケースも多いと感じたため、誰かにLong-tailのtailになればいいなと思って残しておきます。

余談ながら、こんなところでも小学生の頃に起きたブラウザ戦争の話が出てくるのが、自分たちは歴史の中に生きてるんだという奇妙な感慨に浸る機会を与えてくれました。韓国にInternet Explorerの墓があるらしいので今度旅行の際には墓参りに行ってみようと思います。
“He was a good tool to download other browsers”って言いますし、wingetが生まれた現在、Edgeよりも少なくとも偉い。