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のステッカーが貼られたMacBookの向こうにいる自分のMemojiの似顔絵

「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら

ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Mastodon @rriver@vivaldi.net Twitter @rriver 、またはFacebook までご連絡ください。