Mozillaは2026年8月18日、Firefox 154をリリースした。開発者向けリリースノートによると、このバージョンではCSSのsibling-count()関数とsibling-index()関数に加え、text-box-trimとtext-box-edgeの各プロパティ、両者をまとめて指定するtext-boxショートハンドが新たにサポートされた。

Firefoxの対応が加わったことで、これらの基本機能はChrome、Edge、Firefox、Safariの主要ブラウザーで利用できるようになった。

sibling-count()⁠：同じ親を持つ要素の総数を取得

sibling-count()は自身を含め、同じ親要素の直下にある要素の総数を整数で返す。たとえば、あるリスト要素に3個のli要素があれば、それぞれのli要素で返される値は3になる。

この整数はCSSの計算に利用できる。次の例では、コンテナーの幅を子要素の数で割った値を各要素に設定している。

<style>
  .items {
    display: flex;
  }

  .items > * {
    inline-size: calc(100% / sibling-count());
  }
</style>
<ul class="items">
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ul>

子要素の増減がレイアウトの計算に反映されるため、要素数に応じたクラス名をclass属性に追加したり、CSSカスタムプロパティに個数を設定したりする必要はない。

sibling-index()⁠：兄弟要素の中での位置を取得

sibling-index()は、同じ親を持つ要素の中で、対象要素が何番目にあるかを整数で返す。インデックスは0ではなく1から始まる。

次の例では、DOM上の並び順に応じてリスト項目のインライン方向の先頭側（左から右へ書く横書きでは左側）の余白を広げている。

<style>
  .items > li {
    margin-inline-start: calc(0.5rem * sibling-index());
  }
</style>
<ul class="items">
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ul>

:nth-child()が並び順を条件に要素を選択する疑似クラスであるのに対し、sibling-index()は並び順を数値としてプロパティの値に組み込める。余白や大きさのほか、アニメーションの遅延、回転角、色相などを要素ごとに変化させる用途にも使える。

text-box⁠：フォントの高さ情報を基準にテキスト周辺の余白を調整

text-boxは、フォントが持つ文字の高さや基準線の情報に合わせ、テキストを収めるボックスの先頭側と末尾側にある余分な空間を切り詰めるためのプロパティで、text-box-trimとtext-box-edgeを1つの宣言にまとめて指定できる。

text-box-trimは切り詰める側を、text-box-edgeは切り詰める位置の基準を指定する。

text-box-trimの値は、none、trim-start、trim-end、trim-bothの4つ。trim-startはブロック方向の先頭側、trim-endは末尾側、trim-bothは両側を対象にする。通常の横書きでは、先頭側が上、末尾側が下にあたる。初期値はnoneで、何も指定しなければ切り詰めは行われない。

text-box-edgeでは、textを先頭側と末尾側の両方に、capとexを先頭側に、alphabeticを末尾側に指定できる。これらの指定には、Chrome 133以降、Edge 133以降、Safari 18.2以降、Firefox 154以降が対応している。capは大文字の上端、exは小文字のxの上端、alphabeticは欧文などで文字をそろえる基準線（ベースライン）を示す。2つの値を並べた場合は、1つ目が先頭側、2つ目が末尾側の基準になる。初期値は厳密にはautoだが、既定の状態では先頭側と末尾側の両方でtextとして扱われる。

次の指定では、trim-bothで先頭側と末尾側の両方を切り詰め、cap alphabeticでそれぞれの基準を指定している。これにより、横書きでは、見出しのボックスの上端が大文字の上端、下端がベースラインにそろう。上下の余分な空間が取り除かれるため、文字と隣接する画像などを上下方向にそろえやすくなる。

h2 {
  text-box: trim-both cap alphabetic;
}

text-box-edgeのtextは、先頭側にtext-over、末尾側にtext-underと呼ばれる基準を使う。text-overはインラインボックス内で文字を収める範囲の上端、text-underは下端に対応する。仕様では、これらの基準は、フォントが持つアセント（ascent、ベースラインより上の高さ）とディセント（descent、ベースラインより下の深さ）に依存すると説明されている。

line-heightがアセントとディセントの合計より高い場合、その差の半分ずつが上側と下側に加えられる。それぞれの余白は、ハーフレディング（half-leading）と呼ばれる。text-box-edge: textでtext-box-trimを適用すると、この余白を含む行ボックスの上端・下端から、text-over・text-underまでが切り詰められる。

Firefox 154では、このほか、CJK向けのideographicとideographic-inkもサポートされた。これらを含むtext-box-edgeの各値は、W3CのCSS Working Groupが策定中のCSS Inline Layout Module Level 3で定義されている。

ideographicはCJK文字を配置する枠（仮想ボディ）の上下端を基準にする。ideographic-inkは、実際に表示されている文字ごとに上下端を決めるのではなく、フォントが持つ平均的な字面の上下端を基準にする。なお、この2つの値に対応しているのは現在のところFirefoxのみとなっている。