`grid-template-columns` CSSプロパティの値を動的に設定する

Question

例をあげてみましょう：https://jsfiddle.net/ilyamilosevic/7nxv8cof/。したがって、この例では、grid-template-columnsの値をrepeat(${n}, 1fr)に設定しています。ここで、nは列の数です。 devToolsをChromeで開いた後（Firefoxでは問題ありません）、前述のプロパティの値は実際にはn = 10の場合、ラコニックrepeat(10, 1fr)の長い代替（grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr）です。あなたはそれをニットピッキングと呼ぶことができますが、なぜそれが起こっているのか興味があります。

追加情報：

• のWindows。
• Chrome 57.0.2987.110 32ビット;
• Firefox 52.0.1 32ビット。

Answer 1

あなたは

setProperty
5.レッツ成分値のリストを参照してください仕様の手順を実行すると、プロパティプロパティのparsing値の結果です。

その後、

parsing
1.Letリスト値からparse a list of component valuesを呼び出すことによって返された値です。

次いで

繰り返しparse a list of component values
リストに（最終除く）戻り値を付加する、返されるまで。リストを返します。

ほとんどが

consume a component value
そうでなければ、現在の入力トークンは、<関数トークン>でconsume a function及びそれを返す場合。

、最終的に

consume a function
は、現在の入力トークンの値と同じ名前を持つ関数を作成し、最初は空のリストである値を有します。
が繰り返しトークン次の入力を消費し、次のように処理する：
<）-token >
リターン機能。
< EOFトークン>これは解析エラーです。関数を返します。 その他
現在の入力トークンを再確認します。コンポーネント値を消費し、戻り値を関数の値に追加します。

要するに、関数であれば実行され、その結果が割り当てられます。