Hail2u

Edge 15でのcalc()をcalc()するカスタム・プロパティーのバグ

カスタム・プロパティーを使い倒すには、どうしてもcalc()したり、そのcalc()した値を使ってまたcalc()したりする。Sassで複数の変数を使って計算した結果を変数にするのと同じだ。しかしカスタム・プロパティーをサポートしたはずのEdge 15ではcalc()が値のカスタム・プロパティーを使ってcalc()を使ったカスタム・プロパティーがうまく解決されない。

Demo: calc() in calc() in custom properties

デモでは--fooを定義し、それを参照したcalc()--barを定義している。更に--bazではcalc()を使って--barを参照している。そのため--bazcalc(1rem * 2 * 2)と解釈されるはずだが、Edge 15ではそうならない。Firefox 53.0.3、Chrome 58、Mobile Safari 10.3.2では問題ない。

--fooを参照した1行目、--fooを使って計算された--barを参照した2行目は正しく描画されているが、更に--barを使って計算された--bazは不明なプロパティーとして無視されている
Edge 15での結果

仕様では循環参照は不正になるが、そうでないなら問題なく解決されるはずだ。calc()calc()を含むカスタム・プロパティーを扱う場合も特例はないように読める。Edge 15の挙動はバグだろう。EdgeHTML issue trackerに報告しておいた。


カスタム・プロパティーは計算結果を使って更に計算するケースで大いに役立つはずだ。このバグが修正されないとちょっと便利なDRYくらいにしか役に立たない。そこそこ役に立つという意味でもある。