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

Advertisement


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を実装するのと同じくらい、または、それ以上の覚悟や勇気がいるということを実感しました。

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

About the author

Rriverの竜(りょう)です。「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、東海岸のボストン近郊でウェブ制作を開始。帰国後、東京のウェブ制作会社に勤務。現在は組織のウェブ担当者として日英バイリンガルウェブサイトの運営に携わっています。より詳しくはこちら

記事へのコメントはもちろん、執筆・翻訳、レスポンシブなウェブサイト制作、コラボのご相談などもTwitter @rriver またはFacebook でお気軽にご連絡ください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です