Какова семантика "@media screen and (-webkit-min-device-pixel-ratio: 0)"?

Question

Мне довелось использовать приведенный ниже хакер CSS для браузеров на основе WebKit, согласно http://www.webmonkey.com/2010/02/browser-specific_css_hacks/.

@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)?

Я знаю @media screen, но я не использовал andв CSS-файле до.

Почему необходим пробел после 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) {

}