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日に公開され、2017年11月23日に更新された記事です。
About the author
「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら。
ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Mastodon @rriver@vivaldi.net 、Twitter @rriver 、またはFacebook までご連絡ください。