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
Voir aussi stackoverflow.com/questions/4144706/...
-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
Vous devez vous connecter pour publier un commentaire.
La requête de média en lui-même est, comme vous le dites, utilisé pour filtrer WebKit, car il utilise une
-webkit-
propriété.Chrome est simplement un peu stricte lorsque vous dites qu'il ne peut pas reconnaître les
parce que c'est en fait non valide CSS. L'espace après le
and
mot-clé est importante. Cela est clairement indiqué dans le CSS3 media query spec:La notation fonctionnelle se réfère à des choses comme
url()
,rgb()
etrgba()
. Comme vous pouvez le voir il n'y a pas d'espace entre le nom de la fonction et la parenthèse ouvrante dans ces exemples.and
n'est pas une fonction, mais simplement un mot-clé à dire que les médias, la requête doit correspondre à la moyenne que vous spécifiez, et que la mise en page du moteur doit satisfaire l'expression après. Les parenthèses autour de-webkit-min-device-pixel-ratio:0
simplement désigner comme une expression.Addendum: oui, cela signifie que votre CSS optimizer a un bug 😉
Ball: Ooh, peut-être que vous devriez déposer un rapport.
Juste, mais apparemment je suis un dolt à l'écriture "WikiSyntax"... j'ai besoin de Démarque partout, merde
Même problème w YUI
OriginalL'auteur BoltClock
Voici une solution de contournement rapide avec YUI compressor de commentaire particulier.
Le problème est résolu dans le courant (2.4.5) version
https://github.com/yui/yuicompressor/blob/master/src/com/yahoo/platform/yui/compressor/CssCompressor.java#L180
correctif fonctionne très bien avec ajaxminifier ... Merci beaucoup. syntaxe: @media screen/*!*/et/*!*/(-webkit-min-device-pixel-ratio:0)
OriginalL'auteur szaboat
Seulement utiliser ceci:
L'utiliser pour appliquer le style CSS uniquement pour le navigateur basé sur WebKit , pensez-y si ( webkit ) faire quelque chose
OriginalL'auteur Fareed Alnamrouti