#cssvariables

カスタムプロパティの接頭辞が変わった

以前は以下の様に、varを接頭辞としてカスタムプロパティを定義し、値として利用する際は、 var関数の中で接頭辞を除いたカスタムプロパティ名を指定していました。

/*css*/ :root { /* 定義 */ var-fontsize: 20px; } .medium { /* 利用 */ font-size: var(fontsize); /* 20px */ }

CodeGridの記事を書いてから、カスタムプロパティの定義・使用方法が変わり、 その接頭辞が var-* から --* に変更になっています。

/*css*/ :root { --fontsize: 20px; } .medium { font-size: var(--fontsize); } /* 20px */

接頭辞が変わっただけなので、記事で書いた振る舞い自体に変更はありませんでした。

カスタムプロパティの定義

定義したカスタムプロパティはそのスコープでのみ使用できます。

カスタムプロパティが存在しない場合の代替値

各プロパティの値にvar関数を使用した時、そのカスタムプロパティがない場合は、そのプロパティの初期値が適用されます。

ですが、var関数の第二引数には、第一引数に指定したカスタムプロパティがない場合の代替値を指定することができます。

　JavaScriptからカスタムプロパティを操作する

//javascript var root = document.querySelector(':root'); root.style.var.get('--font-size'); root.style.var.set('--font-size', '30px'); root.style.var.forEach(function(propValue, propName) { console.log(propName, propValue); });