infinity

無限大の値、infinityを使った絶対に崩壊しないカプセル型を書いたので忘備録です。

これまでカプセル型を保つためには、border-radius: 9999px;など大きな値を指定していたと思います。
ここで記述を以下のコードに書き換えます。

.button {
    border-radius: calc(1px / 0);
    /* 以下のものでもOK */
    border-radius: calc(infinity * 1px);
}

calc()関数内の算出値がinfinity+'px'になれば問題ないので上下どちらのコードでも大丈夫です。

これ以外にも使い道がないかなと考えていたのですが、外部ライブラリのz-indexに勝つために使うぐらいしか思いつかなかったです。
z-indexに入れるなら単位はいらないのでcalc(infinity) で大丈夫だと思います。確証はないので今度試します。