Useful CSS ⌇ Baku Hashimoto

このページは半公開の庭先公開ページです。

:only-child CSS pseudo-class - CSS | MDNThe :only-child CSS pseudo-class represents an element without any siblings. This is the same as :first-child:last-child or :nth-child(1):n… developer.mozilla.org

p {
  --half-leading: calc((1lh - 1em) / 2);
  text-box-trim: trim-both;
}

:is(pre, figure) {
  & + & {
    ...
  }
}

Grid Lanes

CSS純正のメイソンリー。Safari 26.4〜。Chrome/Edgeはフラグ付き

.container {
  display: grid-lanes;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

列を定義すると縦のウォーターフォール、行を定義すると横のブリック。もう片方の軸は自動で詰める
トラック定義は普通のGridと同じ語彙（fr、minmax()、repeat(auto-fit, …)）。grid-column: span 2 で跨ぎ、grid-column: 3 で固定
flow-tolerance（既定1em）: レーンの高さ差がこれ以下なら同点扱いにして書字方向順に流す。見た目の順序とタブ順を揃えるため
DOM順は保たれる。spanや固定配置を使うと読み順とズレるので、リンクを含むとWCAG 2.4.3に引っかかりやすい。reading-flow / reading-order で対処する流れ
@supports (display: grid-lanes) で columns: 3 などにフォールバック

appearance: base-select — <select> を全部スタイリングできる。::picker-icon ::checkmark <selectedcontent>
width: stretch — margin込みで親を埋める。-webkit-fill-available の代替
:heading、revert-rule
transformに追従するanchor positioning
scroll anchoring（overflow-anchor）が既定でON
text-autospace の insert
<model src="x.usdz"> がiOS/macOSでも。dynamic-range-limit でHDR制御
Canvas/WebGLで srgb-linear display-p3-linear
ReadableStream の for await…of、ReadableStream.from()
Wasm JSPI
26.2〜 random() / random-item()