Source Maps対応のCSS圧縮ツールであるCSSWringをようやくメジャー・リリースした。特に使い方は変わってない。内容的には圧縮力はそこそこ向上したけど、まだ「もうすこしがんばりましょう」程度。
ちょくちょくフロントエンド統合ツールに使われるようになってたりして、Source Mapsを吐くCSS圧縮ツールの需要はそこそこあるのかなと感じている。他のCSS圧縮ツールとは圧縮力で全敗みたいな感じなので、どこらへんに差があるのか調べて改善していきたい。
v1系に入ってから、以下のような点で圧縮力の向上に手を入れた。
font-weightプロパティーでnormalを400に、boldを700へ変換marginやborder-styleプロパティーなどでの省略font-familyプロパティーでの引用符の削除(と適切な追加)@font-faceルール内でデフォルトのままの定義の削除あとは#f00をredにするとかになるんだけど、茨の道っぽくてやりたくない……。やってることをサンプル付きでまとめるべきっぽいくらいには色々やるようになった。Wikiに書くかGitHub Pages作るか迷う。
良さそうな機会なのでfont-familyプロパティーの引用符の削除について少しだけ書く。このプロパティーの値は、フォント名が空白を含むと引用符が必要というわけじゃない。
Font family names must either be given quoted as strings, or unquoted as a sequence of one or more identifiers.
CSS Fonts Module Level 3の仕様(CSS 2.1から同じ)ではこのように定義されているので、一文字以上の識別子(identifiers)の連続ならば引用符は必要ないということになる。そしてその識別子は以下のように決められている。
In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit.
結果としては以下のものは識別子として不正になる。
つまりフォント名を空白区切りでチェックして、どれかひとつでもこの不正なリストに該当した場合は引用符が必要になる。そして以下のような正規表現でチェックできるんじゃないかと思う。
var reIdentifier = /([\x21-\x2c\x2e\x2f\x3a-\x40\x5b-\x5e\x60\x7b-\x9f]|^([0-9]|-(-|[0-9])))/;自分で書いたのに読めない。
でも実はこの部分を正確に仕様を読めているのかずっと自信がないので、間違ってたりしたら是非教えて欲しい。普段はとりあえず引用符で括っておく派でやり過ごしてきた。そういう人も多いと思うので、CSS圧縮ツールが仕様(と実装)通りにうまいことやってくれるのが良いかなと思う。