HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд. - Фрэйн .

Здесь, видимо, следует заметить, что в большинстве ситуаций указывать экран (screen) не нужно. Основное положение спецификации звучит следующим образом:

«Сокращенный синтаксис предлагается для тех медиазапросов, которые применяются ко всем типам медиаустройств; ключевое слово all может быть опущено (наряду со следующим за ним and). То есть если тип медиаустройства не задан конкретным образом, подразумевается настройка all».

Следовательно, пока не возникнет потребность нацелить стили на конкретные типы медиаустройств, screen и and можно опустить. Впредь все медиазапросы в примерах будут записываться с учетом этой возможности.

Что можно тестировать с помощью медиазапросов

При построении адаптивного дизайна чаще всего используются медиазапросы, относящиеся к ширине окна просмотра (width). Исходя из личного опыта, могу сказать: другие возможности мне особо не пригодились (за редким исключением использования разрешения и высоты окна просмотра). Но на случай возникновения таких потребностей представляю вам перечень всех возможностей Media Queries Level 3, которыми можно будет воспользоваться. Может быть, некоторые из них вас смогут заинтересовать:

• width: — ширина окна просмотра;

• height: — высота окна просмотра;

• device-width: — ширина поверхности отображения (для нас это, как правило, ширина экрана устройства);

• device-height: — высота поверхности отображения (для нас это, как правило, высота экрана устройства);

• orientation: — возможность проверки портретной или альбомной ориентации устройства;

• aspect-ratio: — соотношение ширины к высоте на основе ширины и высоты окна просмотра. Дисплей с соотношением сторон 16:9 может быть описан как aspect-ratio: 16/9;

• device-aspect-ratio: — эта возможность аналогична предыдущей, но основывается на ширине и высоте не окна просмотра, а поверхности отображения устройства;

• color: — количество битов, приходящееся на каждую составляющую цвета. Например, min-color: 16 задаст проверку того, обладает ли устройство цветом с глубиной 16 бит;

• color-index: — количество записей в таблице поиска цветов устройства. Значения должны быть числовыми и не могут быть отрицательными;

• monochrome: — возможность проверки количества битов на пиксел в буфере монохромного кадра. Значение должно быть целым числом, например monochrome: 2, и не может быть отрицательным;

• resolution: — эта возможность может использоваться для проверки разрешения экрана или принтера, например min-resolution: 300dpi. Может также приниматься единица измерения в точках на сантиметр, например min-resolution: 118dpcm;

• scan: — это свойство может отображать значение развертки (прогрессивной или чересстрочной), которое имеет отношение в основном к телевизионным устройствам. Например, нацеливание на устройство с параметрами 720p HD TV (буква «p» в 720p означает progressive — «прогрессивная») может быть обозначено с помощью выражения scan: progressive, a на устройство 1080i HD TV (буква «i» в 1080i означает interlaced — «чересстрочная») — с помощью выражения scan: interlace;

• grid: — эта возможность показывает, на какой основе построено устройство, сеточной или растровой.

Все перечисленные возможности, за исключением scan и grid, для создания диапазонов могут использоваться с префиксом min или max. Рассмотрим, к примеру, следующий фрагмент кода:

@import url("tiny.css") screen and (min-width:200px) and (max-width:360px);

Здесь минимум (min) или максимум (max) применены для задания диапазона ширины — width. Файл tiny.css может быть импортирован для экранных устройств с минимальной шириной окна просмотра 200 пикселов и максимальной шириной окна просмотра 360 пикселов.

Свойства, не рекомендуемые в медиазапросах спецификации CSS Media Queries Level 4

