HTML5 & CSS - вопрос операторов медиа-запросов - PullRequest
Новая
       3

HTML5 & CSS - вопрос операторов медиа-запросов

5 голосов
/ 23 апреля 2011

Мне было интересно, может ли кто-нибудь объяснить, что каждый из медийных запросов в приведенном ниже примере означает простыми словами?

Вот примеры. 

media="not screen and (color)" 
media="projection, screen and (color)" 
media="only projection and (color)"

1 Ответ

7 голосов
/ 23 апреля 2011

Чтобы проанализировать, что означают медиазапросы, вам нужно помнить следующее:

  1. Запятая означает «или».
  2. Непонятная вещь в началемедиазапрос - это имя носителя, к которому относится запрос (если только это слово не "или" только ", в этом случае слово second является носителем.
  3. " not"отменяет все до запятой, которая следует.
  4. Вещи в скобках являются модификаторами.
  5. Алгоритм HTML4, заданный для разбора медиа, ужасно нарушен: он просто извлекает первое слово из каждой части между запятымиКлючевое слово «only» было введено, чтобы позволить авторам медиа-запросов обойти эту ошибку. Агент UA, реализующий медиа-запросы, просто игнорирует это ключевое слово.

Так что теперь по порядку.

Ваш первый медиа-запрос выбирает все, что не является «экраном и (цветным)». Поэтому он выбирает все, что не является цветным экраном (то есть неэкранные, а также монохромные экраны).

Ваш второй медia запрос выбирает все, что является проекционным носителем (цветным или монохромным) или цветным экраном.

Ваш третий медиазапрос выбирает носители с цветной проекцией в UA, которые реализуют медиазапросы.В UA, который реализует алгоритм HTML 4, он игнорируется, потому что «only» не является спецификатором медиа для HTML 4.Если "only" было пропущено, то в старых UA он выберет все проекционные носители, потому что он просто извлечет это первое слово и проигнорирует часть "and (color)".

...