CSS変数、Firefoxナイトリーに登場

Mozilla Hacksに掲載された記事「CSS Variables in Firefox Nightly」が、Firefoxの最新開発版となる「Firefox Nightly」において「CSS Variables」を実装したことを伝えた。いわゆる「CSS Variables」は現在策定が進められている「CSS Custom Properties for Cascading Variables Module Level 1」を指している。CSS Variablesの導入は大規模なCSSファイルのメンテナンス性を引き上げる目的があるとされている。

CSS Variablesの使い方は同記事に掲載されている次のサンプルがわかりやすい。

:root {
  var-companyblue: #369;
  var-lighterblue: powderblue;
  var-largemargin: 20px;  
  var-smallmargin: calc(var(largemargin) / 2);
  var-borderstyle: 5px solid #000;
  var-headersize: 24px;
}
.partnerbadge {
  var-companyblue: #036;
  var-lighterblue: #369;
  var-headersize: calc(var(headersize)/2);
  transition: 0.5s;
}

@media (max-width: 400px) {
  .partnerbadge {
     var-borderstyle: none;  
     background: #eee;
  }
}

/* Applying the variables */
body {font-family: 'open sans', sans-serif;}

h1 {
  color: var(companyblue);
  margin: var(largemargin) 0;
  font-size: var(headersize);
}
h2 {
  color: var(lighterblue);
  margin: var(smallmargin) 0;
  font-size: calc(var(headersize) - 5px);
}

.partnerbadge {
  padding: var(smallmargin) 10px;
  border: var(borderstyle);
}

var-のプレフィックスが指定されたプロパティがカスタムプロパティになっており、var()でカスタムプロパティの値を展開できる仕組み。任意の名前で値にアクセスできるようになることで、より一貫性のあるメンテナンスしやすいCSSを記述しやすくなる。また、calc()を使うことで演算も実施できるようになっている。