Что означает семантика экрана @media и (-webkit-min-device-pixel-ratio: 0)?

Мне удалось использовать ниже описанный 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?

Ответ 1

Сам медиа-запрос, как вы говорите, используется для фильтрации WebKit, поскольку он использует свойство -webkit-.

Chrome просто немного строг, когда вы говорите, что не может распознать

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

потому что это фактически недействительный CSS. Пространство после ключевого слова and значимо. Это четко указано в спецификации CSS3 media:

ПРИМЕР 20

Ниже приведен неверный запрос на мультимедиа, поскольку не существует пробела между 'и и выражением. (Это зарезервировано для синтаксиса функциональных обозначений.)
@media all and(color) { … }

Функциональная нотация относится к вещам типа url(), rgb() и rgba(). Как вы можете видеть, нет пробелов между именем функции и открывающей скобкой в этих примерах.

and не является функцией, а просто ключевым словом, чтобы сказать, что медиа-запрос должен соответствовать указанному вами средству, и, что механизм компоновки должен удовлетворять выражению, которое вы размещаете после него. Скобки вокруг -webkit-min-device-pixel-ratio:0 просто обозначают это как выражение.

Приложение: да, это означает, что у вашего оптимизатора CSS есть ошибка;)

Ответ 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

Ответ 3

Используйте это только:

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

}