inline-css化でスタイルが反映されずハマった

2016年12月24日 16:28 html/css,javascript — littlepad

gulp-inline-css を利用して、CSS のインライン化をする際、一部のスタイルが HTML タグに反映されていないケースがあった。
結論としては、CSS に charset が指定してあると、その直後のスタイルが反映されないっぽい。

ちなみに私の場合、css の書き出しに gulp-sass を利用していたが、gulp-sass (というか node-sass)では、scss 内にマルチバイト文字含まれていると、charset が明示的に記述されていなくても自動的にふられる。
例えば、font-family にマルチバイトが含まれている場合、下記のようになる。

scss

html {
  font-family: $font-family-default;
  font-size: $font-size-default;
  line-height: $line-height-default;
  color: $color-text-default;
}

css

@charset "UTF-8";
html {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: #222; }

なので、node-sass を利用して書き出された css に charset が含まれている場合は、gulp-inline-css を実行する前に、charset を取り除くなどの処理が必要になる。

コメントはまだありません

No comments yet.

TrackBack URL

Leave a comment

about

ハンドルネーム:littlepad
都内で WEB 制作(デザイン, html/css, Flash, MT, WordPress etc)をしているBOØWY研究家

category:

search:


archives:

GO TO PAGETOP