CSSをYUI Compressorで圧縮したらMedia Queriesが動かなくなった


By geirarne (CC BY-NC-SA 2.0)

YUI Compressorを使ってCSS3 Media Qureriesの入ったCSSを圧縮したらうまく動かなくなった。なにかと思って調べてみたら、どうやらYUI Compressor 2.4.2の問題らしいです。最新版を使えば問題なさそうですが、まだ古いバージョンを使っている方はお気をつけください。

Media Queriesの以下のスペースが取られてしまうために起こるエラーだそうです。

@media only screen and (max-width:320px) {
  h1 {font-size: 108%;}
}

圧縮の際に、上記CSSから次のように「and」と「(max-device)」の間のスペースが取られてしまうために、問題が起こります：

@media only screen and(max-width:320px){h1{font-size:108%;}}

このエラーが出た環境

Media Queriesのスペースが取られてしまうバグが発生した環境は以下の通りです。たぶん、YUI Compressor以外は関係ないと思いますが、念のために記録しておきます。

  • YUI Compressor 2.4.2
  • YUI Compressor GUI 1.1.0
    ※ちなみに、個人的にはGUIのほうが好きなので、これ結構便利です。
  • Windows7 64-bit版

解決策

YUI Compressor 2.4.6をダウンロード。これで当面は問題なさそうです。

最後に

レスポンシブ・ウェブやらサイト最適化やら、いろいろ新しいことを始めると、細かいところで、いろいろなハードルがありますね。こういうのを解決していくのも楽しいわけですけど。。。

ちょっと話はそれますが、ようやく制作を手がけていたレスポンシブ・ウェブ・デザインを採用したリニューアルが一段落しました。いやぁ〜、レスポンシブ・ウェブ・デザインで作るサイトは大変でした（まだ継続中ではありますが。。。）。完璧とまではいかないですが、だいぶいいところまでは行ったと思うのが正直なところです。ある程度の規模のウェブサイトでレスポンシブ・ウェブ・デザインを実装するには、CMSを実装するのと同じくらい、または、それ以上の覚悟や勇気がいるということを実感しました。

ただ、実際にやってみて、これからのウェブ制作の方向性が見えた気がします。これからも増え続ける多種多様なデバイスに、最適なコンテンツを提供していくには、今までの作り方ではなく、なんらかの新しい対応が必要になります。その一つの柱となるのが、レスポンシブ・ウェブ・デザインなのだろうと思っています。スマホの波は着実に近づいてますからね。

2011/10/17 20:35 by @Rriver | RSS | Fb

関連する投稿

関連するカテゴリ・タグ

カテゴリ： レスポンシブWebデザイン
タグ： 、

Ads by Google