calc(infinity)の使い道

CSSにおけるinfinityとは

CSSのcalc()関数で利用できる無限大(infinity)を扱う値です。

とは言っても至極当たり前ですがinfinityで文字通り無限大の大きさを描いたら大変なことになってしまうので各プロパティで上限はあります。

例えばwidthにcalc(infinity * 1px)を指定した要素の横幅をgetBoundingClientRect().widthで取得すると「33554428」となります。calc(infinity * 1em)でも同様の数値となるのでwidth height margin paddingなどの大きさの上限が33554428pxを超えることはありませんし、後述するz-indexも上限値である2147483647を超えることはありません。

実質的に各プロパティの上限値を取得する値だと考えても差し支えないと思います。

z-indexでのcalc(infinity)

最もcalc(infinity)が適しているのはz-indexでしょう。ただし「z-indexの値にcalc(infinity)を指定すると絶対に最前面に表示させることができます」といった記述がある文献がありますが、これは誤りです。

showModal()したdialog要素やpopover属性が付与された要素のような最上位レイヤーに位置する要素には勝つことができませんし、z-index:calc(infinity)の要素の親にスタッキングコンテキストが生成された場合はその中でイキることしかできませんからスタッキングコンテキスト外のz-index:1に負けます。

それ以外の条件下ならz-index:calc(infinity)の要素が最上位に来ますが、z-index:calc(infinity)の要素が複数存在する場合は後ろにあるz-index:calc(infinity)もしくはz-index:2147483647が勝ちます。

結局のところz-indexの管理自体は必須であり、z-indexの管理がしっかり行われていればz-index:calc(infinity)の必要性も失われるので、z-index:calc(infinity)がz-index管理の銀の弾丸になることはあり得ません。

ただし、「どうしても全面に出さなければいけない」要素には外部ライブラリのz-indexも考慮してz-index:calc(infinity)を指定するのはアリだと思います。具体的にはローディング画面だったりdialog要素を使わないモーダル画面などでしょうか。なんとなく!importantに似ている気がします。

border-radiusでのcalc(infinity * 1px)

他にinfinityが適していると言われるのは錠剤型のボタンなどでのborder-radiusに指定することです。

.button {
  border-radius: calc(infinity * 1px);
}

こう指定することでそのボタンがどんな横幅になっても、どんな縦幅になっても角丸を維持することが可能です。

ただし、常識的に考えてボタンの角丸がinfinityを背負わざるを得ないほどの大きさになるとは考えられませんし、やや過剰すぎる気がします。

また、従来の999emのような書き方のほうが記述量が少ないというのも忘れてはいけません。

遭遇したことはありませんが、メインビジュアルを錠剤型にするとかならborder-radius: calc(infinity * 1px);はアリかもしれません。

transition-delay or animation-delay でのcalc(infinity * 1s)

transition-delayおよびanimation-delayにcalc(infinity * 1s)を指定すると待機時間が約2.99615e+306分48秒となるため、実質的にtransitionおよびanimationの実行を無効化できます。

このテクニックが役立ちそうな場面でパッと思いついたのはinput要素の補完機能(オートコンプリート)にて入力欄の背景色が変わるのを無効化するといった場面でしょうか。補完機能時の背景色はUA側でbackground-colorに!importantが施されているため、上書きすることができません。

そこでtransition-delayにcalc(infinity * 1s)を指定することで実質的に背景色の変更を抑制することができます。

input:-webkit-autofill {
  transition-property: background-color;
  transition-delay: calc(infinity * 1s);
}

私は補完機能時の背景色は止めないほうがいいと思っているので自らこのような実装を行うことはありませんが、クライアントから止めて欲しいと要望があった際は役立つかもしれません。

それはそうとして †インフィニティ† って響きはすごく格好いいと思います。