Firefoxの新しい版が8月18日に公開された。目玉機能が一つあるという内容ではなく、これまで制作側が工夫して回避してきた場面に、ブラウザ側の受け皿がいくつか用意されたという性格の更新になっている。派手さはないが、日々の作業で手計算していた部分が減るという意味では効いてくる。

Mozillaが開発者向けに出している変更点の一覧を見ると、CSSとJavaScriptの両方に追加があり、加えて既定では無効のまま入っている実験的な項目もある。実務で関係しそうなところを順に並べてみる。

要素が何番目かをCSSから直接取れる

sibling-index() と sibling-count() という関数が使えるようになった。前者は親要素の中でその要素が何番目かを整数で返し、後者は自分を含めた兄弟要素の総数を返す。番号は1から始まる点が、:nth-child() と同じ考え方になっている。

これまで、リストの並び順に応じて幅や表示の遅れを変えたい場合は、:nth-child() で一件ずつ書き並べるか、テンプレート側から順番を表す変数を各要素に埋め込むのが定番だった。sibling-index() は整数を返すので、calc() の中でそのまま計算に使える。animation-delay を sibling-index() 倍で指定しておけば、項目が増えても減っても順番にずれて現れる。

似た用途の関数に counter() があるが、こちらは文字列を返すため生成コンテンツ向きで、計算には向かない。項目数が運用の中で動く一覧やナビゲーションを抱えている案件では、テンプレート側の小細工を一つ減らせることになる。

書体によってばらつく行の上下を削る

text-box-trim と text-box-edge、そして両者をまとめて書ける text-box が入った。文字の高さは書体ファイルが持つ情報に左右されるため、同じ font-size を指定しても書体が違えば行の箱の高さが変わり、上下の余白が揃わない。この差を吸収するための指定になる。

text-box-trim では削る側を選ぶ。trim-start なら上、trim-end なら下、trim-both で両方、none なら削らない。どこまで削るかは text-box-edge で決める。上を大文字の高さに、下をベースラインに揃える指定にすれば、書体を差し替えても見出しの上下の見え方が安定する。

見出しとその下の本文の間隔を、余白の値を一つずつ詰めて調整していた箇所は多いはずだ。大きな文字を置くヒーロー部分やカードの見出しなど、書体依存で崩れやすいところから恩恵がある。MDNの表示では、この二つの機能はいずれも今年8月から広く使える段階に入ったと案内されている。

繰り返し処理まわりのJavaScriptの追加

イテレータに対して使えるメソッドが四つ増えた。includes() は指定した値が含まれるかを調べ、join() は取り出した要素を区切り文字でつないだ文字列を返す。どちらも配列の同名メソッドと同じ感覚で書けるので、覚え直すことはほとんどない。

chunks() と windows() は、要素をまとまりで取り出すためのものになる。chunks() は指定した個数ずつ連続した配列に区切り、windows() は一つずつずらしながら同じ長さの配列を返す。前者は表示を数件ずつに分けたいとき、後者は隣り合う値を比べたいときに向いている。手で添字を管理していた処理を短く書ける。

既定では切ってあるが用意された指定

設定画面から有効にすると試せる項目もある。接頭辞なしで書ける line-clamp、最小値と最大値の間のどのあたりかを数値として計算できる progress()、text-decoration-inset にパーセントで指定できるようになった件、CSSの値を文字列ではなく型付きのオブジェクトとして扱う仕組みなどが該当する。

このうち line-clamp は、MDNの説明では接頭辞なしの版はまだ広く使える状態ではなく、no-ellipsis と文字列の指定にも未対応とされている。従来の -webkit-line-clamp は表示形式の指定との組み合わせが仕様として定められており、今後も動く。行数で本文を切る処理を、今すぐ書き換える必要はない。

実験段階のものを除けば、並び順を返す関数も行の余白を削る指定も、主要ブラウザが揃った段階に来ている。とはいえ、企業サイトの訪問者には古い環境も混ざる。値が効かなくても崩れない書き方を選んでおけば、対応済みの環境から順に見え方が整っていく形になる。手元の案件で余白を目分量で詰めている箇所があるなら、置き換えの候補として頭の隅に置いておきたい。