svg をまとめて圧縮したいとき

svg を illustrator から書き出しただけだと、けっこう無駄なタグがはいってるので最適化しておきたい。

jpg や png とかは Webサイトで一括でできるやつとかがあって、わりと手軽やけど、

• TinyPNG – Compress PNG images while preserving transparency
• Compressor.io - optimize and compress your images and photos
• Online Image Сompressor

svgをまとめてガッとやりたいときは svgo が便利。

github.com

svgo -f ../path/to/folder/with/svg/圧縮前 -o ../path/to/folder/with/svg/圧縮後

と打つと

Processing directory '/path/to/folder/with/svg/圧縮前':

xxxxx_xxx.svg:
Done in 113 ms!
0.629 KiB - 11.8% = 0.555 KiB

xxxxx_xxx.svg:
Done in 186 ms!
3.333 KiB - 13.6% = 2.881 KiB

xxxxxxx_icon.svg:
Done in 52 ms!
0.562 KiB - 0.7% = 0.558 KiB

xxxxx_xxxxx.svg:
Done in 80 ms!
8.046 KiB - 26% = 5.956 KiB

xx_xxxxxxx.svg:
Done in 44 ms!
0.833 KiB - 14.4% = 0.713 KiB

xxxxxxx_xxxxx.svg:
Done in 9 ms!
0.405 KiB - 1.7% = 0.398 KiB

となる

table が border-collapse で position: relative 使ってる td にホバーで背景色つけるとかすると、ボーダーが背景色より後ろにいってしまう

Firefox と IEでもあやしかったんですが、 table が border-collapse で position: relative 使ってる td にホバーで背景色つけるとかすると、ボーダーが背景色より後ろにいってしまう、というバグがありました。

position: relative; している td に background-clip: padding-box; をつけると回避できました。

td {
   position: relative;
   background-clip: padding-box;
}

参考：css - Borders not shown in Firefox with border-collapse on table, position: relative on tbody, or background-color on cell - Stack Overflow

gulp media queries まとめる系プラグインで @supports が消えてる件

かなり前に gulp-combine-media-queriesがエラーでコンパイルできなくなって、この issue から gulp-merge-media-queries に乗り換えてしばらく大丈夫だったのですが、とあるところを修正中に @supports が消えてることに気づきました。

いろいろ調べてたらけっこういろんなところで issue にあがっているけど解決されておらず。。

• https://github.com/konitter/gulp-combine-media-queries/issues/18
• https://github.com/frontendfriends/gulp-combine-mq/issues/7

比較的あたらしめの、gulp-group-css-media-queries をためしてみたら、@supports 消さずにメディアクエリをまとめてくれた、という報告です。

github.com