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.
結果としては以下のものは識別子として不正になる。
- ハイフンとアンダースコア以外の記号を含むもの
- 数字で始まるもの
- ハイフン2つで始まるもの
- ハイフンに続いて数字で始まるもの
つまりフォント名を空白区切りでチェックして、どれかひとつでもこの不正なリストに該当した場合は引用符が必要になる。そして以下のような正規表現でチェックできるんじゃないかと思う。
var reIdentifier = /([\x21-\x2c\x2e\x2f\x3a-\x40\x5b-\x5e\x60\x7b-\x9f]|^([0-9]|-(-|[0-9])))/;
自分で書いたのに読めない。
でも実はこの部分を正確に仕様を読めているのかずっと自信がないので、間違ってたりしたら是非教えて欲しい。普段はとりあえず引用符で括っておく派でやり過ごしてきた。そういう人も多いと思うので、CSS圧縮ツールが仕様(と実装)通りにうまいことやってくれるのが良いかなと思う。