CSSでカスタムプロパティが使えるようになってたようです #css #css3

CSSでカスタムプロパティが使えるようになってたようです #css #css3

SCSS(SASS)を使っている人ならわかると思いますが、変数を使う時、「$変数」ということをやっているはず。どうやらそれがcssで使えるようになっていたようです。

ただし、変数定義は「$」ではなく「–」(ハイフン2つ)になってるので要注意。もともとSASSやSCSSは独自に発展したものなので、どちらかというと、「–」定義のほうが主流になっていく可能性があるのでは……と思ってもみたり。

カスタムプロパティのvar

var自体には何の意味もありません。この部分に別途定義した変数が入る仕組みになっております。

varを使うときは

の2通りがあります。

varに対応しているブラウザしか相手しない場合は上が適当ですし、非対応も考慮するなら下という使い分けですかね。たぶん。

詳しいことはw3cのページにありますので読んでみるといいと思います。

ここではざっくりと。

カスタムプロパティの名前はわかりやすく

変数名になるので、あんまり適当につけるとあとでわかりにくくなります。ある程度規則性をもって付けたほうがきっと楽。

javascriptの連動を考えて

w3cのページを見てて気になったのが

For example, the following is a valid custom property:

–foo: if(x > 5) this.width = 10;

While this value is obviously useless as a variable, as it would be invalid in any normal property, it might be read and acted on by JavaScript.

の記述部分。

変数部分–fooの値が条件分岐と式になってるんですよね。
これは僕の知ってるcssではなかった表現です。cssでも条件分岐できるのかなと思いきや、下の部分説明に変数の値としては無意味だけど、javascriptで処理される可能性ありということが書いてあります。

ということは、あらかじめcssに書いておいた記述を利用してjavascriptを適宜利用するといった方向性がありうるわけです。

何でもかんでもjavascriptを使うのではなく、cssでできるところはcssで処理。それを補完する形のjavascriptというのが未来像なのかも。

119 views/total