google-chrome - 「@mediascreenand（-webkit-min-device-pixel-ratio：0）」のセマンティクスは何ですか？

Question

http://www.webmonkey.com/2010/02/browser-specific_css_hacks/によると、私はたまたまWebKitベースのブラウザに以下のCSSハックを使用しました。

@media screen and (-webkit-min-device-pixel-ratio:0) {
    #my-id { height: 100%; }
}

できます。しかし、後で私はそれが本番環境では機能しないことに気づきました。CSSオプティマイザーが。の後にスペースをトリミングしていることが原因であることがわかりましたand。以下のCSSはChromeで認識できません。

@media screen and(-webkit-min-device-pixel-ratio:0) {
    #my-id { height: 100%; }
}

では、正確には@media screen and (-webkit-min-device-pixel-ratio:0)どういう意味ですか？

私は知っていますが、これまでCSSファイルで@media screen使用したことはありません。and

なぜスペース文字がand必要なのですか？

Answer 1

メディアクエリ自体は、あなたが言うように、プロパティを使用するため、WebKitをフィルタリングするために使用され-webkit-ます。

あなたがそれが認識できないと言うとき、Chromeは単に少し厳しいです

@media screen and(-webkit-min-device-pixel-ratio:0)

それは実際には無効なCSSだからです。andキーワードの後のスペースは重要です。これは、 CSS3メディアクエリ仕様に明確に記載されています。

例20

'と'の間にスペースがなく、式が許可されていないため、以下は不正な形式のメディアクエリです。（これは機能表記構文のために予約されています。）

@media all and(color) { … }

機能表記は、、などurl()を指します。ご覧のとおり、これらの例では、関数名と開き括弧の間にスペースはありません。rgb()rgba()

andは関数ではなく、メディアクエリが指定したメディアと一致する必要があり、レイアウトエンジンがその後に配置する式を満たす必要があることを示すキーワードです。かっこは-webkit-min-device-pixel-ratio:0単に式として示しています。

補遺：はい、それはあなたのCSSオプティマイザーにバグがあることを意味します;）

Answer 2

これは、YUIコンプレッサーの特別なコメントによる簡単な回避策です。

@media screen and/*!*/(-webkit-min-device-pixel-ratio:0) { ... }

この問題は、現在の（2.4.5）バージョンで修正されています

https://github.com/yui/yuicompressor/blob/master/src/com/yahoo/platform/yui/compressor/CssCompressor.java#L180

Answer 3

これのみを使用してください：

@media(-webkit-min-device-pixel-ratio:0) {

}