Quelle est la sémantique de « écran @media et (webkit-min-device-pixel-rapport: 0) »?

Question

Je est arrivé à utiliser le CSS ci-dessous hack pour les navigateurs WebKit, selon http :. //www.webmonkey.com/2010/02/browser-specific_css_hacks/

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

Il fonctionne. Mais, plus tard, je trouve que cela ne fonctionne pas dans un environnement de production. Je trouve que cela est dû à CSS optimiseur coupe l'espace après and. Le CSS ci-dessous n'est pas reconnaissable par Chrome.

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

Alors, que fait exactement la moyenne de @media screen and (-webkit-min-device-pixel-ratio:0)?

Je sais @media screen, mais je ne l'ai pas utilisé and dans un fichier CSS avant.

Pourquoi le caractère espace après and nécessaire?

Answer 1

Les médias eux-mêmes est une requête, comme vous dites, utilisé pour WebKit filtre car il utilise une propriété -webkit-.

Chrome est tout simplement un peu stricte quand vous dites qu'il ne peut pas reconnaître

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

parce que CSS est en fait invalide. L'espace après le mot-clé and est significatif. Ceci est clairement indiqué dans les CSS3 media requête spécifications:

  

Exemple 20

     

Ce qui suit est une requête malformée médias parce avoir aucun espace entre « et » et l'expression est pas autorisée. (Qui est réservé à la syntaxe de la notation fonctionnelle.)

@media all and(color) { … }

La notation fonctionnelle fait référence à des choses comme url(), rgb() et rgba(). Comme vous pouvez le voir, il n'y a pas d'espace entre le nom de la fonction et la parenthèse d'ouverture dans ces exemples.

and n'est pas une fonction, mais simplement un mot-clé pour dire que la requête des médias doit correspondre au support que vous spécifiez, et que le moteur de mise en page doit satisfaire l'expression que vous placez après. Les parenthèses autour -webkit-min-device-pixel-ratio:0 indiquent simplement comme une expression.

Addendum: oui, cela ne signifie votre optimiseur CSS a un bug;)

Answer 2

Voici une solution rapide avec un commentaire spécial compresseur YUI.

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

Le problème est résolu dans la version actuelle (2.4.5)

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

Answer 3

Utilisez uniquement ceci:

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

}