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

Для пользователей, не имеющих возможности провести указатель над элементами экрана, можно нацелить стили для значения этого свойства, равного none:

@media (hover: none) {

/* стили для тех случаев, когда провести указатель над элементами невозможно */

}

Для тех пользователей, которые имеют такую возможность, но должны для ее инициирования предпринять определенные действия, можно воспользоваться значением on-demand:

@media (hover: on-demand) {

/* стили для тех случаев, когда пользователь

имеет возможность провести указатель над

элементами, но от него требуются определенные

действия */

}

Для пользователей, имеющих возможность провести указатель над элементами, может быть использовано объявление hover без указания какого-либо значения:

@media (hover) {

/* стили для тех случаев, когда пользователь

имеет возможность провести указатель над элементами */

}

Существуют также медиасвойства any-pointer и any-hover. Они похожи на рассмотренные ранее hover и pointer, но проверяют возможности любого из возможных устройств ввода.

Медиасвойства среды

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

@media (light-level: normal) {

/* стили для стандартной освещенности */

}

@media (light-level: dim) {

/* стили для приглушенной освещенности */

}

@media (light-level: washed) {

/* стили для яркой освещенности */

}

Следует помнить, что в разрабатываемой спецификации Level 4 Media Queries предусматривается несколько реализаций таких свойств. Возможно также, что до возникновения надежных реализаций эти спецификации претерпят изменения. Но все же будет полезно иметь некоторое представление о том, какие новые возможности ждут нас в ближайшие дни.

О редакторском проекте этих свойств можно узнать на сайте http://dev.w3.org/csswg/mediaqueries-4/#mf-environment.

Резюме

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

Но мы также узнали, что сами по себе медиазапросы могут предоставить только такой адаптивный веб-дизайн, в котором осуществляются резкие переходы от одной разметки к другой. Это нельзя считать по-настоящему адаптивным веб-дизайном с плавными переходами от разметки к разметке. Для достижения конечной цели нам нужно будет воспользоваться подстраиваемыми разметками. Они должны позволить нашим конструкциям проявлять гибкость. В следующей главе мы займемся созданием подстраиваемых разметок для придания плавности переходам между контрольными точками наших медиазапросов.

3. Динамически изменяемые разметки и адаптивные изображения

В давние времена (в конце 1990-х годов) ширину создаваемых сайтов обычно задавали в процентах. Указание ширины в процентах приводило к подстраиванию страниц к экрану просмотра и приобрело известность как резиновые разметки (fluid layouts).

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

В главе 2 мы в конечном итоге признали, что наряду с предоставляемой медиа­запросами возможностью создания дизайна, адаптируемого к изменяющимся размерам окна просмотра за счет переключения от одного набора стилей к другому, нам нужна какая-либо возможность динамического изменения нашего дизайна в промежутках между контрольными точками, предоставляемыми медиазапросами. Эта возможность успешно реализуется путем программирования подстраиваемой разметки, способной легко растягиваться для заполнения разрывов между контрольными точками медиазапросов.