Следует знать, что в предварительной спецификации медиазапросов Media Queries Level 4 не рекомендуется использование ряда возможностей (http://dev.w3.org/csswg/mediaqueries-4/#mf-de­precated), в частности, device-height, device-width и device-aspect-ratio. Поддержка этих запросов останется в браузерах, но от написания новых таблиц стилей с их использованием рекомендуется воздержаться.

Использование медиазапросов для изменения дизайна

Согласно заложенной в них характерной особенности стили, находящиеся ниже в каскадной таблице стилей (для меня и вас — в CSS-файле), доминируют над такими же стилями, находящимися выше (если только расположенные выше стили не имеют более конкретной нацеленности). Поэтому в начале таблицы стилей мы можем настроить основные стили, применимые ко всем версиям нашего дизайна (или как минимум обеспечивающие базовый внешний вид), а затем переопределить соответствующие разделы с помощью медиазапросов, следующих далее в документе. Например, можно задаться целью настроить в ограниченных окнах просмотра ссылки переходов в виде простого текста (или, может быть, в виде текста, имеющего более мелкий шрифт), а затем переопределить эти стили с помощью медиазапроса на предоставление в более просторных окнах просмотра не только текста, но и значков.

Посмотрим на то, как это может выглядеть на практике (example_02-02). Сначала разметка:

<a href="#" class="CardLink CardLink_Hearts">Hearts</a>

<a href="#" class="CardLink CardLink_Clubs">Clubs</a>

<a href="#" class="CardLink CardLink_Spades">Spades</a>

<a href="#" class="CardLink CardLink_Diamonds">Diamonds</a>

А теперь CSS:

.CardLink {

    display: block;

    color: #666;

    text-shadow: 0 2px 0 #efefef;

    text-decoration: none;

    height: 2.75rem;

    line-height: 2.75rem;

    border-bottom: 1px solid #bbb;

    position: relative;

}

@media (min-width: 300px) {

    .CardLink {

        padding-left: 1.8rem;

        font-size: 1.6rem;

    }

}

.CardLink:before {

    display: none;

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    left: 0;

}

.CardLink_Hearts:before {

    content: "♥";

}

.CardLink_Clubs:before {

    content: "♣";

}

.CardLink_Spades:before {

    content: "♠";

}

.CardLink_Diamonds:before {

    content: "♦";

}

@media (min-width: 300px) {

    .CardLink:before {

        display: block;

    }

}

Вот как выглядит фрагмент экрана при небольшом окне просмотра.

А вот так — при более просторном окне просмотра.

В медиазапрос может быть заключен любой код CSS

Следует запомнить, что все подлежащее описанию в коде CSS также может быть заключено в медиазапрос. По существу, с помощью медиазапросов можно полностью изменить разметку и внешний вид сайта в различных ситуациях (обычно для разных размеров окна просмотра).

Медиазапросы для HiDPI-устройств

Еще одним широко распространенным способом использования медиазапросов является изменение стилей, когда сайт просматривается на устройстве с высоким разрешением. Рассмотрим следующий код:

@media (min-resolution: 2dppx) {

    /* стили */

}

Здесь медиазапрос определяет, что заключенные в него стили мы желаем применить при разрешении экрана 2 точки на пиксел (2 dppx). Они будут применены к таким устройствам, как iPhone 4 (HiDPI-устройствам компании с условным наименованием Retina), и к целому комплексу Android-устройств. Этот медиазапрос можно изменить с целью применения к более широкому кругу устройств путем уменьшения значения dppx.

совет

Для более широкой поддержки при написании медиазапросов min-resolution убедитесь в наличии запущенных инструментальных средств для работы с префиксами, чтобы предоставить соответствующие префиксы производителей. Если вы пока не в курсе того, что такое префиксы производителей, волноваться не стоит, поскольку более подробно эта тема будет рассмотрена в следующей главе.

Рассмотрение аспектов организации и разработки медиазапросов

Теперь слегка коснемся различных подходов, доступных разработчикам при написании и организации их медиазапросов. Каждый подход предлагает те или иные преимущества и компромиссы, поэтому будет как минимум полезно знать об этих факторах, даже если вы решили, что они, по большому счету, не имеют отношения к вашим потребностям.

Привязка различных CSS-файлов с помощью медиазапросов

С точки зрения браузера CSS рассматривается как ресурс, приостанавливающий отображение. Браузеру нужно извлечь и проанализировать привязанные CSS-файлы до полного вывода страницы на экран.

Но современные браузеры достаточно разумны для того, чтобы определять, какие таблицы стилей (связанные в head-разделе страницы с медиазапросами) должны быть проанализированы немедленно, а какие могут быть отложены и проанализированы уже после вывода на экран начальной страницы.

Для таких браузеров CSS-файлы, привязанные с помощью неприменимых медиазапросов (например, если экран слишком мал для применения медиазапроса), могут откладываться до момента после загрузки начальной страницы, предоставляя некоторые преимущества в производительности.

Подробности по данной теме можно найти на страницах разработчиков компании Google: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css.