Firefox Nightly(32)でCSS Variablesを試してみた[CSS]

いつのまにか最終草案になっていたCSS Custom Properties for Cascading Variables Module Level 1(以下、CSS Variables)をFirefox Nightly(Firefox バージョン32)で試してみました。

CSS Variables in Firefox Nightlyの記事では、Firefox29で実装されたとありましたが、公開されたFirefox29ではCSS Variablesは対応していませんでした。Can I use...にも力強くNot supportedとなっています。Can I use...にもあるようにFirefox31からサポートされたようです。

CSS Variablesは、--*カスタムプロパティで変数を定義し、var()関数でその変数を指定します。

'--*'カスタムプロパティ

以前は、var-*という記述でしたが、--*に変更になっています。

:root {
  --main-background: #E0CB52;
}

var()関数

var()関数には特に変更はありません。

.class {
  background-color: var(--main-background);
}

下記のようにcalc()関数と一緒に使うこともできます。

.class {
  background-color: var(--main-background);
  --space: 20px;
  margin-top: calc(var(--space) + 10px);
}

セレクターは変数にできない

下記はCSS Variablesの仕様上不可です。セレクターは変数にできません。

Selector {
  --mt: margin-top;
  var(--mt): 20px;
}

変数の上書き

下記のようなHTMLがあった場合、対象要素の親要素に変数指定をしてやれば :root で指定した変数を上書きすることができます。

HTML

<div class="block">
CSS Variables Test
<!-- /.block --></div>


<div class="wrapper-block">
<div class="block">
CSS Variables Test
<!-- /.block --></div>
<!-- /.wrapper-block --></div>	

CSS

:root {
  --main-background: #E0CB52; /* 黄色っぽい色 */
}


.wrapper-block {
  --main-background: #52E052; /* 黄緑 */
}

.block {
  background-color: var(--main-background);
}

プレビュー

まとめ

現状、Firefox31以上のみがサポートで、今後のChromeにもサポートされるかどうかといったところでCSS Variablesを使えるようになるのかは当分先のようです。

Sassとかがあるので、主要ブラウザすべてでサポートされても使うのかどうか....