CSSWring v4.2.2

CSSWringではfont-familyプロパティーでできうる限り引用符を削除しようとしている。逆に必要な場合は付けるようにもなっている。今までその値にvar()を使われることを想定していなかったため、var()が引用符で括られてしまうというバグがあったようだ。修正してv4.2.2をリリースした。

font-familyプロパティーの値で引用符が必要かどうかは簡単だが、誤解も多い。大まかにいえば識別子の連続のセットならば引用符はいらない。

.test {
  font-family: Helvetica, Arial, sans-serif;
}

識別子の連続とは、ASCIIの記号を除いたものと考えると近い。つまりカタカナや漢字が含まれていても引用符で括る必要はない。ただし数字やハイフン2つ、そしてハイフンに続いて数字では始めることはできないというような規則もある。

.test {
  font-family: ヒラギノ角ゴ ProN, ＭＳ Ｐゴシック, sans-serif;
}

識別子の連続のセットとは識別子の連続を空白文字で連結したものだ。つまりフォント名に空白があっても引用符で括る必要はない。また空白文字(改行やタブ文字も含まれる)は1つの半角空白文字にまとめられるので、フォント名と正確に同じでなくても良い。

.test {
  font-family:
    Lucida         Grande,
    Lucida
    Sans
    Unicode, sans-serif;
}

こう書いてもいいという話ではなく、こういったものをうまいこと処理するようになっているツールはいくつかある(CSSWringを含め)ので、安全のために常に引用符付きでフォント名を書いても最適化してくれるという話だ。仕様でも触れられているように引用符で括るようにするのが良く、こういったミスをしやすいところはツールに任せるのが無難だろう。

var()の大文字・小文字のパターンを考えている過程で開発者ツールのバグが見つかったりした。var()自体はCSS一般と同じで大文字・小文字を区別しないが、定義したカスタム・プロパティーでは区別するということを学んだ。つまりvAr(--foo)とは書け、--fooを参照できるが、var(-Foo)とは書くことができず、--fooを参照することはできない。

ついついCSS VariablesとかCSS変数とか書いてしまい、言ってしまうので、ちょくちょくCustom Propertiesとかカスタム・プロパティーと書いたり、言ったりするようにしたい。