Quelle est la sémantique de la “@media screen and (-webkit-min-device-pixel-ratio:0)”?

Il m'est arrivé d'utiliser le dessous des CSS hack pour WebKit, navigateurs, 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, j'ai trouvé que cela ne fonctionne pas dans un environnement de production. J'ai trouvé que c'est dû à la CSS de l'optimiseur de découper l'espace après and. Ci-dessous la CSS n'est pas reconnaissable par google Chrome.

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

Alors, que fait exactement le @media screen and (-webkit-min-device-pixel-ratio:0) veux dire?

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

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

Techniquement, je ne pense pas que c'est un CSS hack. Ce n'est pas exactement ce que ces fonctionnalités de langage sont destinés, mais c'est assez efficace identifie WebKit, grâce à son utilisation de -webkit-min-device-pixel-ratio:0. Un de la pas-si-hacky hacks.
Voir aussi stackoverflow.com/questions/4144706/...

OriginalL'auteur Morgan Cheng | 2010-11-05